4 Membuat Teks Bayangan Dengan CSS3

Do you want to share?

Do you like this story?

Prolog : "Membuat Teks Bayangan Dengan CSS3"

CSS = Cascading Style Sheets. CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup atau markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan atau desain suatu halaman HTML.

Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di "tempel" pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly

CONTOH MODEL BAYANGAN DENGAN CSS3

Bayangan Teks 3D Ebooks:

BLOG TREND'S

<h1 style="color: #12c911; text-align: center; text-height: font-size; text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;">
BLOG TREND'S</h1>

Bayangan teks Simultan:

PALING AMPUH

<h1 style="text-shadow: 5px 5px 0 red, -5px -5px 0 orange;text-align:center; text-height:font-size;">PALING AMPUH</h1>

Bayangan dengan warna teks diatur agar sesuai erat warna latar belakang dokumen:

PALING AMPUH

<h1 style="color: #f2f2f2;
text-shadow: 5px 5px 3px #414141;text-align:center; text-height:font-size;">
PALING AMPUH</h1>

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blog Trends di inbox anda: