Kamis, 23 Januari 2014

Membuat Icon Social Bookmark dengan CSS

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

Membuat Icon Social Bookmark dengan CSS Rating: 4.5 Diposkan Oleh: ana sriwahyuni

6 komentar:

  1. wah mantab banget deh makasih untuk sharingnya mbak

    BalasHapus
  2. kelihatan 3d nya kalau dipoles dengan css ya mbk
    makasih sherenya mbk..

    BalasHapus
    Balasan
    1. iya mas, silahkan ditambahi sendiri ya.. :)
      makasih..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia