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.



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 :

IBLUR

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 :

IBLUR
(Letakkan pointer mouse di atas kotak / box diatas )





Credit : simurai




Semoga bermanfaat


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




Visit Wahyudi Blog !

6 komentar:

  1. sedikit mirip menggunakan
    a:hover
    a:visited

    jangan lupa datang ke tempat saya. komen + follow saya tunggu. & akan saya balas.

    www.ch4ndr4.com

    BalasHapus
  2. mantap gan,mohon bimbingannya gan

    BalasHapus
  3. 106
    kok bisa gitu ya gan ??

    BalasHapus
  4. mohon bimbingannya gan,saya baru belajar nih,ternyata susah juga,apa otak saya yang ga sampai ya hehehehe

    BalasHapus

Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...

Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^

Artikel Unggulan

Panduan Makan Sehat bagi Generasi Z: Tips Mudah untuk Menjaga Energi dan Kesehatan

Menjaga Kesehatan dan Energi saat Berlatih: Nutrisi Penting untuk Atlet Generasi Z Gaya hidup aktif dan olahraga merupakan hal yang sangat p...

Paling Populer dalam Sebulan