Cara Menciptakan Teks Shadow Dengan Css Di Blog

Shadow ialah bayangan yang terbentuk menurut arah cahaya yang datang. Shadow pada text memerikan kesan konkret atau 3D pada bentuk bangunnya. Dalam properti ini intinya memakai 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> , kemudian salin isyarat 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 ketika ini membutuhkan isyarat 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 referensi di ambil dari isyarat template aku

.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 isyarat 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 mirip 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 isyarat yang sedikit mirip alasannya ialah di setiap Template isyarat berbeda-beda dan kemudian Anda sesuaikan.

Semoga bermanfaat!

Share this post