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 :
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 :
contoh teks
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 :
contoh :
<div style="box-shadow: inset 5px 5px 5px #3E3F4D; width: 270px">
contoh penggunaan inset
</div>
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
</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...