SCSS
@import "compass/css3";
body {
margin: 0;
padding: 0;
background-color: #333;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
align-self: center;
width: 230px;
@include perspective(900px);
position: relative;
}
.render {
display: inline-block;
z-index: 0;
position: relative;
line-height: 0.55em;
height: 0.7em;
@include transition(all 0.3s ease);
@include transform3d( rotateY(30deg));
font-family: 'Bree Serif', serif;
font-size: 12em;
color: #f5f5f5;
@include text-shadow(
white 0.006em 0.006em 1px,
rgba(0,0,0, 0.15) -3px 7px 10px,
#d0d0d0 -1px 1px 1px,
#d0d0d0 -2px 1px 1px,
#d0d0d0 -3px 1px 1px,
#d0d0d0 -4px 1px 1px,
#d0d0d0 -5px 1px 1px,
#d0d0d0 -6px 1px 1px,
#d0d0d0 -7px 1px 1px,
#d0d0d0 -8px 1px 1px,
#d0d0d0 -9px 1px 1px,
#d0d0d0 -10px 1px 1px,
#d0d0d0 -11px 1px 1px,
#d0d0d0 -12px 1px 1px,
rgba(255,255,255, 0.6) -5px 2px 100px
);
&.reflect {
z-index: 0;
opacity: 0.4;
@include transform3d( rotateX(180deg) rotateY(-30deg));
}
&.shadow {
opacity: 0.6;
z-index: 2;
color: transparent;
letter-spacing: -0.02em;
position: absolute;
top: 0.36em;
left: 0.1em;
@include transform-origin(0 0);
@include transform3d(rotateX(-100deg) rotateY(-5deg) rotateZ(30deg));
@include text-shadow(
rgba(0,0,0, 0.8) 0 0 30px,
rgba(0,0,0, 0.8) 0 0 80px,
rgba(0,0,0, 1) 0 0 150px,
rgba(0,0,0, 1) 0 0 150px,
rgba(0,0,0, 1) 0 0 250px,
rgba(0,0,0, 1) 0 0 250px,
white -0.15em 0.4em 250px);
}
}
1 Response