CSS Trick: Make Text Shadow
Monday, November 28, 2011
Trick CSS "Text Shadows" atau text dengan bayangan. Trik CSS ini hanya untuk Browser Mozilla Firefox.
Okay lets we start, code CSS-nya seperti ini:
Contoh:
Penjelasan:
4px : jarak pergeseran text bayangan dari kiri ke kanan
3px : jarak pergeseran text bayangan dari atas ke bawah
2px : lebar dari text bayangan, semakin besar angkanya semakin blur textnya
#ff0000 : kode warna dari text bayangan
Cara penggunaannya seperti ini :
1. Langsung digunakan pada CSS Template
Misalnya anda ingin memberi text bayangan pada judul postingan. Secara umum template blogspot menggunakan tag .Post H3 untuk judul posting. Jadi masuk ke EDIT HTML lalu cari tag .post H3.
Misal, code CSSnya seperti ini:
2. Digunakan pada postingan
tambahan code HTML seperti contoh:
Variasi dari kode text shadow :
Code:
Code:
Okay, lets try it with your costume code...!
Thank You.
Okay lets we start, code CSS-nya seperti ini:
text-shadow: 4px 3px 2px #ff0000;
Contoh:
Tulisan dengan Bayangan
Penjelasan:
4px : jarak pergeseran text bayangan dari kiri ke kanan
3px : jarak pergeseran text bayangan dari atas ke bawah
2px : lebar dari text bayangan, semakin besar angkanya semakin blur textnya
#ff0000 : kode warna dari text bayangan
Cara penggunaannya seperti ini :
1. Langsung digunakan pada CSS Template
Misalnya anda ingin memberi text bayangan pada judul postingan. Secara umum template blogspot menggunakan tag .Post H3 untuk judul posting. Jadi masuk ke EDIT HTML lalu cari tag .post H3.
Misal, code CSSnya seperti ini:
.post h3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
}
Tambahkan kode text shadow-nya:
.post h3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
text-shadow: 4px 3px 2px #ff0000;
}
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
}
Tambahkan kode text shadow-nya:
.post h3 {
margin:0;
padding:10px 0;
font-size:14px;
font-weight:bold;
line-height:1.4em;
color:#0000ff;
text-shadow: 4px 3px 2px #ff0000;
}
2. Digunakan pada postingan
tambahan code HTML seperti contoh:
EFEK BAYANGAN TEXT
Code:
<div style="text-shadow: 4px 3px 2px #ff0000; font-size: 24px;
font-weight:bold;">EFEK BAYANGAN TEXT</div>
Variasi dari kode text shadow :
EFEK DUA BAYANGAN
Code:
<div style="text-shadow: 4px 3px 2px #ff0000, -4px -3px 2px #0000ff;">EFEK DUA BAYANGAN</div>
EFEK TIGA BAYANGAN
Code:
<div style="text-shadow: 4px 10px 2px #ff0000, -4px -10px 2px
#0000ff, 15px 3px 2px #333333;">EFEK TIGA BAYANGAN</div>
EFEK CAHAYA NEON 1
Code:
<div style="text-shadow: 0px 0px 4px #8877ff; font-size: 24px; font-weight:bold;">EFEK CAHAYA NEON 1</div>
EFEK CAHAYA NEON 2
Code:
<div style="text-shadow: 0px 0px 4px #8877ff, 0px 0px 4px #8877ff,
0px 0px 4px #8877ff; font-size: 24px; font-weight:bold;">EFEK CAHAYA NEON 2</div>
Okay, lets try it with your costume code...!
Thank You.
