Doğuhan ELMA tarafından Effects yayınlanma tarihi
106 görünüm
box-shadow CSS özelliği, bir öğeye gölge eklemenizi sağlar. Bu özellik, kullanıcı arayüzlerinde derinlik hissi oluşturmak, öğeleri vurgulamak veya basit estetik amaçlar için kullanılabilir. box-shadow özelliği, bir veya birden fazla gölge tanımlayabilir ve her gölge için yatay konum, dikey konum, bulanıklık yarıçapı, yayılma yarıçapı ve renk olmak üzere birkaç farklı değer alabilir.
box-shadow: [yatay konum] [dikey konum] [bulanıklık yarıçapı] [yayılma yarıçapı] [renk];
Yatay konum ve dikey konum (gerekli): Gölgenin öğeden ne kadar sağa ve aşağıya konumlandırılacağını belirtir. Negatif değerler gölgeyi sola veya yukarıya taşır.
Bulanıklık yarıçapı (isteğe bağlı): Gölgenin ne kadar bulanık olacağını belirtir. Daha büyük değerler daha fazla bulanıklık anlamına gelir. Bu değer 0 veya negatif olamaz.
Yayılma yarıçapı (isteğe bağlı): Gölgenin boyutunu büyütür veya küçültür. Pozitif değerler gölgeyi genişletirken, negatif değerler onu daraltır.
Renk (isteğe bağlı): Gölgenin rengini belirtir. Renk belirtilmezse, genellikle öğenin color özelliğinin değeri kullanılır.
.div-shadow { box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }
Bu örnekte, .div-shadow sınıfına sahip bir <div> öğesine yatayda 0px, dikeyde 4px konumlandırılmış, 8px bulanıklık yarıçapına sahip ve rgba(0, 0, 0, 0.2) renkli bir gölge eklenir. Gölge, öğeye derinlik hissi katmak ve onu sayfa üzerinde öne çıkarmak için kullanılır.
box-shadow özelliği, CSS3 ile tanıtılmıştır ve modern web tasarımında yaygın olarak kullanılan bir özelliktir. Birden fazla gölge eklemek için gölgeleri virgülle ayırarak listeyebilirsiniz:
.multiple-shadows { box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset; }
TailwindCSS:
Box Shadow
|
Class
|
Properties
|
|---|---|
| shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
| shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); |
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); |
| shadow-none | box-shadow: 0 0 #0000; |
Box Shadow Color
|
Class
|
Properties
|
|---|---|
| shadow-inherit | --tw-shadow-color: inherit; |
| shadow-current | --tw-shadow-color: currentColor; |
| shadow-transparent | --tw-shadow-color: transparent; |
| shadow-black | --tw-shadow-color: #000; |
| shadow-white | --tw-shadow-color: #fff; |
| shadow-slate-50 | --tw-shadow-color: #f8fafc; |
| shadow-slate-100 | --tw-shadow-color: #f1f5f9; |
| shadow-slate-200 | --tw-shadow-color: #e2e8f0; |
| shadow-slate-300 | --tw-shadow-color: #cbd5e1; |
| shadow-slate-400 | --tw-shadow-color: #94a3b8; |
| shadow-slate-500 | --tw-shadow-color: #64748b; |
devamı var
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.