Salam persahabatan, sudah lama trik blogger ga' update trik untuk sobat-sobat blogger, pada kesempatan ini trik blogger mau berbagi tentang membuat box shadow dengan css 3.
Coba perhatikan contoh box shadow, di bawah ini,
mungkin sobat pernah melihat blog atau website yang memiliki kotak dengan efek bayangan (drop shadow) sekilas mungkin sobat bepikir, bahwa sobat memerlukan software Photoshop untuk membuat gambar kotak berbayang. Namun, ternyata sobat dapat melakukannya tanpa menggunakan gambar apapun, murni CSS.
Hal ini dimungkinkan melalui fitur baru CSS 3, yang mendukung property box-shadow, contoh kode di bawah ini adalah class untuk membuat kotak berbayang tersebut
Perhatikan, baris box-shadow: 8px 8px 4px #0c0c0c; yang membentuk efek kotak berbayang.
Property box-shadow memiliki empat parameter/ atribut sebagai berikut :
1. Offset Horizontal Bayangan
8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter negatif, bayangan akan tampil di sebelah kiri kotak.
2. Offset Vertikal Bayangan
8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.
3. Radius Blur
Semakin besar nilai, , bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh digunakan radius blur sebesar 4 pixel.
4. Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.
Baris kedua, yaitu background-color: #00ff00; berfungsi untuk mendefinisikan warna background.
Bagaimana penggunaannya sehingga menghasilkan tampilan seperti pada contoh di atas?
Berikut ini kode lengkapnya.
<html>
<head>
<style type='text/css'>
.shadow { box-shadow: 8px 8px 4px; #0c0c0c; background-color:#00ff00;}
</style>
</head>
<body>
<div class=shadow style="width:200px">
Tulisan dengan efek box dan drop shadow
</div>
<div class=shadow style="width:180px">
Salah satu contoh kegunaan CSS
</div>
</body>
</html>
Seperti kode di atas, class .shadow didefinikan dalam tag <head>, diawali dengan tag <style type='text/css'>. Penulisan CSS dengan cara ini disebut Internal Style Sheet. Jika cukup banayk kode CSS yang ingin disertakan pada halaman tersebut, umumnya web developer akan menyimpan CSS pada file terpisah (dengan ekstensi *.css) dan memanggilnya dengan tag <link>yang juga diletakkan pada bagian <head>.
Penulisan CSS dengan cara ini disebut dengan External Style Sheet.
Contoh penulisan :
<link rel="stylesheet" type="text/css" href="style.css"/>
Sobat dapat menggunakan class .shadow yang telah didefinisikan tersebut dengan perintah <div class=shadow> lalu mengetikkan teks yang merupakan konten di dalam kotak tersebut. Permasalahan selanjutnya adalah bagaimana membuat lebit dari satu kotak berbayang dengan lebar (width) berbeda?
Tentu sobat memiliki alternatif, misalnya table dengan width tertentu. Namun, cara yang cukup praktis adalah kembali menggunakan CSS.
Perhatikan kembali kode HTML lengkap di atas. Baris <div class=shadow style="width:200px">
merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Style.
Sekian, semoga bermanfaat buat sobat-sobat blogger, salam
Coba perhatikan contoh box shadow, di bawah ini,
Tulisan dengan efek box dan drop shadow
Salah satu contoh kegunaan CSS
mungkin sobat pernah melihat blog atau website yang memiliki kotak dengan efek bayangan (drop shadow) sekilas mungkin sobat bepikir, bahwa sobat memerlukan software Photoshop untuk membuat gambar kotak berbayang. Namun, ternyata sobat dapat melakukannya tanpa menggunakan gambar apapun, murni CSS.
Hal ini dimungkinkan melalui fitur baru CSS 3, yang mendukung property box-shadow, contoh kode di bawah ini adalah class untuk membuat kotak berbayang tersebut
.shadow {
box-shadow: 8px 8px 4px #0c0c0c;
background-color:#00ff00;
}
Perhatikan, baris box-shadow: 8px 8px 4px #0c0c0c; yang membentuk efek kotak berbayang.
Property box-shadow memiliki empat parameter/ atribut sebagai berikut :
1. Offset Horizontal Bayangan
8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter negatif, bayangan akan tampil di sebelah kiri kotak.
2. Offset Vertikal Bayangan
8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.
3. Radius Blur
Semakin besar nilai, , bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh digunakan radius blur sebesar 4 pixel.
4. Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.
Baris kedua, yaitu background-color: #00ff00; berfungsi untuk mendefinisikan warna background.
Bagaimana penggunaannya sehingga menghasilkan tampilan seperti pada contoh di atas?
Berikut ini kode lengkapnya.
<html>
<head>
<style type='text/css'>
.shadow { box-shadow: 8px 8px 4px; #0c0c0c; background-color:#00ff00;}
</style>
</head>
<body>
<div class=shadow style="width:200px">
Tulisan dengan efek box dan drop shadow
</div>
<div class=shadow style="width:180px">
Salah satu contoh kegunaan CSS
</div>
</body>
</html>
Seperti kode di atas, class .shadow didefinikan dalam tag <head>, diawali dengan tag <style type='text/css'>. Penulisan CSS dengan cara ini disebut Internal Style Sheet. Jika cukup banayk kode CSS yang ingin disertakan pada halaman tersebut, umumnya web developer akan menyimpan CSS pada file terpisah (dengan ekstensi *.css) dan memanggilnya dengan tag <link>yang juga diletakkan pada bagian <head>.
Penulisan CSS dengan cara ini disebut dengan External Style Sheet.
Contoh penulisan :
<link rel="stylesheet" type="text/css" href="style.css"/>
Sobat dapat menggunakan class .shadow yang telah didefinisikan tersebut dengan perintah <div class=shadow> lalu mengetikkan teks yang merupakan konten di dalam kotak tersebut. Permasalahan selanjutnya adalah bagaimana membuat lebit dari satu kotak berbayang dengan lebar (width) berbeda?
Tentu sobat memiliki alternatif, misalnya table dengan width tertentu. Namun, cara yang cukup praktis adalah kembali menggunakan CSS.
Perhatikan kembali kode HTML lengkap di atas. Baris <div class=shadow style="width:200px">
merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Style.
Sekian, semoga bermanfaat buat sobat-sobat blogger, salam
0 komentar:
Posting Komentar