Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow?

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;
}

hompimpaalaihumgambreng.blogspot.com
Sumber :

---

DAFTAR ISI

---