Membuat Teks Keren Dengan Efek CSS

Ada banyak sekali efek keren dan cantik yang bisa kita bikin dengan css shadow, Budhe hanya akan  menampilkan efek paling keren saja:

• Pulkolor
• Efek Teks ganda
• Teks Neon
• Teks Kobong
• Bayangantok

Sisipkan teks Kamu dalam “div” atau “span” untuk menghasilkan semua efek keren css seperti ini:

<div id="style">Teks Shadow Keren</div>

CSS Shadow

1. Bayangan Pulkolor

Kita menggunakkan tiga warna untuk efek bayangan di model Pulkolor untuk menghasilkan teks keren.

Teks Shadow Keren

Kode untuk css :

#style{

text-shadow: 0 6px 4px #85c226,

-3px -5px 4px #fe2192,

3px -5px 4px #f7c200;

}

Atau dalam posting :

<span style="text-shadow: 0 6px 4px #85c226, -3px -5px 4px #fe2192, 3px -5px 4px #f7c200;">Teks Shadow Keren</span>

2. Teks Ganda

Kita menggunakkan bayangan tunggal dengan satu warna.

Teks Shadow Keren

Kode:

#style{

text-shadow:0px -15px 0 #fe2192;

}

Atau dalam posting:

<span style="text-shadow: 0 -15px 0 #FE2192;">Teks Shadow Keren</span>

3. Teks Neon

Warna biru tunggal sebagai bayangan teks dengan Radius Blur 7 pixel. Warna teks juga sama biru.

Teks Shadow Keren

Kode:

#style{

text-shadow: 0 0 7px #1E90FF;

color: #1E90FF;

}

Dalam posting:

<span style="color: #1e90ff; text-shadow: 0 0 7px #1E90FF;">Teks Shadow Keren</span>

4. Teks Kobong

Beberapa warna akan kita gunakkan untuk membuat teks seolah terbakar, hm… cukup keren.

Teks Shadow Keren

Kode:

#style{

color: #000;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

}

Dalam posting:

<span style="color: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;">Teks Shadow Keren</span>

5. Bayangantok

Memberikan warna teks yang sama dengan background kemudian menambahkan bayangan membuatnya tampak cukup keren juga.

Teks Shadow Keren

Kode:

#style{

color: #fff;

}

text-shadow: 1px 1px 4px#000;

}

Dalam postingan:

<span style="color: #fff; text-shadow: 1px 1px 4px#000;">Teks Shadow Keren</span>

Untuk menambahkan ukuran teks kodeny:

font-size: 30px;

sedang untuk menggesernya ke tengah:

<p style="text-align: center;"></p>

Berikut ini contohnya:

<p style="text-align: center;"><span style="font-size: 30px; color: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;">Teks Shadow Keren</span></p>

Anda baru saja membaca artikel yang berkategori Blogger dengan judul Membuat Teks Keren Dengan Efek CSS. Anda bisa bookmark halaman ini dengan URL https://willy-maulana.blogspot.com/2012/10/membuat-teks-keren-dengan-efek-css.html. Terima kasih!

Ditulis oleh: ws -