Level 6
Pertemuan 7

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

Border Radius

🔵 Border Radius

img {
   border-radius : 8px ;
  /* Atau 50% untuk circle */}
border-radius: 0
Sharp corners (default)
border-radius: 50%
Perfect circle!

Box Shadow

✨ Box Shadow

Tambah depth dan dimension ke images dengan shadow:

img {
   box-shadow : 0 4px 6px rgba(0,0,0,0.1) ;
  /* 0=offset-x, 4px=offset-y, 6px=blur, 0.1=opacity */}
Shadow Values:
• Subtle: 0 2px 4px
• Medium: 0 4px 8px
• Heavy: 0 8px 16px

Hover Effects

🎯 Hover Effects (Interactive!)

Buat website interactive dengan hover effects:

.artwork img:hover {
   transform : scale(1.05) ;
  /* Atau rotate(2deg), translateY(-5px) */}
scale(1.05)
Zoom in sedikit
rotate(5deg)
Rotate gambar

Opacity & Combination

🌈 Combine All Effects

.artwork {
   border-radius : 10px ;
   box-shadow : 0 4px 6px rgba(0,0,0,0.1) ;
   transition : transform 0.3s ease ;
}

.artwork:hover {
   transform : scale(1.05) ;
   box-shadow : 0 8px 16px rgba(0,0,0,0.15) ;
}
transition: Membuat animasi smooth, bukan langsung terjadi! (0.3s = 300 milliseconds)

Activity

🎯 Your Activity

  1. Add rounded corners
    border-radius: 8px ke .artwork elements
  2. Add box shadow
    Pilih shadow strength (subtle/medium/heavy)
  3. Add hover scale effect
    :hover { transform: scale(1.05) }
  4. Add smooth transition
    transition: transform 0.3s
  5. Test hover!
    Hover over images → lihat smooth animation ✨