CSS-gölge: nasıl

Karanlık olmadan gölge olmadan hiçbir ışık yok formu bulunmamaktadır. denilen kadınlar için bile temel makyaj aracı "gölge". sayfalarınıza güzellik getirmek istiyorsanız, doğru ağırlık vermeleri gerekmektedir - bu tabi CSS-gölge ekleyin.

Aşağıda sunulan malzeme size gölge yüklemek veya CSS kodunu kullanarak görüntüleri engellemek öğrenmek yardımcı olacaktır.

CSS-gölge. sözdizimi

bir blok ve gölge - - Bu kendisi bir gölge kutu Aslında kutu gölge.

ayraç yazılı Kodu:

{Kutu gölge: 11px 22px 33px 44px # 333333;}.

Çizgi birimi gölge piksel yarıçapı ile Standart olarak ayarlandığında söyler. Veriler, aşağıdaki gibi deşifre edilir:

• 11px - gölge) X eksenindeki bloğuna göre (pozitif değer (20 piksel ofset Sağ gölge, negatif (-37px) kayacak - sola);
• 22px - (gölge aşağı negatif (-17px) bir kayma pozitif değer (5px) kurşun - yukarı) blok Y-eksenine göre gölge yer değiştirme;
• 33px - bu bulanıklık parametre sayısı daha yüksek, daha güçlü etkisi;
• 44px - yarıçap gölgeleri ve is doğru orantılıdır;
• # 333333 - gölgede boyanmıştır renk,.

Son üç parametre isteğe bağlıdır ve sadece dizede ihmal edilebilir, örneğin, {kutu gölge: 10px 13 piksel; } - .. Bu tip bir hat (gölge renk bloğunda metin rengi aynıdır) doğru değildir.

Böylece, sitenizin sayfalarında gölgeler oluşturarak bir zorluk, ancak oluşturabilir birçok güzel görünümlü efektler olduğunu! Tasarım, her detay, her detay önemlidir, çünkü çocuğunuz benzersiz, eşsiz olun. Burada, özel bir şey, görünüyor, ama çok daha ilginç ve çekici.

o kodlama göre bir gölge CSS-bloğu gibi görünüyor, bazı açıklayıcı örnekler göz önünde bulundurun:

1. {Box-gölge: 25px 25px;} - CSS-gölge ofset ekseni ile 25 piksel.
2. {Box gölge: 25 piksel 25 piksel 10px;} - ofset CSS gölge 25 piksel ve kenarları 10 piksel bulanıklık eksenleri.
3. {Box gölge: 25 piksel 25 piksel 10px 5px;} - 25 piksel bulanık kenarları 10 piksel ve 5 önceden belirlenmiş piksel yarıçap CSS-gölge ofset ekseni
4. {Box gölge: 25 piksel 25 piksel 10px 5px # 9e9e9e;} - CSS gölge bulanıklık 10 piksel, 5 piksel ve renk çapındaki belirtmek kenarları, eksenin 25 piksel ofset.

gölge

Daha güzel, zarif ve özgün tonları farklı etkilere sahip yaratmak. Sen kutu markası iç gölgesi. Her zamanki gibi gidecek "içerlek", parametrelerinde ek açıklamanın parametrelerini belirlemek için yeterli kod:

{Box-gölge: gömme 4 piksel 2px # 9e9e9e 6px;}.

Kodda tamamen farklı parametrelere sahip birkaç gölgeler, onlar (gölgeler) virgülle ayırarak listelenmektedir bloğunun altına koymak mümkündür:

{Box-gölge: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

gölge resimler

birimlere ek olarak sitede ayrıca çok daha ilginç gölgeler ile bakmak bu unsurların hepsi - kesinlikle resimler, fotoğraflar, arka planlar olacaktır. Önceden görüntü editörleri resim çizmek ve gölgeler ile zaten bir sayfaya yapıştırabilirsiniz. Ama, öncelikle bunun nedeni grafiklerle çalışma becerilerinin eksikliği, ikincisi, resmin herhangi manipülasyon, ona eklenir "ağırlık" ve böyle bir resim de sayfa yüklendiğinde yavaşlayabilir dahil olmak üzere çeşitli nedenlerle her zaman mümkün değildir. Bu durumda, bir CSS-gölge görüntüleri yapabilirsiniz.

Bu sorunun en basit ve sözdizimsel olarak doğru çözüm - biriminin kurulması, senin resimde arka plan Kotormo olacaktır. Daha sonra, birim için gerekli gölge yapmak ve onlar background-görüntü üzerinde görüntülenir:

• .block1 {kutu gölge: 0 0 11px 9px # 9e9e9e ek; en: 480 piksel x; Yükseklik: 360 piksel; Arka plan: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

Bu örnekte, bulanıklık yarıçapı, tanımlanmış renk, yüksekliği ve blok genişliği, eksenlerin sapması ile bir iç gölge oluşturmak ve arka plan (arka plan) kuartinku dizayn. Sonuç olarak, biz iç gölge resmini olsun.

en önemlisi oldukça basit ama heyecan verici ve - - CSS-kodu kullanarak gölgeler oluşturmak için Kabul yararlı egzersiz.