Judul : Text Shadow Dengan HTML5 dan CSS3
link : Text Shadow Dengan HTML5 dan CSS3
Text Shadow Dengan HTML5 dan CSS3
 |
| Text Shadow |
Kita akan membuat sebuah teks dengan bayangan sederhana.
Kita punya sebuah file HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selamat Datang di halaman webku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="main">
<p id="text">Ini Sebuah Teks</p>
</section>
</body>
</html>
Tulisan "Ini Sebuah Teks" akan kita beri bayangan. Tulisan tersebut ada dalam sebuah id, yaitu "text"<html lang="en">
<head>
<meta charset="utf-8">
<title>Selamat Datang di halaman webku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="main">
<p id="text">Ini Sebuah Teks</p>
</section>
</body>
</html>
Kode CSS5 nya:
#main{
border: 1px solid black;
width: 300px;
background: orange;
text-align: center;
-webkit-border-radius: 20px;
-webkit-box-shadow: rgba(110,110,110, .6) 10px 10px 10px;
/* value1, value2, value3 = sebelah kanan, bawah, blur */
}
#text{
font: bold 30px Times new roman;
text-shadow: rgb(110,110,110) 3px 3px 3px;
}
border: 1px solid black;
width: 300px;
background: orange;
text-align: center;
-webkit-border-radius: 20px;
-webkit-box-shadow: rgba(110,110,110, .6) 10px 10px 10px;
/* value1, value2, value3 = sebelah kanan, bawah, blur */
}
#text{
font: bold 30px Times new roman;
text-shadow: rgb(110,110,110) 3px 3px 3px;
}
Bayangan teks tersebut diberi bayangan dengan kode :
text-shadow: rgb(110,110,110) 3px 3px 3px;
value: rgb( ), panjang_bayangan_bawah, panjang_bayangan_kanan, panjang_blur
Demikianlah Artikel Text Shadow Dengan HTML5 dan CSS3
Sekianlah artikel Text Shadow Dengan HTML5 dan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Text Shadow Dengan HTML5 dan CSS3 dengan alamat link https://infoasikindo.blogspot.com/2014/05/text-shadow-dengan-html5-dan-css3.html
0 Response to "Text Shadow Dengan HTML5 dan CSS3"
Post a Comment