Atölye › Trafik lambası › 4/12. adım

Yuvarlak lambalar

Ne yapıyoruz

Her lamba gri bir daire olsun. CSS'te daire çizmenin yolu: kare bir kutu yap ve köşelerini yüzde 50 yuvarlat. Köşeler o kadar yuvarlanır ki kare daireye döner.

```css
.lamp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #555;
}
```

Ne işe yarıyor

• width: 60px; height: 60px; → eni boyu eşit: kare.
• border-radius: 50%; → her köşeyi kenarın yarısı kadar yuvarlat: kare daire olur. (px yerine % kutunun boyuna göre ölçer.)
• background: #555; → orta gri: sönük bir lamba.

Sıra sende

.light kuralının altına bir boş satır bırakıp .lamp kuralını yaz. Çalıştır: üç gri daire görmelisin.

Beceriler: CSS ile görünüm

← İçine üç lamba Ortada alt alta diz →

Tüm adımlar

1. Boş bir kutu
2. Kutuya biçim ver
3. İçine üç lamba
4. Yuvarlak lambalar
5. Ortada alt alta diz
6. Kırmızı, sarı, yeşil
7. Söndür
8. Bir lamba için zaman çizelgesi
9. Çizelgeyi oynat
10. Sırayla
11. Hız için tek ayar
12. Kendin yap: direk