Membuat Efek Tulisan Dengan CSS Text Shadow

Posted by : tukar link saling follow blog

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.

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