Cara Membuat Efek Bayangan Tulisan dengan CSS Text Shadow

On Januari 21, 2015

Cara membuat efek tulisan berbayang sebenarnya tidak begitu sulit untuk dilakukan, karena untuk menciptakan efek shadownya, anda cukup bermain dengan CSS TEXT SHADOW, semua pengaturan untuk membuat efek teks/tulisan dengan berbagai model dan warna, anda cukup mengatur nilai value dari kode text shadow, sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan dengan keinginan.

Berbagai koleksi pilihan Efek Teks Bayangan Dengan CSS Text Shadow yang dapat anda jadikan sebagai referensi buat model Judul website/blog anda terlihat semakin menarik dan keren, seperti di bawah ini

RUMAH PIXEL

 

Efek Teks Bayangan
.text1 {
font-weight:700px;
font-size:35px;
background:#4aacf7;
color:#064475;
text-shadow:
1px 2px 1px #9ad2fe,
-1px -2px 1px #1895f7;
}

Efek teks ini yang paling saya suka, karena desain tampilan style-nya terkesan seperti ukiran relief, Sedangkan pada warna saya menggunakan hijau gelap pada bayangan teks yang sama dengan warna teks aslinya, sehingga seakan membuat teks timbul (Teks Emboss)

RUMAH PIXEL

 

Efek Teks Emboss
text2 {
font-weight:710px;
font-size:35px;
background:#3e6a06;
color:#3e6a06;
text-shadow:
-1px -1px 1px #528e06,
-1px -1px 3px #528e06,
1px 1px 1px #243d05,
1px 1px 3px #243d05,
1px -1px 1px #eafed2,
-1px 1px 1px #eafed2;
}
RUMAH PIXEL
Efek Teks Garis Sisi
text3 {
font-weight:700px;
font-size:35px;
background:#fafafa;
color:#91080b;
text-shadow:
1px 0px 0px #fff,
-1px 0px 0px #fff,
0px 1px 0px #fff,
0px -1px 0px #fff,
1px 1px 2px #000;
}
RUMAH PIXEL

 

Efek Teks Tiga Dimensi
text4 h2 {
font-weight:680px;
font-size:35px;
background:#f9f9d7;
color:#9a9d0b;
text-shadow:
1px 1px #404206,
2px 2px #727415,
3px 3px #727415,
4px 4px #727415,
5px 5px #727415,
6px 6px #727415,
7px 7px #404206,
8px 8px 7px #000;
}
RUMAH PIXEL

 

Efek Teks Tiga Dimensi
text5 h2 {
font-weight:680px;
font-size:35px;
background:#eee;
color:#45BEF7;
text-shadow:
0px 1px #577079,
0px 2px #577079,
0px 3px #577079,
0px 4px #577079,
0px 5px #577079,
0px 6px #577079,
0px 7px #577079,
0px 7px 10px #333;
}

Pada Light efek teks ini besaran angka value pada deret bayangan sama besar saat menambakhan tingkat ketajaman BLUR dengan tambahan sedikit demi sedikit pada efek bayangan teks aslinya, jika warna teks putih maka latar belakang kita ubah menjadi hitam, dan nilai offset sumbu (y) menjadi nol (0), sehingga anda akan dapat menghasilkan efek teks menyala seperti berikut

 

RUMAH PIXEL

 

Efek Teks Menyala
text6 h2 {
font-weight:755px;
font-size:35px;
background:black;
color:#fff;
text-shadow:
0 0 3px #FFFFA0,
0 0 5px #FFFF4D,
0 0 9px #FFFF41,
0 0 20px #FFFF2A,
0 0 25px #FFFF2B,
0 0 30px #FEFE00,
0 0 40px #F7F700;
}
RUMAH PIXEL

 

Efek Teks Menyala
text7 h2 {
font-weight:600px;
font-size:42px;
background:black;
color:black;
text-shadow:
0px 0px 4px #ccc,
-1px -5px 4px #ff3,
2px -10px 6px #fd3,
-3px -15px 11px #f80,
3px -18px 18px #f20;
}
RUMAH PIXEL

 

Efek Teks Warna-Warni
text8 h2 {
font-weight:900px;
font-size:47px;
background:#f5e6fe;
color:#fff;
text-shadow:
-1px -1px 0px #ddd,
2px 1px 0px #f93e47,
4px 2px 0px #f59b0f,
6px 3px 0px #f5dc0f,
8px 4px 0px #19a305,
10px 5px 0px #057fa3,
12px 6px 0px #052aa3,
14px 7px 0px #7605a3,
14px 8px 2px #000,
14px 5px 10px #000,
14px 5px 25px #000;
}

 

Comments are closed.