CSS3 box-shadow örnekleri

[Muratbaykam]

Forum Taraması : Tamamlandı , Böyle bir konu bulunamadı ✓ 
Konu Tarafımca kolaylaştırmak amacıyla düzenlendi . Kodlarınızı denemek istiyorsanız : muratbaykamhtml.10tl.net adresini ziyaret ediniz . Alıntıdır .

4 Köşeye gölge vermek - Nasıl verilir ?

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.

Kod: Tümünü Seç Tümünü Kopyala

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ı,

Kod: Tümünü Seç Tümünü Kopyala

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

Kod: Tümünü Seç Tümünü Kopyala

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.

Kod: Tümünü Seç Tümünü Kopyala

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;

Kod: Tümünü Seç Tümünü Kopyala

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;
}

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

Kod: Tümünü Seç Tümünü Kopyala

http://theburningmonk.com/2010/12/having-fun-with-css3-box-shadow-property/ (box-shadow özelliği)
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://matthamm.com/box-shadow-curl.html (kelebek köşe örneği)
http://www.webdesignshock.com/css3-box-shadow/
http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/
http://blog.syndicate-fx.com/code-snippets/css3-boxshadow-effects/
http://www.ballyhooblog.com/realistic-css3-box-shadows/
http://www.sitepoint.com/pure-css3-paper-curl/
http://www.css3.info/preview/box-shadow/
http://www.wewillbeok.com/likeacastshadow/ (farklı bir örnek)
http://toolboxdigital.com/2011/03/css3-3d-gradient-box/
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/ (makaleye örnek)
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ Örnekler Sayfası
http://translate.google.com/translate?hl=en&sl=auto&tl=en&u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F1338-css3-box-shadow-ombre.html (box-shadow güzel)
http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow (güzel incele)