I♥BLUR Pure CSS3 Animation

Setelah tadi menulis tentang bagaimana cara membuat BonBon, Sweet CSS3 (Candy) Buttons, sekarang aku ingin menulis tentang tulisan/text dengan efek "blur" (animasi) menggunakan CSS.

Seperti yang kita tahu, dalam pembuatan text yang "Blur" menggunakan CSS pada umumnya kita menggunakan text-shadows seperti yang dilakukan oleh David disini. Namun dalam contoh yang dibuat oleh david tersebut terlalu banyak "glow" atau terlalu terang. Nah, disini kita akan mencoba membuat seperti itu namun kita akan menggunakan efek asap. Kita akan menggunakan color: transparent; sehingga kita bisa menghasilkan text dengan efek "asap" sungguhan. apalagi ditambah dengan sedikit animasi, pasti lebih mantap.

Demo Page

Cara ini aku dapat dari lab.simurai.com/css/iloveblur Namun efek blur ini baru dapat berjalan dengan baik menggunakan browser chrome. Browser lainnya yang mampu menampilkannya adalah firefox sedangkan browser yang lainnya belum saya coba kecuali untuk browser opera masih tidak dapat menampilkan fitur ini.

Oke, langsung aja kita mencoba untuk memasangnya...

Yang pertama adalah bagaimana cara kita untuk menuliskan tag pemanggilannya.
Tag pemanggilan (html) yang di pakai adalah :

<div id="kotak"> <span class="txt">I</span><span class="heart">♥</span><span class="txt" contenteditable="true">BLUR</span> </div>

Nah, jadi dalam membuat efek blur seperti pada demo tadi, kita sama sekali tidak menggunakan image/gambar. Selanjutnya adalah membuat kotak / wadah untuk tulisan tadi untuk kita menempatkan animasinya :

#kotak { background: #000000; padding: 80px 100px; text-align: center; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3); width: 500px; -webkit-border-radius: 20px; font-size: 5em; font-weight: bold; margin: 80px auto 20px; }

dan kita akan mendapatkan seperti ini :

I♥BLUR

Disitu tulisan masih berwarna hitam. Nah, selanjutnya adalah pemberian warna di tulisan tersebut.

.txt { color: transparent; text-shadow: #fff 0 0 100px; } .heart { margin: 0 10px; color: transparent; text-shadow: red 0 0 8px; }

Jadi sampai langkah ini, inilah yang kita dapatkan :

I♥BLUR

Langkah selanjutnya adalah pemberian efek transisi dan animasi dengan CSS3 pada tulisan tadi :

.txt { -webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1); -moz-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1); } #kotak:hover .txt { text-shadow: #fff 0 0 5px; -webkit-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1); -moz-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1); } .heart { -webkit-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1); -webkit-animation-name: pulse-animation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes pulse-animation { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } #kotak:hover .heart { margin: 0 5px; text-shadow: red 0 0 100px; -webkit-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1); -moz-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1); } #kotak span:nth-child(3):focus { outline: none; }

Dengan demikian selesai sudah animasi dari "I♥BLUR" yang kita buat tadi. Jadi dengan pemanggilan menggunakan tag HTML berikut :

<div id="kotak"> <span class="txt">I</span><span class="heart">♥</span><span class="txt" contenteditable="true">BLUR</span> </div>

Beserta script CSS3 berikut ini :

#box { background: #000000; padding: 80px 100px; text-align: center; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3); width: 500px; -webkit-border-radius: 20px; font-size: 5em; font-weight: bold; margin: 80px auto 20px; } .txt { color: transparent; text-shadow: #fff 0 0 100px; -webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1); } #box:hover .txt { text-shadow: #fff 0 0 5px; -webkit-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1); } .heart { margin: 0 10px; color: transparent; text-shadow: red 0 0 8px; -webkit-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1); -webkit-animation-name: pulse-animation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes pulse-animation { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } #box:hover .heart { margin: 0 5px; text-shadow: red 0 0 100px; -webkit-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1); } #box span:nth-child(3):focus { outline: none; }

Maka kita akan mendapatkan "I♥BLUR" yang kita buat tadi seperti berikut :

I♥BLUR

(Letakkan pointer mouse di atas kotak / box diatas )

Credit : simurai

Semoga bermanfaat


*.:｡✿ Don't forget to come back again ✿.｡.:*

Visit Wahyudi Blog !