CSS3 Box Shadow Kullanarak 10 Yaratıcı Teknik

CSS3 web geliştirmede son birkaç yıl içinde muazzam sayıda gelişme gördük. İnternet'teki popüler web siteleri, yuvarlatılmış köşeler ve mobil uyumlu medya sorguları gibi birçok benzersiz stilleri birleştirmeye başladı. Fakat daha da önemlisi, bu, yaratıcı arayüzlerin birkaç dakika içinde prototipleştirilmesine kapı açtı.

Bu yazımda paylaşmak istiyorum Parlak CSS3 kutu gölge tasarımları ile ilgili 10 kod parçacığı. Kodun nasıl çalıştığını ve her kutu gölgesini kendi web sitenize nasıl uygulayabileceğinizi açıklayacağım.

Bu stillerin tümü, diğer popüler web sitelerinden gelen büyük tasarım etkisine atfedilir. Bu, mevcut web geliştiricilerinin web tasarımının geleceği için nasıl etkili trendler oluşturduğuna harika bir örnektir..

1. Sabit Üst Araç Çubuğu

Rumen sosyal medya hizmeti Trilulilu, web sitesinin tamamında hareketli bir araç çubuğu kullanıyor. Bu hızlı bir şekilde kullanarak oluşturulabilir pozisyon: sabit; herhangi bir üst çubuk elemanı üzerindeki özellik. Ancak bu ek kutu gölge efekti tamamen yeni bir seviyeye getiriyor.

#banner position: sabit; yükseklik: 60px; genişlik:% 100; üst: 0; solda: 0; kenarlık üstü: 5px katı # a1cb2f; arkaplan: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); kutu-gölge: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-endeksi: 999999;  #banner h1 satır yüksekliği: 60 piksel;

Box-shadow özelliğinin aslında oldukça basit bir değer birleşimi ile kurulduğunu fark edeceksiniz. Gölge kutunun altına düşer ve her iki tarafta 3 piksel bulanıklık.

Kullanabiliriz RGBA () gölgeye hafif opaklık uygulamak için yöntem, bu yüzden eleman çok karanlık görünmüyor. Ziyaretçinizin dikkatini kesinlikle çekecek ince bir eklenti.

gösteri

2. Alt Gezinme Açılır Penceresi

İşte skaler açılır menüde uygulanan bir başka yaratıcı kutu gölge yöntemi. Girişimci üzerinde, ana gezinti bağlantılarının her birinin üzerine geldiğinizde de benzer bir etki görülebilir. Bu kesinlikle yapılandırmak için biraz zor ama sabrına değer.

#bar ekran: blok; yükseklik: 45px; arkaplan: # 22385a; dolgu üst: 5px; marj-alt: 150 piksel; pozisyon: göreceli;  #bar ul marj: 0 piksel 15 piksel; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li arka plan: # 22385a; Ekran bloğu; yazı tipi boyutu: 1.2em; pozisyon: göreceli; şamandıra: sol;  #bar ul li a görüntüleme: blok; renk: # fffff7; hat yüksekliği: 45px; yazı tipi ağırlığı: kalın; dolgu maddesi: 0px 10px; metin dekorasyon: yok; z-endeksi: 9999;  #bar ul li a: vurgulu, #bar ul li a.selected color: # 365977; arkaplan: #fff; sınır-üst-sol yarıçapı: 3px; sınır-üst-sağ yarıçapı: 3px; -webkit-border-top-sol-yarıçapı: 3px; -webkit-border-top-sağ-yarıçapı: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav ekran: blok; solda: 14 piksel; üst: 48 piksel; z-endeksi: -1; genişlik: 500px; pozisyon: mutlak; yükseklik: 90px; sınır: 1px katı # edf0f3; sınır-üst: 0; dolgu maddesi: 10px 0 10px 10px; taşma: gizli; -moz-sınır-yarıçapı-alt-yarıçapı: 3px; -moz-sınır-yarıçapı-alt-yarıçapı: 3px; -webkit-border-sol-yarıçapı: 3px; -webkit-border-alt-sağ yarıçapı: 3px; sınır-alt-sağ yarıçapı: 3px; sınır-alt-sağ yarıçapı: 3px; -moz-kutu-gölge: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); kutu-gölge: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Güç = 3, Yön = 180, Renk =" # 333333 ")"; filtre: progid: DXImageTransform.Microsoft.Shadow (Güç = 3, Yön = 180, Renk = "# 333333");

Gezinti bağlantıları, seçildiğinde veya farenin üzerindeyken rengini değiştirmek için stillendirilebilir. Ayrıca, bağlantılara ve açılır menü kutusunun üstüne bazı kenarlıklar ekliyorum. Bu, her yerdeki sert kenarlardan ziyade daha güzel bir his verir. Ben de iyi kullanıyorum -ms-filtre ve filtre yalnızca Internet Explorer’a ait olan mülkler.

Tam bir navigasyon sistemi kurarsanız, ekran setini hiçbiri olarak değiştirebilir ve sayfa yüklendikten sonra menüyü gizleyebilirsiniz. Sonra bazı jQuery'leri kullanarak .hover () olayını hedefleyebilir ve subnav çubuğunu güncellenmiş içerikle görüntüleyebilirsiniz..

gösteri

3. Parlak Gölge Düğmesi

Bu, muhtemelen sayfada ne kadar dinamik göründüğü nedeniyle yarattığım en sevdiğim stillerden biri. Söyleyemezseniz, bu ilk girişinizden sonra YouTube'un ana sayfasında bulunan küçük mavi düğmedir..

blues renk: #fff; genişlik: 190 piksel; yükseklik: 35 piksel; imleç: işaretçi; font ailesi: Arial, Tahoma, sans-serif; yazı tipi boyutu: 1.0em; yazı tipi ağırlığı: kalın; -moz-sınır yarıçapı: 2px; -webkit-border-radius: 2px; sınır yarıçapı: 2 piksel; sınır genişliği: 1 piksel; kenarlık rengi: # 0053a6 # 0053a6 # 000; arka plan rengi: # 6891e7; arkaplan-görüntü: -moz-lineer-gradyan (üst, # 4495e7 0, # 0053a6% 100); background-image: -ms-linear-gradyan (üst, # 4495e7 0, # 0053a6% 100); background-image: -o-lineer-gradyan (üst, # 4495e7 0, # 0053a6% 100); background-image: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durağı (0, # 4495e7), renk durağı (% 100, # 0053a6)); arka plan görüntüsü: -webkit-linear-gradient (üst, # 4495e7 0, # 0053a6% 100); arka plan görüntüsü: doğrusal gradyan (aşağıya doğru, # 4495e7 0, # 0053a6% 100); metin-gölge: 1 piksel 1 piksel 0 rgba (0, 0, 0, 6); -moz-box-shadow: iç metin 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: gömülü 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: içindekiler 0 1px 0 rgba (256, 256, 256, .35); kutu-gölge: gömülmüş 0 1px 0 rgba (256, 256, 256, .35); filtre: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-kutu-gölge: gömülü 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: gömülü 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: gömülü 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); kutu-gölge: gömülü 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); filtre: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); arkaplan-görüntü: -moz-lineer-gradyan (üst, # 3a8cdf 0, # 0053a6% 100); background-image: -ms-linear-gradyan (üst, # 3a8cdf 0, # 0053a6% 100); arkaplan-görüntü: -o-lineer-gradyan (üst, # 3a8cdf 0, # 0053a6% 100); arka plan görüntüsü: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (0, # 3a8cdf), renk durdurma (% 100, # 0053a6)); arka plan görüntüsü: -webkit-linear-gradient (üst, # 3a8cdf 0, # 0053a6% 100); arka plan görüntüsü: doğrusal gradyan (en alta, # 3a8cdf 0, # 0053a6% 100);  .blues: active kenarlık rengi: # 000 # 002d59 # 002d59; -moz-box-shadow: gömülü 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: gömülü 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: ek 0 0 piksel 3 piksel rgba (0,0,0,0,2), 0 1 piksel 0 #fff; kutu-gölge: gömülü 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filtre: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); arkaplan-görüntü: -moz-lineer-gradyan (üst, # 005ab4 0, # 175ea6% 100); background-image: -ms-linear-gradyan (üst, # 005ab4 0, # 175ea6% 100); arka plan görüntüsü: -o-doğrusal-gradyan (üst, # 005ab4 0, # 175ea6% 100); background-image: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (0, # 005ab4), renk durdurma (% 100, # 175ea6)); background-image: -webkit-linear-gradyan (üst, # 005ab4 0, # 175ea6% 100); arka plan görüntüsü: doğrusal gradyan (aşağıya doğru, # 005ab4 0, # 175ea6% 100);

Bütün düğme kodu bakılacak çok şey var, ama deniyoruz mümkün olduğunca çok sayıda tarayıcıyı desteklemek. MS Internet Explorer 7+ için beraberinde gelen desteği içeren metin gölgeleri ve kutu gölgeleri vardır. Ayrıca biz ayarlıyoruz arka plan görüntüsü çok sayıda satıcıya özel ön ekin üzerinde CSS3 degradeleri olan özellik.

Ama bu tasarım stilini seviyorsanız vurgulu ve aktif devletler de dikkatinizi çekecek. Kısaca, daha koyu görünmesi için arka plan gradyanını güncellerken, aşağı bastırırken içine bazı gölgeler içerecek şekilde kenarlığı güncelliyoruz..

Düğmede görüntü olmadığından onaltılı değerleri güncelleyebilir ve bunu pratikte herhangi bir renk düzenine karıştırmak için morph olarak ayarlayabilirsiniz..

gösteri

4. Bildirimler Flyout Menüsü

Facebook'un büyük bir kullanıcısı değilim, ancak bazı UI tekniklerini yeniden tasarımlarından farkettim. Bu bilgilendirme menüsü, bildirimlerinizle veya ana sayfada bulunan arkadaşlık istekleri açılır pencereleriyle karşılaştırılabilir..

.çıkış genişlik: 310 piksel; kenar boşluğu: 10 piksel; yazı tipi boyutu: 11 piksel; pozisyon: göreceli; font ailesi: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; arka plan rengi: beyaz; dolgu maddesi: 9px 11px; arkaplan: rgba (255, 255, 255, 0.9); sınır: 1px katı # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); kutu-gölge: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-sınır yarıçapı: 3px; sınır yarıçapı: 3px;  .flyout #tip background-image: url ('images / tip.png'); arka plan tekrarı: no-tekrarı; arkaplan büyüklüğü: auto; yükseklik: 11px; pozisyon: mutlak; üst: -11px; sol: 25 piksel; genişlik: 20px;  .flyout h2 text-transform: büyük harf; renk: # 666; yazı tipi boyutu: 1.2em; alt dolgu: 5px; marj-alt: 12 piksel; sınır-alt: 1 piksel katı #dcdbda;  .flyout p dolgu malzemesi: 25 piksel; yazı tipi boyutu: 1.1em; renk: # 222;

Burada görüntülenecek bir sürü yeni zihin bükme kodu yok. Küçük kullanıyorum .bahşiş araç ipucu üçgeni eklemek için dahili bir yayılma elemanı içeren sınıf. Saf CSS3 üçgenleri oluşturmak mümkündür, ancak tahmin edebileceğiniz gibi bu yöntem kolay değildir. Bu yöntemi tercih ederseniz, birlikte bir şeyleri kesmek faydalı olabilir. Ancak CSS3 rotasyon özellikleri her yerde desteklenmez; bu arada görüntüler herhangi bir geri dönüş yöntemi gerektirmez.

gösteri

5. Apple Sayfa Sarıcı

Apple'ın resmi web sitesinde bulabileceğiniz çok etkileyici CSS3 kutusu gölgeleri vardır. Aşağıdaki bu örnek, birkaç sütun açıklığına sahip küçük bir kutu kabıdır. Apple'ın düzenine bakarken, sayfalarının çoğunu, çok sayıda sarmalayıcı kutusundan oluşanların dikkatini çekeceksiniz..

.applewrap genişlik:% 100; Ekran bloğu; yükseklik: 150px; arkaplan: beyaz; sınır: 1px katı; kenarlık rengi: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px; sınır yarıçapı: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1 piksel 3 piksel; -moz-kutu-gölge: rgba (0,0,0,0,3) 0 1 piksel 3 piksel; kutu-gölge: rgba (0, 0, 0, 0.3) 0 1 piksel 3 piksel;  .applewrap .col float: left; kutu boyutlandırma: kenarlık kutusu; genişlik: 250px; yükseklik: 150px; dolgu maddesi: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; renk: # 343434; sınır-sağ: 1px katı #dadada;

Çeşitli genişlik ve yükseklikteki içerik kutularına bölünmüş benzer bir sayfayı bir araya getirebilirsiniz. Bu demoya birkaç sütun koymama rağmen, bu hiçbir şekilde gerekli bir biçimlendirme tekniği değildir. Kutu gölge beyaz / gri bir arka plan üzerinde en uygun olacaktır. Ancak bence herhangi bir ışık rengini göstermenin iyi görüneceğini düşünüyorum.

gösteri

6. Apple İçerik Kutusu

Apple'ın web sitesindeki bu diğer içerik kutusu tarzı çoğunlukla sütun tasarımları için kullanılır. Bunlar, öncelikle fırsatları ve diğer ilgili bilgileri gösteren sayfanın altındadır. Kutu gölgesi yukarıdan aşağıya doğru görüntülenen tamamen farklı bir tasarım stilidir..

.applebox width: auto; yükseklik: 85px; kutu boyutlandırma: kenarlık kutusu; arkaplan: # f5f5f5; dolgu maddesi: 20px 20px 10px; marj: 10 piksel 0 20 piksel; kenarlık: 1px katı #ccc; sınır yarıçapı: 4px; -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px; -o sınır yarıçapı: 4px; -webkit-box-shadow: iç içe 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: iç içe 0px 1px 1px rgba (0, 0, 0, 3); kutu-gölge: inset 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; şamandıra: sol; marj: 0 0 0 30 piksel;

Bu kodun izlenmesi ve başka bir div kabına kopyalanması çok zor olduğunu sanmıyorum. Uyguladığımız tek kutu gölge kullanıyor ilave rgba alfa saydam renk kodları ile. Bu yüzden, gölgeyi saf siyaha ayarlamış olsak da, sadece% 30'luk bir opaklık gösteriyoruz..

gösteri

7. Öne Çıkanlar

Bu muhtemelen Apple'ın şu anki web sitesinden favori kutu gölge stilim. Bu tekniğin canlı demo stilini iCloud sayfasında bir dizi kayan bağlantı kutusuyla bulmalısınız..

.elmanın özelliği yükseklik: 150px; marj: 8 piksel; dikey hizalama: üst; ekran: satır içi blok;  .applefeature bir ekran: blok; genişlik: 168px; yükseklik: 140px; kenarlık: 1px katı #ccc; renk: # 333; metin dekorasyon: yok; yazı tipi ağırlığı: kalın; hat yüksekliği: 1.3em; arkaplan: # f7f7f7; -webkit-box-shadow: içindekiler 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: iç metin 0 1 piksel 2 piksel rgba (0, 0, 0, 3); kutu-gölge: gömülü 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px; sınır yarıçapı: 4px;  .applefeature a: hover background: #fafafa; arkaplan: -webkit-gradient (doğrusal,% 0% 0,% 0% 100, (#fff), ila (# f7f7f7)); arka plan: -moz-doğrusal-gradyan (% 100% 100 90deg, # f7f7f7, #fff); -webkit-box-shadow: içindekiler 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: iç içe geçmiş 0 1px 2px rgba (0,0,0, .3); kutu-gölge: gömülü 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-sınır yarıçapı: 4px; sınır yarıçapı: 4px;  .applefeature bir img görüntüleme: blok; marj: 26 piksel otomatik 4 piksel;  .akine özelliği h4 display: block; genişlik: 160px; yazı tipi boyutu: 1.3em; font ailesi: Arial, Tahoma, sans-serif; renk: # 646464; metin hizalama: orta;

Bu özellikli bağlantılar sabit bir genişliğe ayarlanmıştır ve ayrı bir simge ve ekran metni içerir. Apple'ın örneği, önceki içerik kutusunda gördüğümüze benzer bir kutu gölgesi kullanıyor. ancak tüm kutu şimdi bir link olarak aktif hale getirilebilir her ikisini de içeren : hover ve :aktif devletler. Bu bağlantı kutusuyla ilgili çok fazla esneklik var ve kaynak kodla oynamayı denemelisiniz.

Yüksekliği / genişliği kısaltmak ve çok daha küçük bir bağlantı listesi oluşturmak mümkündür. Bunlar bir makalenin bölümleri veya sayfaları olabilir ya da link ikonlarıyla sınırlı bir alt menü yapabilirsiniz. Dürüst olmak gerekirse, bir web tasarımcısı olarak ne kadar güce sahip olduğunuzu gösteren harika bir CSS3 teknikleri seti..

gösteri

8. Çerçeveli Görüntüler

Bu örneğe gri bir arka plan ekledim, böylece kutu gölgesi stillerini daha net görebiliyorsunuz. Bu kutu, wordpress.com'daki özellikli önizleme çekimlerine benzer, ancak kaynak koduna biraz daha derinlik ekledim.

.wpframe background: #fff; sınır yarıçapı: 2 piksel; -webkit-border-radius: 2px; -moz-sınır yarıçapı: 2px; dolgu maddesi: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; kutu-gölge: 1px 2px 1px # d1d1d1;

Görüntülerin her iki tarafına küçük bir dolgu malzemesi verildiğinden, bu çerçeve büyük beyaz bir kenarlık olarak görünür. Arka plan rengini her zaman güncelleyebilir veya görüntüyü arka plandan ayırmak için küçük bir dış kenarlık bile ekleyebilirsiniz. Ancak bu oldukça basit stil kümeleri, çeşitli kutu gölge tekniklerine yönlendirilebilir. Kodla oynayın ve kendi web sitenizdeki resim tasarımlarını nasıl geliştirebileceğinizi görün.

gösteri

9. Parlayan Girdi Alanları

Pinterest giriş sayfasını birkaç kez ziyaret ettikten sonra bu fikre kapıldım. Animasyonlu stilleri, hem dış hem de iç kısımdaki bazı satır içi kutu gölgelerinin bazı belirgin örneklerini gösterir..

.formwrap görüntüleme: blok; marj-alt: 15 piksel;  .formwrap etiketi ekran: satır içi blok; genişlik: 80px; yazı tipi boyutu: 11 piksel; yazı tipi ağırlığı: kalın; renk: # 444; font ailesi: Arial, Tahoma, sans-serif;  .formwrap .shadowfield position: relatif; genişlik: 250px; yazı tipi boyutu: 17 piksel; font-family: "Helvetica Neue", Arial, sans-serif; yazı tipi ağırlığı: normal; arkaplan: # f7f8f8; renk: # 7c7c7c; satır yüksekliği: 1.4; dolgu maddesi: 6px 12px; taslak: yok; geçiş: tüm 0.2'ler kolayca çıkarılabilir 0'lar; -webkit-geçişi: tüm 0.2'ler kolay-in-0'lar; -moz-geçiş: tüm 0.2'ler kolay-in-0'lar; sınır: 1px katı # ad9c9c; sınır yarıçapı: 6px 6px 6px 6px; kutu-gölge: 0 1 piksel rgba (34, 25, 25, 0.2) ek, 0 1 piksel #fff;  .formwrap .shadowfield: focus border-color: # 930; arkaplan: #fff; renk: # 5d5d5d; kutu-gölge: gömülmüş 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-kutu-gölge: gömülü 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow: eklenmiş 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);

İlk tarzlar çok çekici olsa da, Her giriş alanına odaklandığınızda geçiş efektleri. Aralarında sekme yapabilir ve birçok özellikteki hemen farkını görebilirsiniz. Dış parlayan kutu gölgesi, güncellenmiş iç metin gölgesiyle birlikte uygulanır. Ayrıca Metin rengi, belirli bir girişe odaklandığınızda daha açık olur, ardından netleme yaparken kaybolur.

Bu etkilerden birinin üzerine kopyalamak bile, form alanlarınızdaki kullanıcı deneyimini büyük ölçüde geliştirir. Formlarınızın zorlukla kullanılabildiği noktaya kadar fazla ileri gitmediğinizden emin olun. Bununla birlikte, ziyaretçilerin çoğu, etkileşimi ve web sitenize daha fazla katılmayı teşvik eden hoş estetik etkilerin keyfine varacak.

gösteri

10. Elastik Gölge Düğmeleri

Bu benzersiz gölge düğmeleri vurgulu ve aktif durumlar sırasında yavaş bir geçiş ile tarz. Benzer örnekleri Mozilla ana sayfasında büyükleriyle bulabilirsiniz. “Firefox'u indirin” buton. Bazıları kutu gölge özellikleri aslında üç farklı gölgeyi tek bir komutta birleştirir.

.blu-btn ekran: satır içi blok; -moz-sınır yarıçapı: .25em; sınır yarıçapı: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0,0.2); kutu-gölge: 0 2px 0 0 rgba (0,0,0,0.1), iç içe 0-2px 0 0 rgba (0,0,0,0,2); arka plan rengi: # 276195; background-image: -moz-linear-gradyan (# 3c88cc, # 276195); background-image: -ms-linear-gradyan (# 3c88cc, # 276195); background-image: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 0, # 3c88cc), renk durdurma (% 100, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradyan (# 3c88cc, # 276195); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; background-image: doğrusal-gradyan (# 3c88cc, # 276195); sınır: 0; imleç: işaretçi; renk: #fff; metin dekorasyon: yok; metin hizalama: orta; yazı tipi boyutu: 16 piksel; dolgu maddesi: 0px 20px; yükseklik: 40px; hat yüksekliği: 40px; minimum genişlik: 100 piksel; metin-gölge: 0 1 piksel 0 rgba (0,0,0,0,35); font ailesi: Arial, Tahoma, sans-serif; -webkit-geçişi: tüm doğrusal .2'ler; -moz-geçiş: tüm doğrusal .2'ler; -o-geçişi: tüm doğrusal .2'ler; -ms-geçişi: tüm doğrusal .2'ler; geçiş: tüm doğrusal .2s .blu-btn: vurgulu, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0,0,3), eklenmiş 012px20px2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), içindekiler 0 -2px 0 0 rgba (0,0,0,0,3), içindekiler 0 12px 20px 2px # 3089d8; kutu-gölge: 0 2px 0 0 rgba (0,0,0,0,1), içindekiler 0 -2px 0 0 rgba (0,0,0,0,3), iç metin 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: ek 0 0 piksel 0 0 rgba (0,0,0,0,2), ek 0 0 piksel 20 piksel 6 piksel rgba (0,0,0,0,2), ek 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: Ankastre 0 2px 0 0 rgba (0,0,0,0,2), Ankastre 0 12px 20px 6px rgba (0,0,0,0,2), Ankastre 0 0 2px 2px rgba (0,0, 0,0.3); kutu-gölge: gömme 0 2px 0 0 rgba (0,0,0,0.2), gömme 0 12px 20px 6px rgba (0,0,0,0.2), gömme 0 12px 20px 6px rgba (0,0,0,0,2) );  .grn-btn ekran: satır içi blok; -moz-sınır yarıçapı: .25em; sınır yarıçapı: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0,0.2); kutu-gölge: 0 2px 0 0 rgba (0,0,0,0.1), iç içe 0-2px 0 0 rgba (0,0,0,0,2); arka plan rengi: # 659324; background-image: -moz-linear-gradyan (# 81bc2e, # 659324); background-image: -ms-linear-gradyan (# 81bc2e, # 659324); background-image: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 0, # 81bc2e), renk durdurma (% 100, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-doğrusal-gradyan (# 81bc2e, # 659324); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; background-image: doğrusal gradyan (# 81bc2e, # 659324); sınır: 0; imleç: işaretçi; renk: #fff; metin dekorasyon: yok; metin hizalama: orta; yazı tipi boyutu: 16 piksel; dolgu maddesi: 0px 20px; yükseklik: 40px; hat yüksekliği: 40px; minimum genişlik: 100 piksel; metin-gölge: 0 1 piksel 0 rgba (0,0,0,0,35); font ailesi: Arial, Tahoma, sans-serif; -webkit-geçişi: tüm doğrusal .2'ler; -moz-geçiş: tüm doğrusal .2'ler; -o-geçişi: tüm doğrusal .2'ler; -ms-geçişi: tüm doğrusal .2'ler; geçiş: tüm doğrusal .2s;  .grn-btn: vurgulu, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), içindekiler 0 -2px 0 0 rgba (0,0,0) , 0.3), iç içe geçmiş 012px20px2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), içindekiler 0 -2px 0 0 rgba (0,0,0,0,3), içindekiler 0 12px 20px 2px # 85ca26; kutu-gölge: 0 2px 0 0 rgba (0,0,0,0,1), içindekiler 0 -2px 0 0 rgba (0,0,0,0,3), iç metin 0 12px 20px 2px # 85ca26;  .grn-btn: etkin -webkit-box-shadow: ek 0 0 piksel 0 0 rgba (0,0,0,0,2), ek 0 0 piksel 20 piksel 6 piksel rgba (0,0,0,0,2), ek 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: Ankastre 0 2px 0 0 rgba (0,0,0,0,2), Ankastre 0 12px 20px 6px rgba (0,0,0,0,2), Ankastre 0 0 2px 2px rgba (0,0, 0,0.3); kutu-gölge: gömme 0 2px 0 0 rgba (0,0,0,0.2), gömme 0 12px 20px 6px rgba (0,0,0,0.2), gömme 0 12px 20px 6px rgba (0,0,0,0,2) );

Vurgulu ve etkin düğme durumlarında 200 milisaniye boyunca tam geçişler kullanıyorum. Bu stiller hakkında bu kadar harika olan şey, onları neredeyse tüm tıklanabilir öğelere uygulayabilmenizdir. Düğmeler, bağlantı bağlantıları, form öğeleri veya uygun olduğunu düşündüğünüz herhangi bir şey - tasarımlarınızı aşırı yüklememek için bu stillerin seyrek kullanılması gerekir..

Bu gibi düğmeler genellikle Mozilla'nın kullandığı şekilde en iyi şekilde kaydedilir. Bu stilleri blogunuza, freebie indirmeleri için düğmelerin bulunduğu düğmelerin veya benzerlerinin eklenmesiyle ekleyin.. Kullanıcılar benzersiz arayüzlerle etkileşime girmeyi sever ve bu genellikle tıklama oranınız için çok daha yüksek bir yüzdeye dönüşür.

gösteri

Son düşünceler

Umarım bu kutu gölge teknikleri koleksiyonundan bazı harika dersleri alabilirsin. Formlar, modal kutular, düğmeler, araç çubukları ve hatta tam web sitesi düzenleri dahil olmak üzere odaklanabileceğiniz birçok farklı alan var.

Bu gölge efektlerinden herhangi birini kendi web sitenizin bölümlerine uygulamaktan çekinmeyin. Orada birçok başka teknik var, ancak bu koleksiyon hem yeni başlayanlar hem de geliştiriciler için mükemmel. Ayrıca, makale ile ilgili herhangi bir öneriniz veya sorunuz varsa aşağıdaki yorum tartışma alanında bizimle paylaşabilirsiniz..