Cara Membuat Teks Shadow Dengan CSS di Blog

Shadow adalah bayangan yang terbentuk berdasarkan arah cahaya yang datang. Shadow pada text memerikan kesan nyata atau 3D pada bentuk bangunnya. Dalam properti ini pada dasarnya menggunakan CSS text-shadow yang dikombinasikan dalam color dan size.

Demo   CODE

Berikut ini langkah-langkah dalam penerapannya:

Silahkan Anda buka Editor Template kemudian anda cari kode ]]></b:skin> , lalu salin kode dibawah ini dan terapkan diatasnya .

h3 {
  /* margin: 20px; */
  font-family: 'Arial', sans-serif;
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;
}

h3 {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 80px;
  line-height: 80px;
  color: #f1ebe5;
  text-shadow:  36px  96px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}

Selanjutnya Simpan Template.
Kemudian Anda menuju Entri baru. Anda saat ini membutuhkan kode pemanggil untuk memunculkan effect shadow. Kode pemanggilnya hanya dengan h3 . Berikut lebih lengkapnya :

<h3>Cara Membuat Shadow Texts With CSS</h3>

Jika Anda ingin memasangkan Effect Shadow pada Judul artikel, sebagai contoh di ambil dari kode template saya

.post h2 strong {
  display: block;
  text-decoration: none;
  margin-bottom: 27px;
  color: #444;
  font-size: 30px;
  text-transform: uppercase;
  font-family: 'Open-Sans', sans-serif;
  font-weight: 400;
}

Kemudian ganti dengan kode dibawah ini :

h3 {
  /* margin: 20px; */
  font-family: 'Arial', sans-serif;
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;
}

h3  {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 80px;
  line-height: 80px;
  color: #f1ebe5;
  text-shadow:  36px  96px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}

Dalam pergantian, ganti dibawah Tag pembuka. Jadinya akan seperti berikut :

.post h2{
/* margin: 20px; */
  font-family: 'Arial', sans-serif;
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;
}

.post h2 {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 80px;
  line-height: 80px;
  color: #f1ebe5;
  text-shadow:  36px  96px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}

Silahkan Anda cari kode yang sedikit menyerupai karena di setiap Template kode berbeda-beda dan kemudian Anda sesuaikan.

Semoga bermanfaat!

Share this post