CSS3 : Text-shadow

Text-shadow adalah property dalam CSS3 dimana fungsinya ialah membuat bayangan pada text

The difference between ordinary and extraordinary is that little extra. Jimmy Johnson

Text-shadow adalah property dalam CSS3 dimana fungsinya ialah membuat bayangan pada text

Last Modif at July 8th, 2011

Dulunya saya sudah pernah membahas CSS3 tentang text-shadow, sayangnya setelah saya baca ulang, tulisan terdahulu itu kurang relevan. Dan sekarang saya akan coba menguraikan pemahaman saya tentang CSS3 text-shadow. Buat yang lebih paham silakan perbaiki jika ada kekurangan, berikut

CSS3 text-shadow

Text-shadow adalah property dalam CSS3 dimana fungsinya ialah membuat bayangan pada text, ya namanya juga shadow :)

sintaks text-shadow

sintaks adalah aturan penulisan kodenya, dan jika sintaksnya salah maka perintah yang kita tulis tidak akan berjalan, next berikut adalah aturan penulisan text-shadow

.class-text-shadow/* diawali dengan selector dan yang diawali dot adalah class*/
{/* trus buka kurung karawal, fungsinya ialah untuk memulai */
font-family:/* font-family adalah property, */ arial;/* sedangkan arial adalah value atau nilai dari font-family*//* dimana maksudnya ialah, semua tag html dengan class class-text-shadow akan memiliki nilai font arial*/
color:#333;/* #333 adalah hex-color, silakan googling untuk mengetahai code lain*//* dan maksudnya ialah warna berwarna #333 atau hitam lembut*/
text-shadow:
1px 2px 3px blue;
/*
* 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px;
* 2px adalah tebal bayangan secera vertikal, kebawah untuk nilai (+) dan keatas untul nilai (-), misal -2px;
* 3px adalah tingkat keburaman, semakin tinggi nilainya maka semakin buram pula bayanganya
* blue ada warna bayangan.
kita juga bisa menambah value lagi misal :
text-shadow:
1px 2px 3px blue,
2px 3px 2px red;
setiap value dipisakan dengan ,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.
*/
}/* akhir penulisan diakhiri dengan tutup kurung karawal, ini berfungsi untuk menutup selector */

preview text shadow

text shadow

text shadow

text shadow

text shadow

text shadow

contoh source code text shadow

copy source kode berikut lalu save dengan format html kemudian jalankan

<html>
<head>
<title>CSS3 : Contoh Text Shadow</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="320;url=http://www.indaam.net"/>
<style type="text/css">
/*
CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
body{
width:80%;
margin:30px auto;
}
p{
color:#888;
font:bold 40px arial;
text-transform:uppercase;
}
.text-shadow1{
text-shadow:
1px 2px 3px blue;
}
.text-shadow2{
text-shadow:
1px 1px 0 #444,
2px 2px 0 #444,
3px 3px 0 #444,
4px 4px 0 #444;
}
.text-shadow3{
text-shadow:
1px 1px 0 red,
2px 2px 0 pink,
3px 3px 0 yellow,
4px 4px 0 blue,
5px 5px 0 green;
}
.text-shadow4{
text-shadow:
-1px -2px 2px black,
1px 2px 2px black;
}
.text-shadow5{
text-shadow:
-1px -2px 0 black,
1px 2px 20px black;
}
</style>
</head>
<body>
<p class='text-shadow1'>text shadow</p>
<p class='text-shadow2'>text shadow</p>
<p class='text-shadow3'>text shadow</p>
<p class='text-shadow4'>text shadow</p>
<p class='text-shadow5'>text shadow</p>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

silakan edit kodenya untuk belajar untuk contoh yang lain silakan googling, semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-