Hipster-Ish Text Dashed Shadow Effect With Pure CSS3


An awesome text effect that adds animated & hipster-ish dash shadow to your text using only CSS3.

Demo

Hipster-Ish Text Dashed Shadow Effect With Pure CSS3

How to use it:

Add the following Html snippets to your web page.

<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>  <link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>    <span data-text="Hello!" class="dashed-shadow hello">Hello!</span>  <br />    <div data-text="This thing is" class="dashed-shadow">This thing is</div> <br />  <div class="sorta-block">    <div data-text="sort of"class="dashed-shadow sorta">sort of</div>   </div>  <div data-text="a hipster-ish" class="dashed-shadow hipsterish">a hipster-ish</div> <br />  <div class="dashed-shadow dashed-shadow-text">DASHED<br /><span class="shadow">SHADOW</span></div> <br />

Add the following CSS snippets to your CSS file.

@import "compass/css3";    //Variables here:  //(alongside with commented suggestions)  $foreground-color:#b85b3f;//black;  $background-color:#e8e3c7;//white  $shadow-color:#ba9186;//$foreground-color;  $distance:8px;  $cut-distance:3px;//$distance/4;  $strips-size:6px; //10px  $strips-ratio:50%;//70%  $strips-angle:45deg;//90deg;    //cray stuff yo. be sure to try (if you please)  $animate:false;//true  $fixed:false;//true    body{    font-family: 'Open Sans Condensed', sans-serif;    font-size:85pt;    background-color:$background-color;    text-align:center;    line-height:1.2em;    padding-top:70px;  }  .dashed-shadow{    position:relative;    top:$distance;    left:$distance;    display:inline-block;    color:$shadow-color;  }  @keyframes dash-animation{    0% {background-position:0 0};    100% {background-position:100% 0};  }  .dashed-shadow:before{    content:" ";    display:block;      position:absolute;    $bleeding-horizontal:10px;    $bleeding-vertical:0px;    top:-$bleeding-vertical - $distance;    left:-$bleeding-vertical - $distance;    bottom:-$bleeding-horizontal + $distance;    right:-$bleeding-horizontal + $distance;    z-index:1;    $color:$background-color;    $size:$strips-ratio/2;    $halfSize:$size/2;    $p1:$halfSize;    $p2:50%-$halfSize;    $p3:50%+$halfSize;    $p4:100%-$halfSize;    $transparent:transparentize($color,1);    @include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));    background-size:$strips-size $strips-size;    @if($animate){      animation:dash-animation 30s infinite linear;     }    @if($fixed){      background-attachment:fixed;    }  }  .dashed-shadow:hover:before{    animation:dash-animation 30s infinite linear;  }    .dashed-shadow:after{    z-index:2;    content:attr(data-text);    position:absolute;    left:-$distance;    top:-$distance;    color:$foreground-color;    text-shadow:$cut-distance $cut-distance $background-color;  }    //fancy stuff - just useless fluff, don't mind from here onwards    .hello{    font-family:'Cookie',cursive;    font-size:140pt;  }  .sorta-block{    font-size:50pt;    line-height:1.1em;    @include transform(skew(0,-5deg));    z-index:3;    position:relative;    margin-top:20px;    margin-bottom:10px;  }  .sorta{    border-top:4px solid $foreground-color;    border-bottom:4px solid $foreground-color;      text-transform:uppercase;    z-index:3;    //position:relative;    //display:block;    //width:300px;    font-style:italic;  }  .hipsterish{     font-family: 'Sancreek', cursive;      font-size:70pt;  }  .dashed-shadow-text{    font-size:140pt;    line-height:0.7em;    //left:-10px;  }  .shadow{    font-size:120pt;    line-height:0.8em;  }

Tags:

You Might Be Interested In: