Belajar Kode CSS & Desain Blog: CSS3 text-shadow Property

Membuat blog menjadi lebih indah dan menarik adalah sebuah tantangan. Kode css menjadi pilihan utama sebagai sebuah solusi dan belajar tentang kode css adalah kuncinya, terlebih property css3. Ya..., fenomena baru dalam perkembangan desain blog selain html5 adalah css3. Baru beberapa tahun belakangan ini css3 mengalami perkembangan yang signifikan dan terhitung sangat pesat karena keseimbangan yang diberikan browser untuk memberikan dukungan penuh secepat mungkin. Salah satu property css3 yang sudah support di semua browser dan menggunakan kode seragam adalah text-shadow property. Text-shadow berfungsi menciptakan efek bayangan pada teks (shadow effects) yang mampu menyuguhkan tampilan teks lebih menarik dengan berbagai alternatif pilihan bentuk shadow melalui pengaturan nilai/value text-shadow property.

Posisi shadow

text-shadow: shadow distance |  shadow-distance | blur distance | color;
text-shadow:A(px) B(px) C(px) Color;
text-shadow: RIGHT | BOTTOM | BLUR | COLOR;

text-shadow:-A(px) -B(px) C(px) Color;
text-shadow: LEFT | TOP | BLUR | COLOR;

Penulisan kode css3 text-shadow property

CSS3 text-shadow property mempunyai nilai/value berupa jarak/lebar shadow (bayangan), jarak/lebar blur effect dan color/warna. Satuan yang umum digunakan adalah pixel (px). Bentuk dasar penulisan kode css3 text-shadow sbb:

text-shadow:A(px) B(px) C(px) Color;
text-shadow:2px 2px 2px black;
text-shadow:2px 2px 2px #000;
text-shadow:2px 2px 2px rgb(0,0,0);
text-shadow:2px 2px 2px rgba(0,0,0,1.0);

text-shadow:-A(px) -B(px) C(px) Color;
text-shadow:-2px -2px 2px black;
text-shadow:-2px -2px 2px #000;
text-shadow:-2px -2px 2px rgb(0,0,0);
text-shadowv:-2px -2px 2px rgba(0,0,0,1.0);

text-shadow:D(px) E(px) F(px) Color, A(px) B(px) C(px) Color;
text-shadow:1px 1px 1px red, 2px 2px 2px #000;

text-shadow:-D(px) -E(px) F(px) Color, A(px) B(px) C(px) Color;
text-shadow:-1px -1px 1px red, 2px 2px 2px #000;

text-shadow:-D(px) -E(px) F(px) Color, A(px) B(px) C(px) Color, G(px) H(px) I(px) Color;
text-shadow:-1px -1px 1px red, 2px 2px 2px #000, 0 0 5px Color;

Dari kode dasar di atas, dapat dilihat bahwa dimungkinkan membuat multiple shadow effects pada text dengan dimensi dan warna shadow berbeda.

Metode penulisan text-shadow yang lain

Cara menuliskan css3 text-shadow property dan nilainya tanpa menggunakan efek blur.

text-shadow: A(px) B(px) Color;
text-shadow: RIGHT | BOTTOM | Color;
text-shadow: -A(px) -B(px) Color;
text-shadow: LEFT | TOP | Color;

text-shadow: 2px 2px blue;
text-shadow: -2px -2px green;

text-shadow: -2px -2px red, 4px 4px 2px orange;

Di bawah tersedia kode berikut demo dari text-shadow property dengan berbagai bentuk dan pengaturan posisi serta ketebalan shadow dan efek blur. Lakukan berbagai perubahan nilai text-shadow property untuk mendapatkan bentuk shadow berbeda.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS3 Text Shadow Property</title>
<head>

<style type="text/css">
body{color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc; }
pre{display:block;padding:20px;white-space:pre;margin:20px auto;font:400 14px Arial;}
pre.wsn{white-space:normal;}
h3{font:bold 20px Serif;text-align:center;padding-bottom:5px;border-bottom:3px double #555;margin:10px;}
.rd{color:red;}.gn{color:green;}.be{color:blue;}
.konten{padding:30px;margin:20px;background:#fff;}p:after{position:absolute;top:50px;left:0px;width:100%;text-align:center;font-size:12px;text-shadow:none;background:black;color:#fff;padding:1px 0;}p.ts-right:after{content:"text-shadow:4px 0 0 red;";}p.ts-bottom:after{content:"text-shadow:-4px 0 0 red;";}p.ts-left:after{content:"text-shadow:-4px 0 0 red;";}p.ts-top:after{content:"text-shadow:0 -4px 0 red;";}p.ts-right-bottom:after{content:"text-shadow:4px 4px 0 red;";}p.ts-right-top:after{content:"text-shadow:4px -4px 0 red;";}p.ts-left-top:after{content:"text-shadow:-4px -4px 0 red;";}p.ts-left-bottom:after{content:"text-shadow:-4px 4px 0 red;";}p.ts-arround-1:after{content:"text-shadow:0 2px 0 red,0 -2px 0 red,2px 0 0 red, -2px 0 0 red;";}p.ts-arround-2:after{content:"text-shadow:0 2px red,0 -2px red,2px 0 red, -2px 0 red;";}p.ts-arround-3:after{top:70px;content:"text-shadow:0px 2px 0 black,0 -2px 0 black,2px 0 0 black, -2px 0 0 black, 0px 2px 3px #fff,0 -2px 3px #fff,2px 0 3px #fff, -2px 0 3px #fff;";}

</style>

</head>
<body>

<style type="text/css">
p{
  font-size:2.7em;
  font-weight:bold;
  color:#000;
  float:left;
  padding:5px 10px 30px;
  margin:4px;
  background:#888;
  position:relative;
  display:block;
  color:#fff;
}
p.ts-right{
  text-shadow:4px 0 0 red;
}
p.ts-bottom{
  text-shadow:0 4px 0 red;
}
p.ts-left{
  text-shadow:-4px 0 0 red;
}
p.ts-top{
  text-shadow:0 -4px 0 red;
}

p.ts-right-bottom{
  text-shadow:4px 4px 0 red;
}
p.ts-right-top{
  text-shadow:4px -4px 0 red;
}
p.ts-left-top{
  text-shadow:-4px -4px 0 red;
}
p.ts-left-bottom{
  text-shadow:-4px 4px 0 red;
}
p.ts-arround-1{
  text-shadow:0 2px 0 red,0 -2px 0 red,2px 0 0 red, -2px 0 0 red;
}
p.ts-arround-2{
  text-shadow:0 2px red,0 -2px red,2px 0 red, -2px 0 red;
}
p.ts-arround-3{font-size:60px;
  text-shadow:0px 2px 0 black,0 -2px 0 black,2px 0 0 black, -2px 0 0 black, 0px 2px 3px #fff,0 -2px 3px #fff,2px 0 3px #fff, -2px 0 3px #fff;
}
p.end{
  color:white;
  display:inline-block;
  font-size:27px;
  background:#eee;
  margin:4px 0;
  padding:4px 10px;
  text-align:center;
  text-shadow:black 0.1em 0.1em 0.2em;
}
</style>

<p class="ts-right">Text Shadow</p>
<p class="ts-bottom">Text Shadow</p>
<p class="ts-left">Text Shadow</p>
<p class="ts-top">Text Shadow</p>

<p class="ts-right-bottom">Text Shadow</p>
<p class="ts-left-bottom">Text Shadow</p>
<p class="ts-left-top">Text Shadow</p>
<p class="ts-right-top">Text Shadow</p>

<p class="ts-arround-1">Text Shadow</p>
<p class="ts-arround-2">Text Shadow</p>
<p class="ts-arround-3">Text Shadow</p>
<p class="end">Text Shadow</p>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS3 text-shadow Property

Posisi shadow

Penulisan kode css3 text-shadow property

Metode penulisan text-shadow yang lain

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.21.2012');

CSS3 text-shadow Property

Posisi shadow

Penulisan kode css3 text-shadow property

Metode penulisan text-shadow yang lain

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e