Sebenarnya kiprah CSS Text Shadow tidak hanya sebatas membuat bayangan pada teks saja, namun juga bisa membuat efek-efek Istimewa dengan memanfaatkan kemampuan propertinya yang sanggup mendapatkan value bayangan lebih dari satu. Pelajaran CSS Text Shadow dasar bisa kau baca di sini. Internat Explorer tidak mendukung CSS Text Shadow, jadi kau harus membuka halaman ini dengan browser lain menyerupai Mozilla Firefox untuk melihat efeknya. Semua demo yang tampak menyerupai gambar ini bekerjsama memang benar-benar teks, jikalau tidak percaya kau bisa mencoba untuk menyeleksinya satu-persatu.
Efek Teks Cekung
Untuk membuat imbas cekung, pada dasarnya ialah dengan membuat warna bayangan offset-X dan offset-Y negatif menjadi lebih gelap dibandingkan warna latar belakangnya. Sebaliknya, bayangan offset-X dan offset-Y kasatmata diwarnai dengan warna yang lebih terperinci dibandingkan warna latar belakangnya. Hal ini akan membuat imbas 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 imbas teks cembung ialah dengan membuat warna bayangan offset-X dan offset-Y negatif menjadi lebih terperinci dibandingkan warna latar belakangnya. Sebaliknya, bayangan offset-X dan offset-Y kasatmata diwarnai dengan warna yang lebih gelap. Hal ini akan membuat imbas cembung pada teks. Terlebih lagi dengan penambahan detail kontribusi warna yang lebih terperinci lagi pada dua sudut yang tersisa untuk membuat imbas 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 imbas teks bergaris tepi ialah dengan cara membuat deret bayangan berwarna putih ke segala arah, baik offset kasatmata maupun offset negatif. Mengatur tingkat blur menjadi 0 piksel dan kontribusi sentuhan simpulan 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 imbas teks tiga dimensi dilakukan dengan cara menuliskan deret bayangan berwarna sama ke satu arah dengan menambahkan besaran angka offset bertahap pada masing-masing bayangan. Mengatur tingkat blur menjadi 0 piksel dan kontribusi sentuhan simpulan berupa bayangan yang sedikit gelap dengan tingkat blur sebesar 7 piksel untuk mempertegas imbas 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 dibentuk dengan cara menuliskan deret bayangan berwarna sama dengan menambahkan besaran angka tingkat blur bertahap 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 sanggup dibentuk dengan cara yang hampir sama dengan imbas teks menyala, hanya saja di sini offset sumbu Y dibentuk negatif, sementara besar ukuran offset X dibebaskan menyerupai 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 dibentuk 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 imbas teks pelangi dilakukan dengan cara menuliskan deret bayangan ke satu arah dengan menambahkan besaran angka offset bertahap pada masing-masing bayangan. Mengatur tingkat blur menjadi 0 piksel dan kontribusi 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; }