CSS - Box Shadow | Detaylı & Resimli // Ar-Ge Kulübü
Merhaba dostlar, yeni bir konuma hoşgeldiniz. Bugün sizlere box-shadow yapısından bahsedeceğim. Öncelikle derslerimizde sürekli tekrar ediyoruz, yine edelim. CSS HTML kodlarını kutu olarak görür ve bu kutulara stil verir. Yani box-shadow da aslında kutu gölgesidir. Kutu gölgesi ile birbirinden farklı çok güzel tasarımlar ortaya çıkabilir. Yani bu da önceki derslerimiz gibi önemli bir konu. box-shadow sayesinde çok güzel butonlar ve aklınıza gelebilecek her şeyi oluşturabiliriz. Safi desen bile oluşturabiliriz. Buton üzerinden gitmeyi hedefliyorum bugün, haydi başlayalım!
Evet arkadaşlar, her şeyden önce komutumuzu bir tanımamız gerekiyor. Öncelikle, box-shadow komutunun yapısı nedir? Onu bir öğrenelim!
Komutun genel kullanılışı: box-shadow; h-shadow v-shadow blur spread color inset;
şeklindedir. Gelin bir de box-shadow'un modüllerini tanıyalım!
h-shadow: Gölgenin yatay boyutudur.
v-shadow: Gölgenin dikey boyutudur.
blur: Gölgeye blur uygular. (Yumuşatır)
spread: Gölgenin tüm yönlerde genişlemesini sağlar.
color: Gölgenin rengini belirler.
inset: Gölgeyi nesnenin iç tarafına taşır.
Evet, öncelikle eski projemizden devam ediyoruz. Hatırlarsanız en son bir buton koymuştuk. Bu buton Anasayfa diye bir butondu. Kodları hâlâ duruyor. Ondan devam edelim. Ben butonun arkasına bir box-shadow uygulamak istiyorum. Bu yüzden butonun CSS koduna box-shadow ekliyorum. Peki yapıyı hatırlıyor muyuz? Merak etmeyin, uygulama yaptıkça aklınızda kalacak. Gelin beraber tekrar edelim:
box-shadow: h-shadow(yatay gölge) v-shadow(dikey gölge) blur(yumuşaklık) spread(uzama) color(renk) inset(iç-dış)
Öncelikle ben yatay gölgeyi 3px, dikey gölgeyi 3px ve blurumu 47px yapıyorum. Ardından spreadımı deneme yanılma yoluyla nasıl daha güzel olabilir diye bulmaya çalışıyorum. 10px şimdilik idare eder diye kafama koyup spread değerimi 10 olarak atıyorum. Ardından rengimi seagreen olarak atıyorum. Gölgenin dışta olmasını istiyorum, butonum bu sayede çok güzel bir görünüm elde edebilir. Yani elde ettiğim kod:
şeklinde oluyor.
Buton görünümümüz de bu şekilde oluyor:
Evet arkadaşlar, box-shadow korkulacak gibi bir yapı değil aslında. CSS stilleri arasında en çok beğendiğim komutlardan birisi. Kullandıkça hayal gücüm açılıyor ve aklıma çook çook güzel senaryolar geliyor. Yani web kodlamanın güzelliğini anlatamam, yaşamak lazım. Umarım beraber yaşamaya devam ederiz, sizinle beraber Frontend de güzel ilerleyeceğimi düşünüyorum. Umarım konular yararlı oluyordur, ayrıca yaptığınız buton stillerini yorumlarda paylaşabilirsiniz. Biz de sizin stillerinizden ilham alabiliriz. ^^
Ar-Ge Kulübümüz açıldı, @Ɲémesis hocam harika bir kulüp kurmuş. Sizi de bu kulübe bekliyoruz. Birlikte kodlarken eğlenebilir, harika projelere imza atabiliriz. Ayrıca bu kulüpte başarılı olan arkadaşlar yazılım ekibine de girebilir. Başvurmak için:
https://www.turkhackteam.org/konular/ar-ge-kulubu-alimlar-acik.1949976
Hepinize iyi günler diliyorum.
Merhaba dostlar, yeni bir konuma hoşgeldiniz. Bugün sizlere box-shadow yapısından bahsedeceğim. Öncelikle derslerimizde sürekli tekrar ediyoruz, yine edelim. CSS HTML kodlarını kutu olarak görür ve bu kutulara stil verir. Yani box-shadow da aslında kutu gölgesidir. Kutu gölgesi ile birbirinden farklı çok güzel tasarımlar ortaya çıkabilir. Yani bu da önceki derslerimiz gibi önemli bir konu. box-shadow sayesinde çok güzel butonlar ve aklınıza gelebilecek her şeyi oluşturabiliriz. Safi desen bile oluşturabiliriz. Buton üzerinden gitmeyi hedefliyorum bugün, haydi başlayalım!
Evet arkadaşlar, her şeyden önce komutumuzu bir tanımamız gerekiyor. Öncelikle, box-shadow komutunun yapısı nedir? Onu bir öğrenelim!
Komutun genel kullanılışı: box-shadow; h-shadow v-shadow blur spread color inset;
şeklindedir. Gelin bir de box-shadow'un modüllerini tanıyalım!
h-shadow: Gölgenin yatay boyutudur.
v-shadow: Gölgenin dikey boyutudur.
blur: Gölgeye blur uygular. (Yumuşatır)
spread: Gölgenin tüm yönlerde genişlemesini sağlar.
color: Gölgenin rengini belirler.
inset: Gölgeyi nesnenin iç tarafına taşır.
Evet, öncelikle eski projemizden devam ediyoruz. Hatırlarsanız en son bir buton koymuştuk. Bu buton Anasayfa diye bir butondu. Kodları hâlâ duruyor. Ondan devam edelim. Ben butonun arkasına bir box-shadow uygulamak istiyorum. Bu yüzden butonun CSS koduna box-shadow ekliyorum. Peki yapıyı hatırlıyor muyuz? Merak etmeyin, uygulama yaptıkça aklınızda kalacak. Gelin beraber tekrar edelim:
box-shadow: h-shadow(yatay gölge) v-shadow(dikey gölge) blur(yumuşaklık) spread(uzama) color(renk) inset(iç-dış)
Öncelikle ben yatay gölgeyi 3px, dikey gölgeyi 3px ve blurumu 47px yapıyorum. Ardından spreadımı deneme yanılma yoluyla nasıl daha güzel olabilir diye bulmaya çalışıyorum. 10px şimdilik idare eder diye kafama koyup spread değerimi 10 olarak atıyorum. Ardından rengimi seagreen olarak atıyorum. Gölgenin dışta olmasını istiyorum, butonum bu sayede çok güzel bir görünüm elde edebilir. Yani elde ettiğim kod:
Kod:
box-shadow: 3px 3px 47px 10px seagreen;şeklinde oluyor.
Buton görünümümüz de bu şekilde oluyor:
Evet arkadaşlar, box-shadow korkulacak gibi bir yapı değil aslında. CSS stilleri arasında en çok beğendiğim komutlardan birisi. Kullandıkça hayal gücüm açılıyor ve aklıma çook çook güzel senaryolar geliyor. Yani web kodlamanın güzelliğini anlatamam, yaşamak lazım. Umarım beraber yaşamaya devam ederiz, sizinle beraber Frontend de güzel ilerleyeceğimi düşünüyorum. Umarım konular yararlı oluyordur, ayrıca yaptığınız buton stillerini yorumlarda paylaşabilirsiniz. Biz de sizin stillerinizden ilham alabiliriz. ^^
Ar-Ge Kulübümüz açıldı, @Ɲémesis hocam harika bir kulüp kurmuş. Sizi de bu kulübe bekliyoruz. Birlikte kodlarken eğlenebilir, harika projelere imza atabiliriz. Ayrıca bu kulüpte başarılı olan arkadaşlar yazılım ekibine de girebilir. Başvurmak için:
https://www.turkhackteam.org/konular/ar-ge-kulubu-alimlar-acik.1949976
Hepinize iyi günler diliyorum.
