 |
| Cara Membuat Judul Bergaya di Blogger |
Berikut Cara Membuat Judul Bergaya Dengan CSS
Anda dapat melihat di berbagai efek blog yang menarik pada beberapa link. Sebagian besar , ketika Anda membawanya ke blog anda yang berupa link perubahan, sesuatu perubahan itu dalam gaya: itu baik akan berubah warna atau latar belakang atau akan menjadi unggulan di blog anda. Bagaimana efek keren ini yang terdiri dalam transisi bertahap dari satu gaya ke yang lain, seperti yang Anda lihat di demo bawah ini:
Mau seperti ini
Jebret!
Transisi ini didapat dengan menggunakan properti transisi CSS3 - properti yang didukung di semua browser utama seperti Chrome, Firefox, Opera, Safari (untuk Safari kita akan membutuhkan awalan -webkit- untuk mendapatkan efek ini).
Lankah -langkah Transisi CSS
Langkah-langkah transisi mendukung tiga nilai:
- Properti dipengaruhi oleh transisi, seperti warna, border, background, lebar, dll.
- Durasi transisi ini dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk mengubah gayanya.
- Waktu tunda untuk transisi akan diseleksi juga dalam detik, yaitu, berapa lama waktu yang dibutuhkan untuk transisi untuk memulai ketika kursor mouse di berada di peralihan tersebut .
Lihat kode di bawah ini:
- Properti dipengaruhi oleh transisi, seperti warna, border, background, lebar, dll.
- Durasi transisi ini dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk mengubah gayanya.
- Waktu tunda untuk transisi akan diseleksi juga dalam detik, yaitu, berapa lama waktu yang dibutuhkan untuk transisi untuk memulai ketika kursor mouse di berada di peralihan tersebut .
Lihat kode di bawah ini:
.example {
transition-property: width; /* property that undergoes a transition */
transition-duration: 2s; /* duration of the transition */
transition-timing-function: linear; /* timing-function */
transition-delay: 0; /* length of time to delay the start of a transition */
/* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0;
}
Dalam contoh di atas, HTML itu yang membuat transisi tersebut. Contoh akan menjadi lebar dalam waktu dua detik mouse melewati mereka.
Ketika kita mendefinisikan gaya link, biasanya kita perlu menggunakan sebuah: pemilih Link, dan ketika mendefinisikan gaya ketika kursor mouse di atas transisi, kita perlu menggunakan : (Judul). Namun, transisi dapat digunakan dalam setiap elemen HTML, bukan hanya link.
Untuk membuat efek transisi agar bekerja dengan baik, kita harus mendefinisikan dua blok dari gaya untuk elemen itu, yaitu gaya normal untuk tag / id / kelas dan gaya pada mouse: JEBRET (Judulnya) untuk tag / id / kelas khusus.
Sebagai contoh:
tag, #id, .class {
/* insert here the styles that you want for the selector */
/* insert below the transition effects */
}
tag:jebret, #id:jebret, class:jebret {
/* Insert here the styles for when the mouse is over the element */
/* here it is not necessary to repeat the declaration of the transition */
}
Anda dapat menambahkan gaya yang sama di beberapa penyeleksi dan dipisahkan dengan koma seperti yang saya lakukan di atas, walaupun itu tidak diperlukan.
Berikut adalah beberapa contoh transisi dengan masing-masing kode.
Saya tidak akan menggunakan transisi-waktu-fungsi dalam contoh ini karena tidak ada bedanya, karena nilai pertama adalah durasi dalam detik dan yang kedua adalah penundaan.
Contoh 1
Mau Seperti Ini
Tambahkan kode dibawah ini
/* with a single property */
#example1 {
background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}
Contoh 2
Atau Mau Seperti Ini
Masukkan kode dibawah ini jika mau seperti ini
/* with four properties and delay */
#example2 {
background-color: #9c3;
border: 8px solid #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}
Contoh 3
Atau Yang Ini
Tambahkan kode dibawah ini jika mau seperti ini
/* with seven properties and delay */
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}
Contoh 4
Ini Yang Terakhir
Tambahkan kode dibawah ini jika mau seperti ini
/* with all the properties simultaneously */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}
Akhir kata:
- Tambahkan kode diatas (CSS) letakkan diatas ]] </ b: skin>
- Seperti yang Anda lihat pada contoh di atas, Anda dapat menetapkan aturan yang berbeda untuk transisi dari unsur-unsur yang berbeda dalam satu aturan - hanya pisahkan dengan koma.
- Itu tidak wajib untuk menggunakan empat sifat dalam deklarasi transisi, tapi pesanan mereka harus selalu terlihat seperti ini: properti / durasi / waktu-fungsi / delay.
- Durasi dan keterlambatan nilai harus dinyatakan dalam detik, tapi kadang-kadang kedua adalah waktu yang lama untuk transisi. Dalam hal ini Anda dapat menggunakan nilai-nilai dengan milidetik, misalnya, .5s berarti setengah detik.
- Dalam interval waktu kecil, waktu properti transisi-fungsi tersebut tidak memberikan efek yang luar biasa yang paling berguna hanya dalam animasi . Nilai yang mungkin baik meringankan (default, yang membuat transisi dengan awal yang lambat, maka akan lebih cepat dan berakhir perlahan), linear (kecepatan transisi yang sama dari awal sampai akhir), kemudahan dalam (transisi dimulai perlahan dan kemudian kecepatan meningkat), kemudahan-luar (transisi dimulai cepat dan melambat di akhir) dan kemudahan-dalam-luar.
Itu dia!, nikmatilah keindahan dari Transisi CSS Untuk Judul Bergaya di Blog Anda.
Saya tunggu anda di komentar :)
