"Om Swastyastu"
Text Shadow
Sebelum postingan ini saya sebelumnya pernah share Cara Membuat Box Shadow dengan CSS kali ini saya akan share cara membuat text shadow dengan CSS3. Tapi sebelum mulai membaca lebih lanjut saya sarankan gunakan browser versi terbaru terlebih dahulu, karena tulisan saya kali ini hanya support browser terbaru (mozilla v. 4+, Opera v. 10+). :)Mungkin kalian sebelumnya dalam memprogram sebuah web menggunakan tool seperti photshop untuk membuat text shadow, tentunya loading web akan terasa lama jika menggunakan banyak image. Tapi setelah diluncurkannya CSS3 hal itu tidak akan terjadi lagi, karena pada CSS3 terdapat property untuk membuat text shadow. Cara membuat text shadow sangat gampang, berikut ini caranya :
Contoh multiple-shadow
<div style="font-size: 40px; padding: 15px 0; text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;">Contoh multiple-shadow</div>
Contoh neon-shadow
<div style="font-size: 40px; padding: 15px 0; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;">Contoh neon-shadow</div>
Contoh fuzzy-shadow
<div style="font-size: 40px; padding: 15px 0; text-shadow: 0.1em 0.1em 0.05em #333;">Contoh fuzzy-shadow</div>
Contoh bevel shadow
<div style="font-size: 40px; padding: 15px 0; text-shadow: 1px 1px white, -1px -1px #444;">Contoh bevel shadow</div>
Contoh shadow
<div style="font-size: 40px; padding: 15px 0; text-shadow: black 0.1em 0.1em 0.2em;">Contoh shadow</div>dan masih banyak lagi style-style yang lainnya, mungkin kalian bisa kembangkan sendiri dengan mengikuti beberapa aturan penulisan text shadow di bawah ini.
selector_or_taghtml:text-shadow:value1(spasi)value2;
selector_or_taghtml:text-shadow:value1(spasi)value2(spasi)value3;
selector_or_taghtml:text-shadow:value1(spasi)value2(spasi)value3(spasi)value4(color);keterangan:
- value1 untuk mengatur jarak bayangan kiri-kanan diisi dangan length
- value2 untuk mengatur jarak bayangan atas-bawah diisi dengan length
- value3 untuk mengatur keburaman diisi dengan length
- value4 untuk mengatur warna bayangan diisi dengan color atau hex_color
Diatas saya telah berikan beberapa contoh text-shadow, Selanjutnya buka editor kalian (dreamweaver, editplus, ataus notepad) buat file style.css, isi dengan script di bawah ini:
#contoh1{font-size: 40px; padding: 15px 0; text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
}
#contoh2{font-size: 40px; padding: 15px 0; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
#contoh3{padding:font-size: 40px; padding: 15px 0; text-shadow: 0.1em 0.1em 0.05em #333;
}
#contoh4{color: #7cedec; font-size: 40px; padding: 15px 0pt; text-shadow: 1px 1px white, -1px -1px #444;
}
#contoh5{color: #f3f3f3; font-size: 40px; padding: 15px 0pt; text-shadow: black 0.1em 0.1em 0.2em;
}
#contoh6{padding:15px 0;font-size:40px; text-shadow:2px 2px 2px red;
}
kemudian membuat file index.html, seperti di bawah:<html> <head> <title>css text-shadow</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <p id="contoh1">text-shadow dengan CSS3</p> <p id="contoh2">text-shadow dengan CSS3</p> <p id="contoh3">text-shadow dengan CSS3</p> <p id="contoh4">text-shadow dengan CSS3</p> <p id="contoh5">text-shadow dengan CSS3</p> <p id="contoh6">text-shadow dengan CSS3</p> <div style="clear:both;"></div> </body> </html>Simpan kedua file tersebut dalam folder yang sama, kemudian untuk melihat hasilnya lalu double klik file index.html.
selamat mencoba dan selamat belajar. semoga bermanfaat :)
sumber sourcecode: http://www.w3.org/"Om Santhi, Santhi, Santhi, Om"
. . keren,, aq coba ach!! artikel nya bener^ bermanfaat banget. oia lamken,, ini kunjungan perdana n skalian follow ke-1018 . .