Türkiye'nin En İyi Forum Sitesi
Css kutuları nasıl kullanılır? - Yazdırılabilir Sürüm

+- Türkiye'nin En İyi Forum Sitesi (https://fluedebiyat.com)
+-- Forum: Kodlama Dilleri (https://fluedebiyat.com/forumdisplay.php?fid=1)
+--- Forum: CSS (https://fluedebiyat.com/forumdisplay.php?fid=3)
+--- Konu: Css kutuları nasıl kullanılır? (/showthread.php?tid=5)



Css kutuları nasıl kullanılır? - admin - 03-03-2020

Hiç bu kadar çok geliştirici bile frontend geliştiriciler CSS kullanmaktan kaçınmak eğilimindedir neden kendinize sordunuz. Geliştiriciler, Angular, React, Vue gibi bir çerçeve ile yeni bir şey yapmak zorunda kaldıklarında çok heveslidirler.js... ya da yeni bir teknoloji ya da bir dil öğrenirken, CSS hakkında konuştuğumuzda çok daha az heveslidirler. Ve sanırım nedenini biliyorum! CSS'DE standart yok. Bir şeyi yapmanın birçok yolu vardır ve itiraf etmeliyim ki, sinir bozucu olabilir çünkü yaptığınız şeyin iyi mi kötü mü olduğunu bile bilmiyorsunuz. Ve bugün yazımım size CSS'DE yapabileceğiniz en basit şeylerden birini sunuyor: bir kutuya bir kenarlık ekleme. Açıkçası, bu basit, ama size (umarım) bunu yapmanın yeni bir yolunu sunacağım...

Kenarlık özelliğini kullanma
Bu nedenle, bir kutuya bir kenarlık eklemek, border özelliğini kullandığınızda oldukça basittir. Küçük bir kare çizerek ve ona kırmızı bir kenarlık ekleyerek ilk temel örneğe başlayalım. Ben volontarly div bazı içerik eklemek, içinde küçük bir dolgu ile, makalenin bir sonraki için gerekli olacak:


Ama bu özelliği sadece sınırları çizmek için kullanabileceğinizi biliyor muydunuz? Bu sadece border özelliğini kullanmaktan daha zordur, ancak daha önce gördüğümüz gibi bazı garip sorunları çözebileceksiniz. İşte box-shadow özelliğinin özellikleri:

kutu-gölge: inset / ofset - x / ofset-y / blur-radius | spread-radius / color

gölge çerçeve içinde veya dışında olup olmayacağını girinti Belirtir. Bu özelliği atlayabilirsiniz.
offset-x: gölge efektinin uzunluğunu ayarlayabilirsiniz. Gölgeyi sola işlemek için negatif değerler belirtebilirsiniz.
offset-y: gölge efektinin uzunluğunu ayarlayabilirsiniz. Gölgeyi en üste işlemek için negatif değerler belirtebilirsiniz.
bulanıklık-yarıçapı: bulanıklığın uzunluğunu belirtir, böylece gölge daha büyük ve daha hafif olur. Bu bizim örneğimizde kullanacağımız bir şey değil.
yayılma yarıçapı: gölgelerinizi genişletmek (pozitif değerlerle) veya küçültmek (negatif değerlerle) için bu özelliği kullanın.
renk: gölge rengini ayarlayın!
Yani burada kutu-gölge özelliği ile çizim sınırlarının küçük bir özeti:


Sonuç

Bu, CSS'DE pek çok olasılığa sahip olduğunuz bir örnektir. Sınır kullanmak basittir ve kullanım durumlarınızın çoğuna cevap verebilir, ancak bazen, yukarıdaki gibi daha iyi bir şeye ihtiyacınız olacak ve box-shadow sorunlarınızı çözebilir. Bu sadece bir örnektir, box-shadow kullanırken başka durumlar da yararlı olabilir. Örneğin, yalnızca bir kenarlıktan daha fazlasını istediğinizde, kutu gölgesi size yardımcı olabilir.