Ini adalah
bagian 3 dari tulisan saya yang berjudul
Tutorial HTML5 CSS3, langsung saja ya..
Langsung saja ga pake lama kita akan isi
section sidebar kita.
1. isikan code berikut di dalam
<section id="sidebar">
<h3>Recent Photos</h3>
<section id="fotofoto">
<a href="#"><img src="images/sidebar-1.jpg"></a>
<a href="#"><img src="images/sidebar-2.jpg"></a>
<a href="#"><img src="images/sidebar-3.jpg"></a>
<a href="#"><img src="images/sidebar-4.jpg"></a>
<a href="#"><img src="images/sidebar-5.jpg"></a>
<a href="#"><img src="images/sidebar-6.jpg"></a>
</section>
di sini kita hanya membuat Heading 3 sebagai
judul widget, dan sebuah
section lagi untuk menampung gambar-gambar yang nantinya akan diberi efek.
coba buka di browser dan hasilnya:
sidebar masih belum sesuai letaknya:
2. WAKTUNYA CODE
CSS..... :D
#tengah #sidebar {
float: right;
width: 400px;
}
agar sidebar
lengket di kanan dan lebarnya
400px.
#tengah #sidebar h3{
font-family: Verdana;
font-size: 20px;
margin-bottom: 20px;
color: rgb(0, 158, 6);
}
untuk judul
widget-nya.
#tengah #sidebar #fotofoto a img{
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
border: 2px solid white;
margin: 1px;
opacity: 0.6;
-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
}
untuk memberi
efek pinggiran dan bayangan pada setiap gambar di
sidebar. tak lupa untuk memberi
transition (animasi) untuk properti
transform dan
opacity saat di
hover.
#tengah #sidebar #fotofoto a img:hover{
-webkit-transform: rotate(-10deg) scale(1.1);
opacity:1;
}
ketika gambar di hover,
opacity menjadi 1 (
tidak transparan), memutar
ke kiri 10 derajat, dan ukuran menjadi
110%.
hasilnya seperti ini:
Sampai di sini dulu
HTML5 bagian 3 nya, semoga bermanfaat, terima kasih, wassalam.
Artikel keren lainnya yang WAJIB dibaca:
