16.3.14
21
Membuat efek teks bayangan sebenarnya tidaklah begitu sulit untuk dilakukan, karena untuk menciptakan efeknya, Anda cukup bermain dengan CSS TEXT SHADOW, semua pengaturan untuk membuat efek teks 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.

Text Shadow Effect


Kunjungi juga Cara Membuat Efek Pelangi Pada Teks

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

SAHABAT BLOGGER 77

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)

SAHABAT BLOGGER 77

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


SAHABAT BLOGGER 77
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;
}


SAHABAT BLOGGER 77

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


SAHABAT BLOGGER 77

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

SAHABAT BLOGGER 77

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


SAHABAT BLOGGER 77

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


SAHABAT BLOGGER 77

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


SELAMAT BERKREASI..!! Salam SAHABAT BLOGGER 77

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Efek Tulisan Dengan CSS Text Shadow
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

21 komentar

  1. Mbak devy maaf OOT

    saya mau tanya jika halaman label dibatasi pada URLnya
    misal dibatasi 4 gitu
    tapi pada bawah postingan terakhir tidak ada (posting lama atau posting baru) gitu mbak
    cara mengatasinya gimana?

    BalasHapus
    Balasan
    1. jika dalam 1 URL terdapat 2-3 label, maka walau kita batasi 4 akan tetap tampil bukan 4 mas, karena URL berbeda-beda label

      namun untuk NEXT POST dan PREV POST itu secara otomatis akan tampil saat artikel berusia 1 minggu mas, tetapi jika memang tidak muncul itu terjadi kesalahan pada tag kondisional, mungkin tidak sengaja terhapus, sehingga walau kodenya masih ada dalam HTML,tetap aja selector kode tidak merespon untuk ditampilkan pada blog(postingan)

      Hapus
    2. dan seharusnya ini anda tanyakan pada postingan yang ini mas,
      http://sahabatblogger77.blogspot.com/2014/03/belajar-mengenal-bahasa-markup-html-template.html

      dalam artikel ini saya membahas tentang kode yang mas tanyakan disini

      Hapus
  2. Menarik yah Judul Blog jika pakai effects contoh diatas yah Mbak Devy,
    Tapai maaf mau tanya, apakah script Css nya gak numbang validasi W3C Mbak..?
    Terima kasih sudah berbagi yang bermanfaat. salam sukses :)

    BalasHapus
    Balasan
    1. pengunaan javascript memang sangat riskan dengan W3C bang, terlebih jika kita salah-salah dalam mencermati, tetapi kode diatas sama sekali murni saya menggunakan CSS tanpa script

      jika pada W3C tidak dianjurkan menggunkan font-bold, makanya kode diatas saya menggunakan pixel

      Hapus
  3. Warna yang hijau tu mbak lebih asyik jadi sanagt jelas dan nyata kalau buat saya

    BalasHapus
    Balasan
    1. saya juga pecinta yang hijau-hijau mbak,,hehe

      Hapus
  4. Waaaah mantap tuh,, perlu di coba nih

    BalasHapus
  5. Balasan
    1. sedikit mbak, biar lebih hidup gitu blognya,hehe

      Hapus
  6. selamat malam Mba... memang sangat menarik kalau kita membuat efek tulisan dengan CSS, ijin ya Mba saya mau simpan Kode CSS nya, nanti kapan kapan baru saya Praktekkan...

    BalasHapus
    Balasan
    1. malam juga mas, benar mas, apalagi kalau pakai yang menyala biar sekalian terbakar tuh postingan,hehe

      Hapus
  7. makasih sist.. perlu diterapkan ini :-)
    salam kenal.. blognya keren
    di tunggu komen baliknya

    BalasHapus
  8. kelihatan menarik tulisan dengan efek begitu.. terima aksih share tutorial ini.. :D

    BalasHapus
  9. Sepertinya cocok untuk memberi efek ini pada judul postingan ya buk biar ada kesan penekanan dan menarik perhatian, hehe
    Salam.

    BalasHapus
  10. pos nya sangat bermanfaat dan berguna kak

    BalasHapus
  11. mantab sob tutorialnya sangat berguna. izin save tutorialnya kalau kapan-kapan dibutuhkan

    BalasHapus
  12. iyya..iya...inih yg dimaksud..!

    BalasHapus
  13. Thank's ^_^
    blognya kereen >///<

    BalasHapus
  14. keren mbak ini, bisa saya coba lain kali haha

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK