Logo Facebook Dengan CSS3

Baca Juga

Bismillah.. pada kesempatan ini saya akan share cara membuat logo Facebook dengan menggunakan CSS3, semakin berkembangnya dunia CSS dan Web Browser maka sekarang untuk menempelkan sebuah logo social networking atau logo apa saja di dalam suatu web tidak perlu lagi menggunakan media gambar, sekarang sobat tinggal berkreasi dan membuat logo sendiri dengan menggunakan CSS3.

Seperti cotoh di bawah ini logo Facebook yang tidak menggunakan media gambar, tapi dengan menggunakan Script CSS3, untuk membuat logo Facebook dengan memanfaatkan script CSS, script ini hasil kreasi Nicolas Gallagher jika sobat ingin mengetahui lebih lanjut tentang script Icon Social Media silahkan sobat kunjungi situsnya di alamat http://nicolasgallagher.com/, sebagai contoh saya ambil tampilan icon facebook secriptnya seperti di bwah ini.

<style>
.facebook a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:34px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:64px;
    line-height:66px;
    color:#fff;
    background:#3c5a98;
    /* css3 */
    /* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
ul li a:hover,
 ul li a:focus,
 ul li a:active {
    opacity:0.8;
    border-color:#000;
    }
ul {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    font:0.875em/1 Arial, sans-serif;
}
ul li {
    float:left;
    width:66px;
    height:66px;
    margin:20px 20px 0 0;
}
ul li a {
    display:block;
    width:64px;
    height:64px;
    overflow:hidden;
    border:1px solid transparent;
    line-height:64px;
    text-decoration:none;
    /* css3 */
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px; /* standards version last */
}
</style>

Terus di dalam tag body sobat masukan tag di bawah ini

<div class="content">
<ul>
<li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
</ul>
</div>

Terus sobat lihat hasilnya, insya allah jika web browser sobat sudah support dengan CSS3 hasilnya akan seperti di bawah ini.

 

Sampai disini dulu info tentang Logo Facebook menggunakan script CSS, semoga bermanfaat, Good Luck Happy Blogging .