Tutorial ini merupakan bagian kedua dari tutorial membuat 15 efek social media button. Untuk persiapan, penggunaan icon, dan file css awal, sudah kita bahas pada bagian pertama: .Contoh tampilan semua efek:
Jika ingin langung ke pembahasan efek tertentu, silakan di klik salah satu icon diatas, untuk efek 1 s.d 8, halaman akan diarahkan ke tutorial bagian I: 15 Efek Social Media Button Dengan CSS Part I
9. Efek 9: Membuat efek slide up pada background icon dengan cssTop
Ada tiga element utama yang kita gunakan pada efek ini, yaitu:
- Element
<a>yang berfungsi sebagai element utama dan menjadi background awal. - Pseudo element
:beforeyang hanya berisi icon, tanpa background. - Pseudo element
:afterdengan dimensi sama persis dengan element<a>dan memiliki background tersendiri yang nantinya akan menjadi background baru.
Pergeseran element tampak seperti berikut ini:
contoh untuk beberapa set icon:
Pada contoh diatas element dengan border berwarna merah adalah element <a>, sedangkan yang berwarna biru adalah element :before
Kode HTML yang diperlukan adalah:
<a class="youtube" href="#"></a>Sedangakan css rule nya:
.youtube {
background-color: #EAEAEA;
border-bottom: 5px solid #949494;
line-height: 60px;
height: 59px;
z-index: 1;
}
.youtube:before {
content: "f167";
}
.youtube:after {
background-color: #CF2200;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.youtube:hover{
border-color: #921800;
}
.youtube:hover:before{
color: #FFFFFF;
}
.youtube:hover:after{
top: 0;
}Penjelasan:
- Z-index pada baris 6 berfungsi sebagai dasar untuk z-index element children
- Baris 15 akan membuat element
:afterberada di bawah element<a>, dan baris 28 akan membuat element:afterbergeser ke atas menutupi element<a>
Perlu diperhatikan bahwa z-index harus kita definisikan dengan benar.
z-index pada element <a> harus lebih besar daripada :after sehingga icon akan tetap terlihat. Efek ini akan sulit di aplikasikan jika background yang kita gunakan berupa gambar.
10. Efek 10: Membuat efek slide up pada icon dengan cssTop
Efek kali ini akan membuat element icon bergeser keatas sehingga tulisan yang ada dibelakangnya akan terlihat. Element yang diperlukan untuk membuat efek ini adalah:
- Element
<a>yang berfungsi sebagai element utama dengan border bawah yang tebal. - Pseudo element
:beforeyang berisi teks terkait icon. - Pseudo element
:afteryang berisi icon, dengan dimensi sama persis dengan element<a>.
Transisi element tampak seperti contoh berikut:
contoh untuk penerapan beberapa set icon:
Pada contoh diatas, element dengan border warna hijau merupakan element :after sedangkan yang berwarna biru adalah element :before.
Html yang kita gunakan:
<a class="vimeo" href="#"></a>sedangkan css yang kita gunakan:
.vimeo {
border-bottom: 5px solid #4099FF;
color: #FFFFFF;
height: 59px;
line-height: 60px;
overflow: visible;
}
.vimeo:before,
.vimeo:after {
background-color: #85C6FD;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.vimeo:before
{
content: "Vimeo";
font-family: arial;
font-size: 10px;
line-height: 95px;
text-transform: uppercase;
}
.vimeo:after {
content: "f27d";
}
.vimeo:hover:after{
top: -15px;
}Penjelasan: baris 29 digunakan untuk menggeser element :after keatas ketika terjadi event :hover
11. Efek 11: membuat animasi ukuran icon dengan cssTop
Element yang diperlukan adalah:
- Element
<a>yang berfungsi sebagai container dengan background warna tertentu. - Pseudo element
:beforeyang berisi icon. - Pseudo element
:afteryang juga berisi icon.
Transisi element seperti tampak berikut ini:
Contoh untuk beberapa set icon:
Pada contoh diatas, element dengan border berwarna biru adalah element :before, sedangkan yang berwarna hijau adalah element after, dan yang berwarna merah adalah element <a>.
HTML yang diperlukan:
<a class="delicious" href="#"></a>sedangkan css rule nya:
.delicious {
line-height: 60px;
background-color: #EAEAEA;
}
.delicious:before {
content: "f1a5";
}
.delicious:after {
background-color: #3F92DC;
content: "f1a5";
color: #FFFFFF;
font-size: 0;
position: absolute;
top: 59px;
left: 0;
width: 100%;
height: 5px;
}
.delicious:hover:before{
font-size: 0;
}
.delicious:hover:after{
top: 0;
height: 100%;
font-size: 100%;
}Penjelasan:
- Baris 12 akan membuat dimensi awal icon pada element
:afterbernilai 0, baris 14 akan membuat element:afterberada dibawah, dan baris 17 akan membuat tinggi awal element:aftermenjadi 5px. - Ketika terjadi event :hover, line 20 akan membuat dimensi icon pada element :befor menjadi 0, sedangkan baris 24 akan membuat tinggi element
:aftermenjadi sama dengan element<a>dan baris 25 akan membuat icon pada element:aftermenjadi besar.
12. Efek 12: Membuat efek 3D flip dengan cssTop
Efek ini akan membuat element baru muncul seolah olah berputar dari belakang. Untuk membuat efek ini kita memerlukan element:
- Element
<a>yang berfungsi sebagai container saja, secara visual tidak kelihatan. - Element
<span>yang berfungsi sebagai background. - Pseudo element span
:beforeyang berisi icon awal, tanpa background. - Pseudo element span
:afteryang berisi icon, dengan background warna tertentu.
Sebenarnya kita bisa membuat efek ini tanpa element <span> namun hasilnya tidak maksimal ketika di buka di browser IE s.d versi 11.
Hal ini disebabkan karena di IE, untuk membuat posisi element menjadi rapi, perlu container, untuk itu kita gunakan element <a> sebagai containernya, element efeknya nya menggunakan element <span> dan span:after.
Transisi element seperti tampak pada contoh berikut:
contoh untuk beberapa set icon:
Pada contoh diatas, element dengan border berwarna biru adalah element :before, yang berwarna merah adalah element <a> dan yang berwarna hijau adalah element :after.
Kode HTML yang diperlukan adalah:
<a class="pinterest" href="#"></a>sedangkan css rule nya:
.pinterest {
perspective: 800px;
overflow: visible;
}
.pinterest span {
display: block;
width: 100%;
height: 100%;
position: relative;
background-color: #EAEAEA;
transform-origin: 0 50%;
transform-style: preserve-3d;
box-shadow: inset 0 5px #AAAAAA;
}
.pinterest span:before,
.pinterest span:after {
content: "f231";
}
.pinterest span:after {
box-shadow: inset 0 5px #8E0F14;
background-color: #BE2026;
}
.pinterest span:after {
color: #FFFFFF;
position:absolute;
width: 100%;
height: 100%;
left:0;
top:0;
transform: rotateX(270deg);
transform-origin: 0 0;
transition: transform 0.6s;
}
.pinterest:hover span:after{
transform: rotateX(0);
}Penjelasan:
- Baris 2 digunakan untuk sudat pandang efek 3d, semakin kecil nilainya, semakin jelas efek 3D nya.
- Baris 11 dan 12 digunakan sebagai sudut/sumbu putaran untuk element childrennya (element
:after) dan agar efek yang dihasilkan berupa 3D. - Baris 30 digunakan untuk mementukan posisi awal dari element
:after, yaitu 270 ° searah jarum jam, dan baris 31 untuk menentukan sumbu putar element:after. - Ketika terjadi event :hover, baris 35 akan membuat element
:afterberputar kedepan hingga mencapai posisi 0 °.
13. Efek 13: Membuat efek zoom in-out pada icon dengan cssTop
Untuk membuat efek ini, element yang kita perlukan adalah:
- Element
<a>yang berfungsi sebagai container dengan background warna tertentu. - Pseudo element
:beforeyang hanya berisi icon, tanpa background. - Pseudo element
:afteryang juga berisi icon, namun tanpa background.
Transisi element seperti tampak pada contoh berikut:
contoh untuk beberapa set icon :
Pada contoh diatas element dengan border berwarna merah adalah element <a>, sedangkan yang berwarna biru adalah element :before dan yang berwarna hijau (muncul ketika terjadi :hover) adalah element :after.
Kode HTML yang diperlukan adalah:
<a class="github" href="#"></a>sedangkan css rulenya:
.github {
background: #757575;
}
.github:after {
color: #ECFF82;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: rotate(15deg) scale(1.5);
}
.github:after{
color: #84FF82;
}
.github:before,
.github:after {
content: "f113";
}
.github:hover:after {
transform: rotate(0) scale(1.0);
opacity: 1;
}Penjelasan:
- Baris 11 akan membuat element
:afterinvisible (tidak tampak) dan baris 12 akan membuat posisi awal dimensi element:afterlebih besar 1,5x dari ukuran sebenarnya dan berputar 15 ° - Ketika terjadi event :hover baris 22 akan membuat dimensi element
:aftermengecil menjadi ukuran sebenarnya dan berputar ke posisi 0 °, sedangkan baris 23 akan membuat element:aftermenjadi kelihatan (visible).
14. Efek 14: Membuat efek background lingkaran mengecil dengan cssTop
Untuk membuat efek ini, element yang kita perlukan adalah:
- Element
<a>dengan bentuk lingkaran yang berfungsi sebagai container dengan background warna tertentu. - Pseudo element
:beforeyang hanya berisi icon, tanpa background. - Pseudo element
:afteryang berfungsi sebagai background baru dengan warna tertentu (tanpa icon).
Transisi element seperti contoh berikut:
sedangkan contoh untuk beberapa set icon:
Pada contoh diatas, element dengan border warna merah adalah element <a>, yang berwarna biru adalah element :before, dan yang berwarna merah adalah element :after.
Kode HTML yang diperlukan adalah:
<a class="dropbox" href="#"></a>sedangkan css rulenya adalah:
.dropbox {
background-color: #EAEAEA;
border-radius: 32px;
font-size: 35px;
line-height: 65px;
z-index: 1;
overflow: visible;
}
.dropbox:after {
content: '';
background-color: #0089D1;
border-radius: 32px;
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(1.3);
opacity: 0;
z-index: -1;
}
.dropbox:before {
content: "f16b";
}
.dropbox:hover:after {
transform: scale(1.0);
opacity: 1;
}
.dropbox:hover:before {
color: #FFFFFF;
}
.dropbox:hover {
box-shadow: 0 0 0 7px rgba(0, 137, 209, 0.25);
}Penjelasan:
- Baris 3 dan 12 masing-masing akan membuat element
<a>dan:aftermenjadi lingkaran. Angka 32px merupakan setengah dari lebar element<a>yaitu 64px (telah didefinisikan di awal) - Baris 18 akan membuat element
:afterlebih besar 1.3x dari element<a>. - Ketika terjadi event :hover, baris 26 akan membuat dimensi element
:aftermenjadi sama dengan element<a>dan baris 27 akan membuatnya berangsur-angsur kelihatan (visible), sedangkan baris 33 akan membuat element<a>memiliki shadow.
15. Efek 15: Membuat efek background lingkaran membesar dengan cssTop
Sama seperti efek sebelumnya, efek ini akan memunculkan element baru yang seolah olah menjadi background baru. Untuk membuat efek ini, element yang diperlukan adalah:
- Element
<a>yang berfungsi sebagai container dengan background warna tertentu. - Pseudo element
:beforeyang berisi icon. - Pseudo element
:afterdengan background warna tertentu, tanpa icon.
Pertama-tama, element <a> dan :after kita bentuk menjadi lingkaran, untuk element :after, kita buat dimensinya menjadi 0, dan kita letakkan posisinya berada di tengah.
Ketika terjadi event :hover, element :after berangsur-angsur muncul dan membesar hingga 100%, selain itu juga muncul shadow pada element <a>.
Transisi element seperti tampak pada contoh berikut:
contoh untuk beberapa set icon:
Pada contoh diatas element dengan border warna biru adalah element :before, yang berwarna merah adalah element <a> dan yang berwarna hijau adalah element :after.
Kode HTML yang diperlukan adalah:
<a class="linkedin" href="#"></a>sedangkan css rulenya:
.linkedin {
background-color: #EAEAEA;
border-radius: 32px;
font-size: 35px;
line-height: 65px;
z-index: 1;
}
.linkedin:before {
content: "f0e1";
}
.linkedin:after {
background-color: #4698BD;
border-radius: 32px;
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
z-index: -1;
}
.linkedin:hover {
box-shadow: 0 0 0 7px rgba(58, 136, 171, 0.15);
}
.linkedin:hover:before {
color: #FFFFFF;
}
.linkedin:hover:after {
width: 100%;
height: 100%;
top: 0;
left: 0;
}Penjelasan:
- z-index pada baris 6 ditujukan agar children yaitu
:afterdapat menggunakan z-index, baris 20 akan membuat element:afterberada di belakang element:before, sehingga ketika terjadi event :hover, icon pada element:beforemasih tetap kelihatan. - Baris 3 dan 13 (border-radius: 32px) akan membuat element
<a>ada:aftermenjadi berbentuk lingkaran, angka 32 merupakan setengah dari lebar element<a>yaitu 64. - Baris 16 dan 17 akan membuat element
:afterberada di tengah-tengah tepat diatas element<a>. Baris 18 dan 19 membuat dimensi element:aftermenjadi 0. - Ketika terjadi event hover, baris 23 akan membuat shadow pada element
<a>yang seolah olah seperti border transparan, baris 26 akan membuat icon menjadi putih, dan baris 29 s.d 32 akan membuat dimensi element:afterberangsur-angsur menjadi besar.
Kesimpulan
Pada bagian kedua ini kita bahas berbagai efek transisi seperti zoom in-out, fade, flip, dll.
Sobat dapat bereksperimen dengan mengubah nilai yang ada sehingga sesuai dengan yang dibutuhkan.
Tutorial ini hanya sebagai bahan ide atau referensi saja, dengan berbagai eksperimen dan ide kreativitas, sobat dapat membuat berbagai efek animasi yang menarik yang tidak terbatas.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
4 Feedback dari pembaca
Bagus mas, lengkap banget pembahasannya jadi mau makin berkunjung website ini untuk belajar.
Terima kasih mas, selamat belajar
nanya mas saya coba diserver tidak berfungsi mas
Cob dicek stylesheet nya jalan ngga mas?