Membuat Text Shadow dengan Css

Theme wordpress boleh biasa-biasa saja, tapi polesan css akan membuatnya tampil beda. Seperti blog ini, yang menggunakan theme gratisan dari Inove. Tampilan standarnya as is seperti yang dibuat oleh publishernya. Tapi sentuhan yang saya berikan, memberikan nuansa lain.
Langkah 1 dan 2.
Pada browser firefox, klik kanan bagian yang ingin dipoles, dalam contoh ini saya akan memoles judul artikel. Maka, pada judul artikel saya klik kanan, pilih Inspect Element (Q), maka window akan split (terbagi dua).

Langkah 3.
Setelah split, lihat sebelah kanan bawah, kode css judul akan point ke css mana, dalam contoh ini dia akan point ke ".post h2",


Ingat, ".post h2" hanya contoh karena menggunakan theme inove, kode css judul anda harus cari di css theme yang aktif.

Langkah 4.
Masuk ke Dashboard > Appeareance > Editor

maka, cari kode ".post h2" (sekali lagi, kode ini hanya contoh sesuai theme blog ini)
maka, ketemu kode css ini:

.post h2 {
 display:block;
 margin-top:10px;
 border-bottom:5px solid #ff0000;
 padding:0 5px 3px;
 font-size:46px;
 font-family:Verdana,"BitStream vera Sans";
}

 Langkah 5.
setelah kode

font-family:Verdana,"BitStream vera Sans";

tekan enter ( sebelum tanda kurung kurawal "}" )
lalu pastekan kode yang akan dipakai percantik, dalam kasus ini saya pakai kode text shadow;

text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

sehingga, kode akhirnya jadi sepeti ini:

.post h2 {
 display:block;
 margin-top:10px;
 border-bottom:5px solid #ff0000;
 padding:0 5px 3px;
 font-size:46px;
 font-family:Verdana,"BitStream vera Sans";

text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Hasil akhir,


Coba juga edit css dengan kode unik berikut, klik di sini

Share on Facebook Share on Twitter Share on Google Plus

About JackSparrow

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.