Headline

Buat sobat blogger yang menjumpai komentar kasar dan mengatasnamakan OzieCyber, silahkan baca dan laporkan disini.
Unduh Adobe Flash player

close

~Affiliates~

 

Bantu saya vote +1 pada tombol google plus di bawah!!

×

flang counter

free counters

Logo Facebook Dengan CSS3

Bismillah..xD 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,

Related Post :

Comments
0 Comments


0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:

Berikan Tanggapan mengenai Artikel Di Atas :

Berkomentar Lah Dengan Sopan :

=> Hahahaha ...xD
=> Blog Ini bebas Mau Berkata Apa Asal Sopan ...Azzzz
=> #Peace ALL

Terima Kasih Sudah Berkomentar .. !!

-----
pin 284A465C Gunakan Browser Google Chrome Versi Terbaru, Agar Tampilan Blog Ini Maksimal.