CSS Battle — Target #2 — Carrom
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Merhaba arkadaşlar. CSS Battle serisinin ikinci yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in ikinci challenge’ına bakıyor olacağız. Hadi başlayalım!
Target #2 — Carrom
Challenge’ın linki:
Hedeflenen Tasarım:
Kullanacağımız renkler:
- Öncelikle body’nin background özelliğine #62374e rengini vererek arka plan rengimizi belirleyelim.
Şimdi kutularımızı oluşturalım. Hedeflenen tasarımı yapabileceğimiz benim aklıma gelen 2 yol bulunuyor:
1- Bunlardan bir tanesi 4 tane kutu oluşuturup bu kutuların ekranda konumlandırmasını sağlamak veya
2- Tek bir kutu oluşturup CSS tarafında box-shadow özelliğini kullanarak 3 farklı kutu daha oluşturup konumlandırılmalarını sağlamak.
Bu yazımızda ikinci çözümün detayına değinmek istiyorum :)
Tek bir div ile 4 kutu nasıl oluşurabileceğimize bakalım.
Öncelikle ilk kutumuzun ekrandaki konumunu belirleyelim.
- Bir tane div elemanı oluşturduk.
- div’in width ve height özelliklerine değerlerine 50px verdik.
- div’in background özelliğine de #fdc57b rengini verdik.
margin özelliği ile kutunun etrafına boşluk atadık ve ilk kutunun konumlandırılılmasını sağladık.
- Burada margin 4 parametre almaktadır.
margin: /* top | right | bottom | left */- ilk 3 parametreye 50px değerini vererek elemanın üstünden sağından ve alt kısmından, 42px değeri ile de soldan boşluk verilmesini sağlarız.
box-shadow ile diğer kutuların oluşturulmasını sağlayabiliriz.
- box-shadow CSS özelliği ile, oluşturmuş olduğunuz eleman veya elemanlara bir gölgelendirme efekti verilmesi sağlanır.
- box-shadow’un ilk iki parametresi gölgenin, x ve y koordinatlarını belirlemektedir.
- Bu challenge’ımızda div’in ilk konumunu belirledikten sonra diğer kutuların konumlarını bu iki parametreye göre belirleriz.
- Her bir gölgelendirme efektini virgülle ayırarak, bir elemana birden fazla gölgelendirme atayabiliriz.
box-shadow’un diğer parametrelerinden de bahsetmiş olduğum mini yazıyı şuradan inceleyebilirsiniz 👇
Böylelikle ikinci challenge’ımızı tamamlamış olduk!
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
