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.
0 Komentar untuk "Tutorial HTML5 CSS3 - Bagian 3"