Membuat Logo Google Dengan CSS

Kali ini D-G Blog akan mengepost cara membuat logo google dengan CSS. Sebenarnya ini hanya css dasar, yaitu dengan membuat spesifikasi dari masing masing huruf dari GOOGLE tersebut. Namun sepertinya masih ada kelemahan karena saya belum terlalu bisa CSS. Hanya saran, logo ini akan bertabrakan kodenya dengan background. Bagi yang belum tau apa itu HTML bertabrakan klik disini

CSS tersebut akan berfungsi seperti gambar diatas, yang paling atas adalah dalam keadaan normal dan gambar kedua adalah gambar ketika di blok.

Cara membuatnya adalah tinggal mengcopy code ini

<style>
@-moz-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-webkit-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-o-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-ms-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
 body{
    font-family: Catull,Sans-Serif;
    background: #f1f1f1;
}
#davidkeren{
    margin:200px auto;
    width:600px;
    height:200px;
    text-align:center;
    font-size:100px;
    text-shadow:0px 3px 3px rgba(0,0,0,0.25);
    filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3);
}

.G{
    color:#0047F1;
}
.G::-moz-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-webkit-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-o-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-ms-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::selection{
    background-color:#0047F1;
    color:#DD172C;
}
.o1{
    color:#DD172C;
}
.o1::-moz-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-webkit-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-o-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-ms-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o2{
    color:#F9A600;
}
.o2::-moz-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-o-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-ms-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-webkit-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::selection{
    background-color:#F9A600;
    color:#0047F1;
}
.g{
    color:#0047F1;
}
.g::-moz-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-o-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-ms-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-webkit-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::selection{
    background-color:#0047F1;
    color:#00930E;
}
.l{
    color:#00930E;
}
.l::-moz-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-o-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-webkit-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-ms-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::selection{
    background-color:#00930E;
    color:#E61B31;
}
.e{
    color:#E61B31;
}
.e::-moz-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-webkit-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-o-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-ms-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::selection{
    background-color:#E61B31;
    color:#0047F1;
}

@font-face{
font-family:Catull;
src: url(font/catull.ttf);
font-weight:400;
}

html body{
font-family:Catull,Sans-Serif;
background: #f1f1f1;
}


#davidkeren{
margin:200px auto;
width:600px; width 600px
height:200px; height 200px
text-align:center;
font-size:100px; text size 100px
text-shadow:0px 3px 3px rgba(0,0,0,0.25);
}

.G{
color:#0047F1;
}

.G::selection{
background-color:#0047F1; background color
color:#DD172C; letter color
}
</style>

Kode tersebut dapat diletakan di posting, dengan cara

---

1. Meletakannya dibagian HTML bukan compose

---

2. Cukup Pastekan

---

3. Jika ingin mengaktifkan kode tersebut langsung saja pastekan kode berikut:

---

<div id="davidkeren"><a class="G">G</a><a class="o1">o</a><a class="o2">o</a><a class="g">g</a><a class="l">l</a><a class="e">e</a></div>

Tetapi jika anda ingin meletakannya di bagian postingan atau tata letak namun anda ingin menggunakannya terus, maka caranya
1. Buka template

---

2. Edit HTML

---

3. Pastekan kode yang didalam scrool keatas ]]></b:skin>

---

4. Dan jika ingin diletakan tata letak anda tinggal mempastekan kode

---

<div id="davidkeren"><a class="G">G</a><a class="o1">o</a><a class="o2">o</a><a class="g">g</a><a class="l">l</a><a class="e">e</a></div> 

Dan apabila anda ingin memasang logo tersebut di tempat lain anda tinggal mempastekan kode pada nomor  4 saja tidak perlu yang didalam scrool lagi
Jika kalian ingin mengeditnya menjadi nama anda itu bisa anda tinggal membaca css tersebut dan mengubah hurufnya saja.

---

Sekian dari D-G Blog
Terima kasih