Membuat Text-Shadow Ciptakan Efek 3 Dimensi: Panduan BloGGeR Kode CSS

Text-Shadow
Teks dengan Efek Bayangan

Panduan cara membuat efek bayangan pada teks atau text-shadow merupakan satu Panduan BloGGeR dan Tutorial BloGGeR tentang Kode CSS yang sangat  diperlukan untuk membangun berbagai kreatifitas cantik dengan sedikit kode tetapi mampu memberi penampilan terkini. Pemanfaatan efek bayangan pada teks kode css text-shadow sungguh memberi gaya tersendiri yang hingga saat ini amat jarang di manfaatkan para blogger. Ide untuk memposting teknik membuat text-shadow ini hanya disebabkan "Parmin si gigi tongos" teman blogger ku yang minta supaya dibuatkan "epek" bayangan di blognya.

Ya ..., semua ini gara-gara si Parmin yang kemarin nyerocos minta tolong supaya dibuatkan cara membuat teks yang ada bayangannya. Bagus, katanya! "Wah...., seandainya aku mau nikah, undangannya mau aku buat epek bayang-bayang", kata si Parmin sambil matanya menerawang ke arah rembulan yang terbungkus segumpal mega, "biar pada tahu kalau Parmin nggak kampung amat", mulutnya merenges sambil di sorongkan ke muka ku hingga gigi tongosnya tepat di depan mata. "Kurang Asem...!!!", umpat ku sambil melempar muka ke samping. "Baunya itu, lho! Ampun !" Dan ... Si Parmin hanya tertawa he ... ha .... he ... he ... kaya' kalian sekarang! Ha ......

Contoh text-shadow atau efek bayangan pada teks :

Happy Blogging - This is Tex-shadow

Happy Blogging - This is Tex-shadow

» Happy Blogging «

Happy Blogging - This is Text-Shadow

Cara membuat Text-Shadow :

Ada dua kemungkinan dalam pembuatan text-shasow. Menggunakan kode html (xhtml) secara langsung, dan yang kedua dengan menggunakan paduan kode css dan html. Kode css disimpan di template di atas KODE ]]></b:skin>. kemudian untuk menampilkan text-shadow di posting atau widget kita gunakan xhtml.

Cara menggunakan KODE HTML (posting dan widget) :

<h3 style="font-family:staccato222 BT;line-height:1.2em;color:#01022c;font-weight: 700;text-shadow:#777 0.1em 0.1em 0.2em;padding:3px 10px; font-size:2em;">
Tuliskan Teks di sini !!
</h3>

<p style="text-align:center;font-family:staccato222 BT;line-height:1.2em;color:#0308e6;font-weight: 900;border-top: 1px solid #5c5d82;text-shadow:white 0.1em 0.1em 0.2em;padding:3px 10px; font-size:2em;margin-top: 20px;background: #16162b url(images/h.gif) no-repeat left 10px;background-position:left center;"><span style="border-bottom:1px solid #555;">Text-Shadow</span><br/> 
Tuliskan teks di sini !
</p>

<h2 style="float:left;text-align:center;background: #888;text-shadow:#fcd9db 0.1em 0.1em 0.2em; border-top:1px solid #eee;padding:4px 10px;font-family:Verdana;font-size:22px;color:black;">Tuliskan Teks di sini !!!
</h2>

Kode di atas hanya beberapa contoh penulisan dalam bentuk KODE HTML dan masih dapat dikembangkan lagi.

Cara Menggunakan Kode CSS:

Untuk menggunakan kode css sebagai pembentuk text-shadow, sampeyan harus menyimpannya di template :

1. Login dan pengamanan template : Caranya lihat
   di sini!


2. Syntax .post{ .... } : Cari syntax tersebut di template sampeyan. Bentuk syntaxnya kira-kira seperti ini (ku ambil dari Template Minima).



.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}


Letakkan KODE yang baru (di bawah ini) di sebelah bawahnya :


.post h1.sdbg {color:#000115;background:#666;text-shadow:#ebebfd 0.05em 0.05em 0.2em;border-top: 1px solid #eee;padding:2px 12px;}
.post h2.sdbg {font-size:130%;font-family:trebuchet ms;line-height:1.2em;color:#000117;
border-top:1px solid #888;background:#777;text-shadow: white 0.1em 0.1em 0.2em;padding:0 10px;}
.post h3.sd {color:#000;text-shadow: gray 0.1em 0.1em 0.2em;padding:0 6px;}

Cara Menuliskan di ruang posting :




<h1 class="sdbg">
Tuliskan Teks di sini !!!
</h1>

<h2 class="sdbg">
Tuliskan Teks di sini !!!
</h2>

<h3 class="sd">
Tuliskan Teks di sini !!!
</h3>



3. Jangan lupa KLIK Simpan Template


4. Kode HTML text-shadow di atas (yang digunakan untuk posting dan di widget) juga bisa di manfaatkan kode css-nya.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «