Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow?

Tabel Konten
  1. Efek Teks Cekung 
  • Hompimpa Alaihum Gambreng 
    1. Efek Teks Cembung 
  • Hompimpa Alaihum Gambreng 
    1. Efek Teks Bergaris Tepi 
  • Hompimpa Alaihum Gambreng 
    1. Efek Teks Tiga Dimensi 
  • Hompimpa Alaihum Gambreng 
  • Hompimpa Alaihum Gambreng 
    1. Efek Teks Menyala 
  • Hompimpa Alaihum Gambreng 
    1. Efek Nyala Api 
  • Hompimpa Alaihum Gambreng 
    1. Efek Cat Semprot 
  • Hompimpa Alaihum Gambreng 
    1. Efek Teks Pelangi 
  • Hompimpa Alaihum Gambreng 
  • 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;
    }

    4 Komentar

    • Unknown

      kalo mau menulis dengan efek tulisan d atas gmna?
      d ataskan hanya dkasi keterangan background donak, nah kalo mau jadiin huruf gmna sob?

    • Unknown

      wuihh banyak juga ya macem-2 nya ya :)

    • Unknown

      keren nih :D

    • Unknown

      mantep gan, ane lagi nyari teks yang efek cekung :-bd

    Komentar telah ditutup.