This Blog is protected by DMCA.com

Monday, April 22, 2013

membuat efek shadow dengan CSS

css sudah tenar dalam pemrograman web diseluruh dunia, css lagi css lagi, memang yang terbanyak saya ketahui adalah css , css juga lebih baik untuk menghias tampilan web, naah kali ini kang badar membagikan cara untuk membuat efek shadow dengan css
mungkin bagi sebagian blogger cara ini sudah tak asing lagi, ya namun bagi seperti blogger yang masih pemula seperi saya cara ini mungkin dibutuhkan
ya langsung saja ke tutorialnya :

  • memberikan efek shadow pada teks 
untuk memberikan efek shadow pada teks, hanya gunakan kode dibawah ini

text-shadow : -2px 2px 3px #3E3F4D ;


penjelasan :
kode warna merah yaitu ukuran offset sumbu X atau horiontal
kode warna hijau yaitu ukuran sumbu Y atau ukuran vertikal
kode kuning yaitu opacity / ketebalan bayangan
kode abu abu yaitu warna bayangan
contoh :

<pre><div style="text-shadow: 2px 2px 2px #3E3F4D;">
contoh teks
</div>
</pre>

contoh teks

  • membuat efek shadow pada area

box-shadow: 2px 2px 2px #3E3F4D
penjelasan :
sama dengan diatas

contoh :

<div style="background-color: darkgreen; box-shadow: 5px 5px 2px #3E3F4D; width: 270px;">
contoh box shadow
</div>

atau juga sobat tambahkan kode inset untuk bayangan kedalam :
kode :

box-shadow : inset 5px 5px 5px #3E3F4D

contoh :



<div style="box-shadow: inset 5px 5px 5px #3E3F4D; width: 270px">
contoh penggunaan inset
</div>

1 Comments

Trim's sobat...blogku jadi tambah menarik...

 

Daftar isi artikel