Cara membuat text shadow atau bayangan text
Text shadow atau bayangan text sangat mirip pada box-shadow. Bedanya,box-shadow memberikan bayangan pada suatu element HTML seperti "div", "img", atau yang lainnya. Sedangkan Text Shadow memberikan bayangan pada suatu teks. Seperti pada navbar blog ini. Shadow text membuat teks menjadi lebih cantik dari pada defaultnya. Shadow text mirip dengan mengstabilo pada teks didunia nyata.Pembuatannya sangat mudah. Cukup dengan mengetik kode Cssnya saja.
Cara membuat text shadow
Ayo kita mulai sob. Caranya, ketikkan kode berikut di dalam element style Css.
<p style="text-shadow:1px 1px 1px red;">BlogSeno</p>
Lihat hasilnya:
Indah bukan? Ketebalan dan warna Shadownya bisa diatur kok! Perhatikan keterangan berikut.
Keterangan px pertama
px yang pertama adalah, jarak shadow dengan text ke arah kanan. Contoh, bila kodenya adalah sebagai berikut,
<p style="text-shadow:5px 1px 1px red;">BlogSeno</p>
Maka hasilnya sebagai berikut.
Lihat sob, jarak shadownya jadi berbeda kan?
Cara membuat text shadow
Ayo kita mulai sob. Caranya, ketikkan kode berikut di dalam element style Css.
<style type='text/css'>Atau sebagai berikut.
text-shadow:1px 1px 1px red;
</style>
<p style="text-shadow:1px 1px 1px red;">BlogSeno</p>
Lihat hasilnya:
BlogSeno
Indah bukan? Ketebalan dan warna Shadownya bisa diatur kok! Perhatikan keterangan berikut.
Keterangan px pertama
px yang pertama adalah, jarak shadow dengan text ke arah kanan. Contoh, bila kodenya adalah sebagai berikut,
<p style="text-shadow:5px 1px 1px red;">BlogSeno</p>
Maka hasilnya sebagai berikut.
BlogSeno
Lihat sob, jarak shadownya jadi berbeda kan?
Keterangan px kedua
Px kedua sama dengan px pertama, namun px kedua ini merupakan jarak antara shadow dengan text ke arah bawah. Contoh:
Px kedua sama dengan px pertama, namun px kedua ini merupakan jarak antara shadow dengan text ke arah bawah. Contoh:
<p style="text-shadow:1px 5px 1px red;">BlogSeno</p>maka hasilnya:
BlogSeno
Keterangan px terakhir
Px yang terakhir berbeda jauh dengan yang ke 1 atau yang ke 2. Karena px ini merupakan tebal/buramnya shadow. Contoh:
Px yang terakhir berbeda jauh dengan yang ke 1 atau yang ke 2. Karena px ini merupakan tebal/buramnya shadow. Contoh:
<p style="text-shadow:5px 5px 10px red;">BlogSeno</p>Maka hasilnya:
BlogSeno
Shadownya menjadi buram 'kan? Nah untuk mengganti warna, cukup dengan mengganti "red" menjadi warna lainnya seperti "Yellow" atau dengan kode contoh "f001".
Cukup sekian penjelasannya, semoga bermanfaat untuk sobat :)
Cukup sekian penjelasannya, semoga bermanfaat untuk sobat :)
sob untuk widget beri kami kritik dan saran kodenya disimpa dimana ya,...di tutorialnya sesudah kode body,tapi templat aku rada aneh nih.
ReplyDeletekeren sob jadinya. maksud dari red apaan ??
ReplyDeletewarna shadownya sob.. :) red itu maksudnya merah :D
Deletenice gan....
ReplyDelete