Sekarang kita akan melanjutkan ke **CSS3** dan menjelajahi beberapa konsep yang lebih lanjut untuk meningkatkan kemampuan styling kamu.
** Advanced CSS Concepts**
1. **Grid Layout**
- CSS Grid adalah metode layout yang lebih kompleks dan powerful dibandingkan Flexbox. Ini memungkinkan kamu untuk membuat layout dua dimensi yang fleksibel.
- Contoh:
```css
.grid-container {
display: grid; /* Mengaktifkan grid layout */
grid-template-columns: repeat(3, 1fr); /* Membagi menjadi 3 kolom yang sama */
gap: 10px; /* Jarak antar item */
}
```
- HTML untuk grid:
```html
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
```
2. **Responsive Design**
- Responsive design memungkinkan halaman web beradaptasi dengan berbagai ukuran layar.
- Menggunakan media queries:
```css
@media (max-width: 600px) {
h1 {
font-size: 20px; /* Mengubah ukuran font pada layar kecil */
}
}
```
3. **Pseudo-classes dan Pseudo-elements**
- Pseudo-classes digunakan untuk menambahkan style pada elemen berdasarkan status tertentu.
- Contoh:
```css
a:hover {
color: red; /* Mengubah warna saat hover */
}
```
- Pseudo-elements digunakan untuk menambahkan style pada bagian tertentu dari elemen.
- Contoh:
```css
p::first-line {
font-weight: bold; /* Mengubah tebal hanya pada baris pertama paragraf */
}
```
4. **Transisi dan Animasi**
- CSS memungkinkan kamu untuk membuat transisi halus antara dua state.
- Contoh transisi:
```css
button {
transition: background-color 0.5s ease; /* Transisi background-color selama 0.5 detik */
}
button:hover {
background-color: blue; /* Mengubah warna saat hover */
}
```
- Animasi:
```css
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animated {
animation-name: example;
animation-duration: 4s;
}
```
5. **Positioning**
- Menggunakan properti positioning untuk mengatur posisi elemen:
- `static`: Posisi default.
- `relative`: Posisi relatif terhadap posisi normal.
- `absolute`: Posisi relatif terhadap elemen terdekat yang diposisikan (relative, absolute, atau fixed).
- `fixed`: Posisi tetap relatif terhadap viewport.
- `sticky`: Posisi yang bergantung pada scroll.!