SCSS
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100);
$font-size: 10vw;
$bg: white;
$color:hsla(278, 10%, 63%,.8);
$overlay-url: 'http://themes-pixeden.com/playground/text/tenue/assets/img/texture.jpg';
body {
overflow:hidden;
height:100vh;
width:100vw;
background-image: url($overlay-url);
}
.tenue-shadow {
font-family: 'Josefin Sans', sans-serif;
font-weight: 100;
@function tenue-shadow($steps: 70, $ratio: .005, $op: .85, $angle: -133deg, $color: red, $bg:cyan){
$shadows: ();
$n: 0;
$b: 0;
$steps: if($steps > 128, 128, $steps);
@for $i from 1 through $steps {
$s: $i*2-1;
@if ($i > $steps - 11 and $i < $steps - 3){
$b: $b + .4px;
} @else if ($i >= $steps - 3) {
$b: $b + 1px;
} @else {
$b: $s * .1px;
}
// if $bg fade to this color
$c: if($bg,
rgba(mix($color, $bg, 100-($i/$steps*100)), $op),
rgba($s, $s, $s, $op)
);
// if even/odd
$n: if($i%2 == 0, $n + 1, $n + 2);
// do shadows
$shadows: append(
$shadows,
// $n * $radio * -1em $i * $radio * -1em
sin($angle) * ($n * $ratio * 1em) cos($angle) * ($i * $ratio * 1em)
$b
$c,
'comma');
}
@return $shadows;
}
#one{color:hsla(346,100%, 50%,1);}
#two{color:hsla(296, 100%, 50%,1);}
#three{color:hsla(260,100%, 50%,1);}
#four{color:hsla(189,100%, 50%,1);}
#five{color:hsla(152,100%, 50%,1);}
#six{color:hsla(68, 100%, 50%,1);}
#seven{color:hsla(32,100%, 50%,1);}
text-shadow: tenue-shadow(
$steps: 101, // [1]
$ratio: .004, // [2]
$op: 75, // [3]
$angle: -133deg, // [4]
$color: $color, // [5]
$bg: $bg // [6]
);
/* You could add: */
mix-blend-mode: multiply;
}
.tenue-extras {
font-size: $font-size;
letter-spacing: .34em;
line-height: 3.5;
margin-bottom: .5em;
padding-left: .34em;
margin-top: 0;
overflow: hidden;
padding-top: 1em;
position: relative;
text-align: center;
text-transform: none;
word-wrap: break-word;
}
.tenue-overlay {
background-blend-mode: difference, color;
background-image: linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, hsl(0, 100%, 57%) 13%, hsla(300, 100%, 57%, .84) 15%, hsla(20, 50%, 57%, 1) 25%, hsla(10, 60%, 57%, .73) 33%, hsl(180, 50%, 57%) 48%, hsla(180, 50%, 57%, .9) 49%,hsl(20, 50%, 57%) 57%, hsl(60, 50%, 57%) 63%, hsla(70, 50%, 57%,1) 67%, hsla(8, 59%, 57%,1) 74%, hsla(126, 99%, 57%,.8) 84%, hsla(59, 49%, 57%,1) 86%, hsla(126, 99%, 57%,0.7) 100%);
background-repeat: no-repeat;
background-size: cover;
height: 400%;
left: 0;
mix-blend-mode: difference;
opacity: .3;
position: absolute;
top: 0;
width: 200%;
animation: ring 5s cubic-bezier( 0.74, 0.31, 0.37, 0.8) infinite alternate;
}
@keyframes ring{
50% { transform: scale(3);}
100% { transform: translate(-50%,-50%)
rotateZ(360deg) ;
}
}
.u-dn { display: none; }
