Belajar (Cascading Style Sheets) CSS3 - Membuat efek Hover lebih halus pada Website

Ilmu website saat ini semakin berkembang dan salah satunya style CSS (Cascading Style Sheet) yang digunakan juga semakin berkembang. Teknologi CSS saat ini sudah sampai CSS3. Kode-kode barupun dalam perkembanganya saat ini sudah banyak perubahan.
Disini saya hanya sharing simple tapi mungkin  dapat menambah referensi bagi pembaca kususnya yang belajar tentang CSS3.
Disini saya anggap pembaca sudah paham penerapan dan pemasangan kode-kode CSS dan HTML.

Oke langsung saja,saya akan memerikan penjelasan tentang membuat suatu link jika disorot atau efek hover dapa terkesan lebih halus.
Sebagai contoh dapat lilihat pada link http://perpustakaan.sman8yogya.sch.id . Nah coba buka web tersebut dan sorot pada link judul berita terbaru atau serba-serbi terbaru. Jika disorot maka link hover yang berwarna merah terkesan halus.
Bagaimana caranya?

Caranya adalah pada kode style.css silakan menambahkan kode seperti berikut pada class atau id hover CSSnya. Masih bingung? kita langsung penerapan.
Samplenya sebagai berikut,

#contoh-box-link{
border:1px solid #ddd;
background:#ccc;
}

#contoh-box-link:hover{
background:#E63011;
border:1px solid #ddd;
font-color: #ffffff;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
} 

 Nah kemudian pada kode sintag HTML anda adalah seperti biasa,

<div id='contoh-box-link'> Ini contoh membuat evek hover CSS3 lebih halus </div>

Jreng jreng,,sialakan tes pada browser masing-masing. Arahkan mouse pada tulisan anda tadi. Dan efeknya akan lebih halus.
Sebenarnya pengaruhnya adalah pada kode berikut.

        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;

Anda dapat menempelkan juga kode tersebut pada tag link,atau semua skrip CSS yang terdapat fungsi hovernya.

Salam..

Lokasi:

Berbagi :