CSS3 ile nesnelere gölge ekleme (box-shadow)

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.

Buna benzer yazıları posta kutunuzda ister misiniz?
İsminizi ve e-posta adresinizi yazın ve yayınladığım yazıları e-posta kutunuza yollayayım.
Kişisel bilgilerimi kendi isteğim ile paylaştığımı onaylıyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir