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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
@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 🙂