Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Jumat, 22 Januari 2016

Membuat Icon Social Bookmark dengan CSS

Diposting oleh
di
CSS . css social bookmark . CSS3 . icon . icon css . icon social bookmark . membuat css
0 Komentar
Membuat Icon Social Bookmark dengan CSS - Jika kita membuat sebuah karakter atau tampilan dari sesuatu dengan menggunakan CSS maka diperlukan beberapa kode untuk membuatnya. Sama seperti dengan membuat icon atau simbol, tapi kenapa harus menggunakan kode CSS? Bukankah sekarang sudah ada font Awesome yang disediakan oleh Astraunotweb yang ditulis ulang oleh Kang Ismet di blognya?

Membuat Icon Social Bookmark dengan CSS

Jika penggunaannya dibandingkan dengan font awesome, memang lebih baik font awesome karena tidak terlalu menggunakan banyak kode CSS, namun tidak ada salahnya juga jika kita menggunakan kode CSS dalam menampilkan icon atau simbol seperti yang terlihat pada tampilan icon sosial bookmark berikut ini

Icon Google+, Facebok dan Twitter berikut ini menggunakan kode CSS bukan menggunakan gambar :)


Salin Kode CSS Berikut Kedalam Template Blog:
.googleplus {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #2C2C2C;
display: block;
border-radius: 0.3em;
overflow: hidden;
}
.googleplus::before {
left: -0.1em;
font-size: 2.9em;
top: -0.36em;
position: absolute;
display: block;
content: "g";
color: #EDEEE8;
font-family: georgia;
}
.googleplus::after {
left: 0.9em;
top: -0.3em;
position: absolute;
display: block;
content: "+";
font-size: 1.25em;
font-weight: bold;
color: #EDEEE8;
font-family: georgia;
}

Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog:
<div class="googleplus"></div>
Salin Kode CSS Berikut Kedalam Template Blog:
.facebook {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #3b5998;
display: block;
border-radius: 0.3em;
}
.facebook::before {
left: 0.85em;
top: 0.7em;
position: absolute;
display: block;
content: "";
height: 0.3em;
width: 0.85em;
background: #EDEEE8;
}
.facebook::after {
left: 1.1em;
top: 0.1em;
position: absolute;
display: block;
content: "";
height: 1.5em;
width: 0.3em;
border-radius: 0.4em 0 0 0;
border: 0.3em solid #EDEEE8;
border-right: 0;
border-bottom: 0;
}

Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog:
<div class="facebook"></div>
Salin Kode CSS Berikut Kedalam Template Blog:
.twitter {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #0084B4;
display: block;
border-radius: 0.3em;
}
.twitter::before {
left: 0.55em;
top: 0.4em;
position: absolute;
display: block;
content: "";
height: 1.2em;
width: 0.32em;
background: #94C5FF;
border-radius: 0.5em 0.5em 0 0.9em;
box-shadow: 0 0 0 0.15em #EDEEE8;
}
.twitter::after {
left: 0.87em;
top: 1.143333em;
position: absolute;
display: block;
content: "";height: 0.32em;
width: 0.62em;
background: #94C5FF;
border-radius: 0 0.4em 0.4em 0;
box-shadow: 0 -0.57em 0 -0.15em #94C5FF,-0.2em -0.57em 0 -0.15em #94C5FF,0 -0.57em 0 0em #EDEEE8;
border: 0.15em solid #EDEEE8;
border-left: 0;
}

Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog:
<div class="twitter"></div>

Bagaimana? Tertarik untuk menggunakan icon sosial bookmark dengan CSS diatas? Silahkan, kode CSS dan HTML untuk social bookmark diatas sudah berada didalamnya dengan cara sorot icon CSS untuk menampilkan kodenya :)

Untuk kode icon dengan CSS yang lainnya serta sumber artikel ini bisa dipelajari di Kumpulan Icon dan Simbol dengan CSS




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

Konversi Kode di Sini! OOT (Out of Topic)
TOP