Skip to content

Instantly share code, notes, and snippets.

@co0kie

co0kie/SassMeister-input-HTML.html

Created January 29, 2014 10:54
Show Gist options
  • Save co0kie/8685703 to your computer and use it in GitHub Desktop.
Save co0kie/8685703 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<a href="#" class="arcanys" style="float:right;/* display:none */"> <span>Arcanys</span> <em>jech</em> </a>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@function calculateRem($size){
$remSize: $size / 16px;
@return #{$remSize}rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
@import "compass";
.arcanys{
text-decoration:none;
display: block;
float:left !important;
margin-top:60px;
margin-left:300px;
width: 200px;
position: relative;
@include transition(all 500ms linear);
&:hover{
em{
position: absolute;
right: 0;
z-index: 2;
top: 4px;
text-transform: capitalize;
color: #666 !important;
&:before{
right: 35px;
width: 1px;
height: 16px;
background: #666;
bottom: 3px;
@include transform(rotate(381deg));
}
&:after{
opacity: 0;
}
}
&:before{
content: '';
position: absolute;
background: #bc121d;
bottom: 25px;
right: 72px;
width: 39px;
height: 14px;
@include transform(skew(-34deg));
@include transition(all 500ms linear);
}
&:after{
content: 'TM';
position: absolute;
top: -54px;
right: 49px;
font-size: 7px;
height: 75px;
width: 50%;
text-align: right;
opacity: 1;
@include transition(all 250ms linear);
color: rgba(204, 204, 204, 0.45);
}
span{
@include transition(all 500ms linear);
letter-spacing: 1px;
color:#BC121D;
text-transform: uppercase;
&:before{
content: '';
position: absolute;
top: -35px;
left: 28%;
width: 31%;
height: 16px;
background: #bc121d;
z-index: -1;
@include transform(rotate(125deg) skew(35deg));
@include border-radius(30px 0px 0px 10px);
}
&:after{
content: '';
position: absolute;
bottom: 40px;
left: 88px;
width: 57px;
height: 16px;
background: #bc121d;
z-index: -1;
@include transform(rotate(54deg) skew(-36deg));
@include border-radius(0px 0 0 10px);
}
}
}
&:before{
content: '';
position: absolute;
background: #bc121d;
bottom: 0;
right: 54px;
width: 80px;
height: 23px;
@include transform(skew(0deg));
@include transition(all 500ms linear);
}
&:after{
opacity: 0;
content: 'X';
position: absolute;
top: 0;
right: 0;
height: 0;
width: 0%;
text-align: right;
@include transition(all 250ms linear);
}
span{
position: relative;
color:#fff;
text-decoration:none;
z-index: 2;
line-height: 1;
@include font-size(20px);
padding: 1%;
text-align: center;
text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
display: block;
@include transition(all 500ms linear);
&:before{
content: '';
position: absolute;
bottom: 0;
left: 29%;
width: 9%;
height: 23px;
background: #bc121d;
z-index: -1;
@include transform(rotate(180deg) skew(-31deg));
@include border-radius(0);
@include transition(all 500ms linear);
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 44px;
width: 6%;
height: 23px;
background: #bc121d;
z-index: -1;
@include transform(rotate(180deg) skew(-31deg));
@include border-radius(0);
@include transition(all 500ms linear);
}
}
em{
position: absolute;
right: 54px;
z-index: 0;
top: 4px;
text-transform: capitalize;
color: transparent !important;
@include transition(all 300ms ease-in);
&:before{
position: absolute;
content: '';
width: 2px;
height: 23px;
background: #bc121d;
bottom: -1px;
right: -3px;
@include transition(all 300ms ease-in);
}
&:after{
content: 'hover me';
position: absolute;
top: -17px;
right: 0px;
color: #666;
font-size: 11px;
white-space: nowrap;
text-transform: lowercase;
@include transition(all 400ms ease-out);
}
}
}
Raw
SassMeister-output.css
.arcanys {
text-decoration: none;
display: block;
float: left !important;
margin-top: 60px;
margin-left: 300px;
width: 200px;
position: relative;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys:hover em {
position: absolute;
right: 0;
z-index: 2;
top: 4px;
text-transform: capitalize;
color: #666 !important;
}
.arcanys:hover em:before {
right: 35px;
width: 1px;
height: 16px;
background: #666;
bottom: 3px;
-moz-transform: rotate(381deg);
-ms-transform: rotate(381deg);
-o-transform: rotate(381deg);
-webkit-transform: rotate(381deg);
transform: rotate(381deg);
}
.arcanys:hover em:after {
opacity: 0;
}
.arcanys:hover:before {
content: '';
position: absolute;
background: #bc121d;
bottom: 25px;
right: 72px;
width: 39px;
height: 14px;
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-o-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys:hover:after {
content: 'TM';
position: absolute;
top: -54px;
right: 49px;
font-size: 7px;
height: 75px;
width: 50%;
text-align: right;
opacity: 1;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
color: rgba(204, 204, 204, 0.45);
}
.arcanys:hover span {
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
letter-spacing: 1px;
color: #BC121D;
text-transform: uppercase;
}
.arcanys:hover span:before {
content: '';
position: absolute;
top: -35px;
left: 28%;
width: 31%;
height: 16px;
background: #bc121d;
z-index: -1;
-moz-transform: rotate(125deg) skew(35deg);
-ms-transform: rotate(125deg) skew(35deg);
-o-transform: rotate(125deg) skew(35deg);
-webkit-transform: rotate(125deg) skew(35deg);
transform: rotate(125deg) skew(35deg);
-moz-border-radius: 30px 0px 0px 10px;
-webkit-border-radius: 30px;
border-radius: 30px 0px 0px 10px;
}
.arcanys:hover span:after {
content: '';
position: absolute;
bottom: 40px;
left: 88px;
width: 57px;
height: 16px;
background: #bc121d;
z-index: -1;
-moz-transform: rotate(54deg) skew(-36deg);
-ms-transform: rotate(54deg) skew(-36deg);
-o-transform: rotate(54deg) skew(-36deg);
-webkit-transform: rotate(54deg) skew(-36deg);
transform: rotate(54deg) skew(-36deg);
-moz-border-radius: 0px 0 0 10px;
-webkit-border-radius: 0px;
border-radius: 0px 0 0 10px;
}
.arcanys:before {
content: '';
position: absolute;
background: #bc121d;
bottom: 0;
right: 54px;
width: 80px;
height: 23px;
-moz-transform: skew(0deg);
-ms-transform: skew(0deg);
-o-transform: skew(0deg);
-webkit-transform: skew(0deg);
transform: skew(0deg);
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys:after {
opacity: 0;
content: 'X';
position: absolute;
top: 0;
right: 0;
height: 0;
width: 0%;
text-align: right;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.arcanys span {
position: relative;
color: #fff;
text-decoration: none;
z-index: 2;
line-height: 1;
font-size: 20px;
font-size: 1.25rem;
padding: 1%;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
display: block;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys span:before {
content: '';
position: absolute;
bottom: 0;
left: 29%;
width: 9%;
height: 23px;
background: #bc121d;
z-index: -1;
-moz-transform: rotate(180deg) skew(-31deg);
-ms-transform: rotate(180deg) skew(-31deg);
-o-transform: rotate(180deg) skew(-31deg);
-webkit-transform: rotate(180deg) skew(-31deg);
transform: rotate(180deg) skew(-31deg);
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys span:after {
content: '';
position: absolute;
bottom: 0;
left: 44px;
width: 6%;
height: 23px;
background: #bc121d;
z-index: -1;
-moz-transform: rotate(180deg) skew(-31deg);
-ms-transform: rotate(180deg) skew(-31deg);
-o-transform: rotate(180deg) skew(-31deg);
-webkit-transform: rotate(180deg) skew(-31deg);
transform: rotate(180deg) skew(-31deg);
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
.arcanys em {
position: absolute;
right: 54px;
z-index: 0;
top: 4px;
text-transform: capitalize;
color: transparent !important;
-moz-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
-webkit-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}
.arcanys em:before {
position: absolute;
content: '';
width: 2px;
height: 23px;
background: #bc121d;
bottom: -1px;
right: -3px;
-moz-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
-webkit-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}
.arcanys em:after {
content: 'hover me';
position: absolute;
top: -17px;
right: 0px;
color: #666;
font-size: 11px;
white-space: nowrap;
text-transform: lowercase;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-webkit-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
Raw
SassMeister-rendered.html
<a href="#" class="arcanys" style="float:right;/* display:none */"> <span>Arcanys</span> <em>jech</em> </a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment