CSS3 box-shadow örnekleri

21 Nisan 2012

CSS3 özellikleri hayatımıza girmeye başladı. Artık projelerimizde CSS3 renk geçişini, metin gölgelendirme(text-shadow), kutu gölgelendirme(box-shadow) kullanabiliyoruz. Kullandıkça görüyoruz ki yeni özellikler güzel ancak eklemek için biraz daha fazla kod yazmak gerekiyor ve bazı durumları oluşturmak için bazı araçlar gerekiyor. Örneğin CSS Gradient Generator vs. gibi

Benzer bir durum kutu gölgelerinde(box-shadow) karşılaştım. Bazı kutu gölgeleme işlerini bir köşeye kaydetmeye başladım çünkü kodu o kadarda akılda kalıcı değil.

Sonra bunu yazı haline getirmek istediğimde gördüm ki zaten birçok kişi bu konuda yazı yazmış. Bende bunları toparlayıp bir yazı çıkarayım dedim. Bu yazıyı bir yere kaydedin lazım olacak muhakkak. Aslında bu örnekler yakında editörler tarafından sunulacaktır diye düşünüyorum.

kutulara gölge verme yazımızı okursanız kutu gölgeleri hakkında bilgi sahibi olabilirsiniz. Kutuları 4 köşe olduğunu düşünürsek.

4 Köşeye gölge vermek

Normal box-shadow değerleri dikey ve yatayda değerler verilince hep açılı gölgeler veriyor. Biz tüm kutunun etrafına gölge vermek için; blur değeri ve spread  değerini kullanıyoruz.

div {
	-webkit-box-shadow: 0 0 6px 4px black;
	-moz-box-shadow: 0 0 6px 4px black;
	box-shadow: 0 0 6px 4px black;
}

blur değeri spread  değerinden büyük ise farklı,

div {
	-webkit-box-shadow: 0 0 4px 6px black;
	-moz-box-shadow: 0 0 4px 6px black;
	box-shadow: 0 0 4px 6px black;
}

blur değeri spread  değerinden küçük ise farklı bir gölge efekti görüyoruz.

Çoklu Kenar Çizgisi Oluşturmak

Önceki makalede bahsettiğimiz gibi, çoklu kenar çizgileri oluşturmak için; spread  değeri yardımı ile yapılan bu etki için diğer değerler sıfırlanmalıdır.

div {
	border: 3px solid orange;
	-webkit-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	-moz-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
	box-shadow: 0 0 0 3px black, 0 0 0 6px red;
}

Tek Köşeye Gölge Vermek

Kutuların sadece x veya y köşelerinden göstermek için box-shadow tanımının sınırlarınız zorlamamız gerekiyor. Bu iş için bir kaç yöntem mevcut, ben burada hepsini paylaşıyoruz avantaj ve dezavantajlarını görerek karar vermek size kalmış.

1. Yöntem bir köşeye gölge verirken aynı zamanda diğer köşelere kenar çizgisi atayarak.

div {
	-webkit-box-shadow: 1px 0 2px black;
	-moz-box-shadow: 1px 0 2px black;
	box-shadow: 1px 0 2px black;
}

2. Yöntem Diğer köşelere herhangi bir kenar çizgisi veya gölge atamadan sadece bir köşeye gölge tanımlamak;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

Mantık olarak iki gölge tanımı yapıyoruz, birincisi spread ile kutu ardalan rengi ile aynı renkte 4px bir alan oluşturuyoruz, ikinci gölge tanımı ile de bu tanımladığımız boş alanın dışına çıkacak köşeye daha fazla değer verip dışarı çıkmasını sağlıyoruz.

3. Yöntem Bu örnekte kenar çizgisi oluşturulan yeni kutunun biraz içinde kalır.

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
	box-shadow: 0 0 0 4px white, 0 6px 4px black;
	border:1px solid #f00;
}

Eğer kenar çizgisi kullanılacaksa;

div {
	width:250px;
	height:250px;
	background: white;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	border:1px solid #f00;
}

Blur değeri kadar eksi spread değeri atayarak bu çözüm oluşturulmuştur.

4. Yöntem :before seçicisi yardımı ile absolute tanımlı gölge eklenir.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 0 7px 0 0;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 0px;
	right: 7px;
	bottom: 0;
	left: 0;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Çıkmasını istediğimiz kenara padding tanımı yapılır, :before seçicisi ile o köşeye ait kenar değeri padding ile aynı tanımlanır. :before seçicisine box-shadow tanımı yapılır yapılan padding tanımından fazla değer içermelidir.

3 Köşeye Gölge Tanımlama

Yukarıdaki 4.yönteme benzer bir kullanım ile yapılır.

div {
	width:250px;
	height:250px;
	position: relative;
	padding: 7px 0 7px 7px;
	overflow: hidden;
}

div:before {
	position: absolute;
	content: ' ';
	top: 7px;
	right: 7px;
	bottom: -7px;
	left: 7px;
	background-color: transparent;
	box-shadow: 0 0 5px black;
	border: 1px solid red;
}

Yukarıdaki yöntemin tersi yapılır ve kaldırılacak köşeye eksi değer atanır.

Sonuç

CSS3 bizi resim yönetme araçlarına bağlı olmaktan olduğunca kurtarmaya çalışıyor. Box-shadow bu kurtarma yöntemlerinin en güzellerinden birisi. Ben yukarıda genelde iş yaparken lazım olan örnekleri sergiledim. Kaynaklardaki linklerde box-shadow özelliği ile yapılmış çok farklı gölge uygulamaları mevcut, bu uygulamaları incelemekte yarar var. Tasarımları HTML’e çevirirken bu örneklerin aklımızın bir yanında durmasında fayda var. Tasarımda gördüğümüz birçok gölge uygulamasını box-shadow ile halledebiliyoruz. Birçoğunu diyorum, ama hepsi diyemiyorum, çünkü tasarımcıların sınırları belli olmadığı için hepsi demek zor.

box-sahdow müşteriyi patronu ikna edebildiğimiz yerlerde uygulayabildiğimiz özellikler, ama gerçekten arayüz geliştiriciye büyük kolaylıklar sağlıyor.

Kaynaklar

Daha fazla oku

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.