Nilai Properti Text-Shadow Untuk Typografi Menjadi Baik

Nilai Properti Text-Shadow Untuk Typografi - Value atau nilai dari sebuah properti tentunya faktor utama dari nilai akhir sebuah desain tampilan, begitu pentingnya kita menentukan nilai sebuah properti tentunya menuntut kita untuk belajar dan belajar, tidak semua orang bisa menetukan nilai properti dengan hasil baik terutama dalam hal perpaduan warna, apalagi dalam hal ini kita akan sedikit mengupas sebuah Shadow pada Teks (Text-Shadow).

Nilai properti text-shadow atau properti box-shadow erat kaitannya dengan perpaduan warna yang tepat untuk menghasilkan nilai akhir yang sesuai dengan tampilan yang dinginkan, dalam hal ini banyak sekali pendukung yang perlu diikut sertakan seperti ketajaman mata untuk memilih warna, layar monitor dengan menampilkan warna yang sebenarnya dan sedikit sentuhan feeling yang tepat untuk menentukannya.

Terus terang saja saya juga kurang pandai dalam menentukan nilai pada sebuah properti, terutama Nilai Properti Text-Shadow, untuk itu kita bisa sama-sama belajar saling memberikan kritik dan saran yang membangun untuk bisa menampilkan desain Typografi menjadi lebih baik.

✲✲✲

Text-Shadow

Bagaimana menentukan Properti dan Nilai Properti Text-Shadow dan bagaimana membacanya?

#selektor {
  text-shadow: 1px 2px 3px #000000;
}

Pada contoh CSS diatas menggambarkan:


❶ text-shadow merupakan sebuh properti dan 1px 2px 3px #000000 merupakan nilai dari properti text-shadow.
❷ 1px 2px 3px #000000 mempunyai ketentuan atau cara membacanya adalah:

• 1px merupakan nilai shadow secara horizontal (kanan-kiri) nilainya bisa 0px berarti tidak memiliki shadow atau plus dan minus (1px atau -1px).
• 2px merupakan nilai text-shadow secara vertikal (atas-bawah) nilainya bisa 0px berarti tidak memiliki shadow atau plus dan minus (2px atau -2px).
• 3px merupakan nilai tingkat dari ke-blur-an (blur) shadow tersebut.
• #000000 merupakan nilai warna dari shadow yang dipergunakan.

Dari keterangan diatas mungkin masih agak bingung,  untuk lebih jelasnya bisa melihat contoh penggunaanya dibawah ini:

text-shadow: 0px 4px 0px #000000

text-shadow: 0px -4px 0px #000000

text-shadow: 4px 0px 0px #000000

text-shadow: -4px 0px 0px #000000

text-shadow: 0px 0px 10px #000000

Pada contoh diatas menggunakan warna teks dengan warna Merah dengan dengan ukuran 33px sedangkan nilai warna shadow menggunakan warna Hitam.

Multi Text-Shadow

Selain single shadow kita bisa juga memberikan beberapa shadow pada teks atau bisa disebut Multi Shadow yang caranya seperti pada penggunan Multi Background Image, yaitu hanya dengan menambahkan separator koma (,) sebelum penutup nilai properti (;).

Dalam hal ini kita bisa memberikan banyak nilai text-shadow pada satu properti text-shadow. Seperti pada contoh dibawah ini, saya menggunakan 2 nilai properti text-shadow:

text-shadow: 2px 0px 0px Red, -2px 0px 0px Blue

Untuk kustomisasi sendiri bisa menambahkan nilai text-shadow menjadi seperti ini:

text-shadow: 1px 2px 3px #Color, -1px -2px -3px #Color, ....., ....., .....,dst;

Untuk stylenya sendiri penggunaan texs-shadow ini bisa untuk membentuk Emboss Teks baik itu teks yang timbul ataupun teks yang tenggelam, atau jika kalian pandai dalam memadukan warna bisa membentuk teks dengan gaya Api atau gaya Salju dll.

Semoga dengan keterangan diatas bisa menghasilkan desain typografi yang lebih baik dan tentunya bisa menghasilkan tampilan teks yang belum pernah ada pada blog-blog atau web-web pada umumnya, selamat berkreasi.