Berjumpa kembali bersama saya Hernowo di artikel tips dan trik Dumet School, kemarin kita sudah membahas beberapa fungsi – fungsi CSS, Jquery, Javascript, Plugins Jquery dll. Dan pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Membuat Icon Effect Dengan CSS,dimana sebuat icon yang ada pada font awesome kemudian kita berikan style css nya sehingga menjadi sangat menarik terlihat ada animasi seperti fungsi yang ada pada Jquery atau Javascrip tetapi ini murni menggunakan style css saja. Berikut ini adalah screen shoot yang nanti kita akan buat
Begitu cursor di arahkan pada icon maka akan di hover, akan muncul dari belakang icon seperti kita membalikkan kalender.
Langsung saja kita buat, teman – teman siapkan text editornya dan download terlebih dahulu font awesome nya atau bisa klik link ini untuk mendownload, kemudian extract di dalam satu folder maka akan menghasilkan file seperti gambar di bawah ini
Selanjutnya copy script html nya di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <meta charset="utf-8" /> <title>Cara Membuat Icon Effect Dengan CSS</title> <style type="text/css"> Â Â Â Â Â Â .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; Â Â Â Â Â Â } Â Â Â Â Â Â .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 1s; Â Â Â Â Â Â } Â Â Â Â Â Â .pinterest:hover span:after{ Â Â Â Â Â Â Â Â Â transform: rotateX(0); Â Â Â Â Â Â } Â Â Â </style> </head> <body style="margin: 5em;"> <a class="pinterest" href="https://www.pinterest.com/"><span></span></a> <a class="pinterest" href="https://www.pinterest.com/"><span></span></a> <a class="pinterest" href="https://www.pinterest.com/"><span></span></a> <a class="pinterest" href="https://www.pinterest.com/"><span></span></a> </body> </html> |
Dan pastekan pada text editornya lalu save dengan index.html, kemudian kita implementasikan Cara Membuat Icon Effect Dengan CSS teman – teman berikan script css nya untuk memanggil font awesome nya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@font-face { font-family: 'icomoon'; src:url('../icon_fonts/icomoon/icomoon.eot?w6aef1'); src:url('../icon_fonts/icomoon/icomoon.eot?w6aef1#iefix') format('embedded-opentype'), url('../icon_fonts/icomoon/icomoon.ttf?w6aef1') format('truetype'), url('../icon_fonts/icomoon/icomoon.woff?w6aef1') format('woff'), url('icon_fonts/icomoon/icomoon.svg?w6aef1#icomoon') format('svg'); font-weight: normal; font-style: normal; } a { font-family: icomoon; font-size: 40px; line-height: 65px; speak: none; color: #5D5D5D; text-decoration: none; text-align: center; display: inline-block; position: relative; width: 64px; height: 64px; overflow: hidden; transition: all .3s; } a:before, a:after { transition: all .3s; } |
Save dengan nama effect.css, kemudian panggil link nya di dalam tag <head>
Jika sudah save dan jalankan pada browser nya, maka hasilnya akan sama seperti yang saya jelaskan di awal tadi.
Mudah sekali bukan,,??
Baik, sekian dulu pada artikel kali ini tentang Cara Membuat Icon Effect Dengan CSS. Kita jumpa lagi pada artikel berikutnya, semoga bermanfaat dan sampai jumpa.
Terima Kasih.