Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS box-shadow özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

58 views

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;

 

1.png

 

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

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...