Cara Membuat Animasi Dashed Shadow

Halo, jumpa lagi dengan saya 🙂 , Kali ini saya akan membuat tutorial mengenai bagaimanaÂ Cara Membuat Animasi Dashed Shadow, Nah buat kalian yang biasa hanya membuat efek shadow aja kali ini saya akan buat efek shadow nya menjadi lebih hidup dengan animasi, bagaimana caranya, simak langkah-langkahnya berikut ini.

Baik langsung saja, silahkan kalian buka teks editornya terlebih dahulu, kemudian coba ketikan atau salin kode HTML berikut.

<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 />

Kalo sudah, kita lanjutkan untuk kode CSS berikut untuk membuat efek dan animasi shadow nya.

@import "compass/css3";

@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;
}

Setelah semua diketikan, jangan lupa untuk disimpan, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya.

Untuk melihat hasil animasi silahkan kalian arahkan kursor atau panah ke arah huruf nya. Baik sekian tutorial mengenaiÂ Cara Membuat Animasi Dashed Shadow, semoga bermanfaat, sampai ketemu di tutorial selanjutnya 🙂

Kategori