Sebenarnya tugas
CSS Text Shadow tidak hanya sebatas membuat bayangan pada teks saja, namun juga bisa menciptakan efek-efek spesial dengan memanfaatkan kemampuan propertinya yang dapat menerima value bayangan lebih dari satu. Pelajaran
CSS Text Shadow dasar bisa kamu baca
di sini.
Internat Explorer tidak mendukung
CSS Text Shadow, jadi kamu harus membuka halaman ini dengan browser lain seperti
Mozilla Firefox untuk melihat efeknya. Semua demo yang tampak seperti gambar ini sebenarnya memang benar-benar teks, kalau tidak percaya kamu bisa mencoba untuk menyeleksinya satu-persatu.
Efek Teks Cekung
Untuk membuat efek cekung, intinya adalah dengan membuat warna bayangan
offset-X dan
offset-Y negatif menjadi lebih gelap dibandingkan warna latar belakangnya. Sebaliknya, bayangan
offset-X dan
offset-Y positif diwarnai dengan warna yang lebih terang dibandingkan warna latar belakangnya. Hal ini akan menciptakan efek cekung pada teks.
Hompimpa Alaihum Gambreng
h2 {
background:#4aacf7;
color:#064475;
text-shadow:1px 2px 1px #9ad2fe,-1px -2px 1px #1895f7;
}
Efek Teks Cembung
Untuk membuat efek teks cembung adalah dengan membuat warna bayangan
offset-X dan
offset-Y negatif menjadi lebih terang dibandingkan warna latar belakangnya. Sebaliknya, bayangan
offset-X dan
offset-Y positif diwarnai dengan warna yang lebih gelap. Hal ini akan menciptakan efek cembung pada teks. Terlebih lagi dengan penambahan detail pemberian warna yang lebih terang lagi pada dua sudut yang tersisa untuk menciptakan efek sedikit berkilau.
Kinyis-kinyis...Hompimpa Alaihum Gambreng
h2 {
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;
}
Efek Teks Bergaris Tepi
Untuk membuat efek teks bergaris tepi adalah dengan cara membuat deret bayangan berwarna putih ke segala arah, baik
offset positif maupun
offset negatif. Mengatur
tingkat blur menjadi
0 piksel dan pemberian sentuhan akhir berupa bayangan yang sedikit gelap dengan
tingkat blur sebesar
2 piksel untuk mempertegas garis tepinya.
Hompimpa Alaihum Gambreng
h2 {
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;
}
Efek Teks Tiga Dimensi
Membuat efek teks tiga dimensi dilakukan dengan cara menuliskan deret bayangan berwarna sama ke satu arah dengan menambahkan besaran angka
offset sedikit demi sedikit pada masing-masing bayangan. Mengatur
tingkat blur menjadi
0 piksel dan pemberian sentuhan akhir berupa bayangan yang sedikit gelap dengan
tingkat blur sebesar
7 piksel untuk mempertegas efek tiga dimensinya.
Hompimpa Alaihum Gambreng
h2 {
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;
}
Hompimpa Alaihum Gambreng
h2 {
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;
}
Efek Teks Menyala
Efek teks menyala dibuat dengan cara menuliskan deret bayangan berwarna sama dengan menambahkan besaran angka
tingkat blur sedikit demi sedikit pada masing-masing bayangan. Mengatur warna teks menjadi
putih, latar belakang menjadi
hitam serta mengatur
offset sumbu X dan Y menjadi
0 piksel.
Hompimpa Alaihum Gambreng
h2 {
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;
}
Efek Nyala Api
Efek nyala api pada teks dapat dibuat dengan cara yang hampir sama dengan efek teks menyala, hanya saja di sini
offset sumbu Y dibuat
negatif, sementara besar ukuran
offset X dibebaskan seperti halnya dimensi nyala api yang tidak beraturan.
Hompimpa Alaihum Gambreng
h2 {
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;
}
Efek Cat Semprot
Efek cat semprot dibuat dengan cara membuat deret bayangan berwarna sama dengan menambahkan besaran angka
tingkat blur sebesar
3 piksel pada masing-masing bayangan. Mengatur warna teks menjadi
transparan serta mengatur
offset sumbu X dan Y sembarang.
Hompimpa Alaihum Gambreng
h2 {
background:#cac3b4;
color:transparent;
text-shadow:
5px 5px 3px #414141,
0px 7px 3px #414141,
7px 0px 3px #414141,
7px 0px 3px #414141,
-4px 0px 3px #414141,
0px 0px 20px #000;
}
Efek Teks Pelangi
Membuat efek teks pelangi dilakukan dengan cara menuliskan deret bayangan ke satu arah dengan menambahkan besaran angka
offset sedikit demi sedikit pada masing-masing bayangan. Mengatur
tingkat blur menjadi
0 piksel dan pemberian warna pelangi secara berurutan pada masing-masing deret bayangannya.
Hompimpa Alaihum Gambreng
h2 {
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;
}
