Posted by Aak
Aak-share.com Updated at: 12:48:00 PM

Cara Membuat Teks Shadow Dengan CSS di Blog

No comments:
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.



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!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments