Sallanan Bir CSS3 Arama Kutusu Oluşturma
CSS3, yeni nesil stil sayfası dilidir. Gölgeler, animasyonlar, geçişler, sınır yarıçapı vb. Gibi birçok yeni ve heyecan verici özellik sunar. Teknik özellikler henüz tamamlanmamış olmasına rağmen, birçok tarayıcı üreticisi yeni özelliklerin çoğunu desteklemeye başlamıştır..
Bu derste, bu özelliklerden bazılarını keşfedeceğiz. Metin gölgesi, border-radius, Kutu gölgeler ve bir sallanan arama alanı oluşturmak için geçişler.
Bu arama alanının photoshop versiyonu Alvin Thong tarafından oluşturuldu ve buradan indirilebilir. Bu arama alanını saf CSS3 kullanarak yeniden yaratmaya çalıştım. Bu not edilmelidir tüm tarayıcılar CSS3 özelliklerini desteklemez ve bu öğreticiyi denemek için, CSS 3 özelliklerini destekleyen modern tarayıcılardan birini kullanmanız gerekir..
Hazır? Başlayalım!
1. HTML5 Dokümanı
HTML işaretlemesi ile başlayacağız. Çok basit, sonra HTML5 doktipi ve beyanname, biz bir adlı bir kimliği olan #wrapper içeride . Bu sadece içerik kutusunun genişliğini tanımlamak ve sayfanın ortasına hizalamak için yapılır..
Bunu bir İşte kod şöyle gözüküyor: Formun etrafında büyük bir kutu oluşturmak için forma stiller ekleyeceğiz. Burada önemli kod parçası: Açıklama: Burada, iç metin anahtar kelimesi gölgenin kutunun içinde olup olmayacağını belirtir. İlk iki sıfır, x-offset'i ve y-offset'i, 3px ise bulanıklığı gösterir. Sıradaki renk beyanı. Burada rgba değerlerini kullandım; RGBba kırmızı yeşil mavi ve alfa (opaklık) anlamına gelir. Böylece parantez içindeki 4 değer kırmızı, yeşil, mavi ve alfa miktarını gösterir (opaklık). 5 set gölge bildiriminin bir araya toplandığını göreceksiniz. Bu onları virgül ile ayırarak yapılabilir. İlk iki gölge beyaz "iç ışıma" etkisini tanımlar ve sonraki açıklamalarda kutuya sağlam / tıknaz bir görünüm kazandırılır.. Nasıl çalıştığını anlamak için bu değerlerle oynayın. Şimdi kutu tamamlandı, giriş alanı stiline geçelim. Giriş alanı için bildirilen stiller, büyük kutu için belirtilenlere oldukça benzer Açıklama: Bu sefer, gölge bulanıklığının keskin bir gölge elde etmek için 0'da tutulduğunu ve dikey 5px ofset kullanıldığını fark edeceksiniz. Ardışık bildirimlerde, bulanıklık 0 pikselde tutuldu, ancak renk ve y ofseti değiştirildi. Yine, farklı sonuçlar elde etmek için bu değerlerle uğraşın. Arama düğmesine stil atalım. Renklerin dışında, arama düğmesi çoğunlukla dış kutudaki stillerle aynıdır. Düğmede benzer sınır yarıçapı ve kutu gölgeleri kullanılmıştır. Tanıtılan yeni özellik Açıklama: İçinde Düğmenin aktif durumu biraz daha değişmiş. Bu noktada, butona mutlak bir konum ve 5px'lik bir 'üst' değer verdim. Bu, daha doğal bir görünüm vermek için yapıldı; öyle ki, düğmenin 5 piksel aşağı bastırıldığını hissediyor. Aktif durumdaki diğer değişiklikler, arka plan rengindeki ve gölgelerdeki değişikliklerdir. Gölge baskısını 'bastırılmış' bir görünüm için düşürdüğüme dikkat edin. Gönder düğmesinin etkin durumunun kodu: Bu arama alanımızı tamamlar. Yeni CSS3 özelliklerinden epeyce kullandık. İşte bu arama alanının tam CSS’i ve HTML’si. Umarım bu eğitimden hoşlanmışsınızdır. Bu özellikleri denemekten çekinmeyin ve düşüncelerinizi paylaşmayı unutmayın. Editörün Notu: Bu gönderi tarafından yazılmıştır Bharani M Hongkiat.com için. Bharani, Hindistan, New Delhi'den bir tasarımcı / geliştiricidir..#ana. Bu kimlik, giriş alanının çevresindeki büyük beyaz kutuyu ve arama düğmesini tanımlayan stilleri içerir. Bu içinde ilan etti. Formda metin giriş alanı ve sarama düğmesi. Formun uygulanmış herhangi bir stil olmadan nasıl göründüğü: 
CSS3 Arama Alanı
2. Sınırlayıcı kutunun oluşturulması
#ana. Aşağıda gösterilen koddan, kutuya 400 piksel genişliğinde ve 50 piksel yüksekliğinde olduğunu fark edeceksiniz.. #main width: 400px; yükseklik: 50px; arkaplan: # f2f2f2; dolgu maddesi: 6px 10px; sınır: 1px katı # b5b5b5; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.8), içindekiler 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0pc 0 #cc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.8), içindekiler 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0pcc # 25c, 0 6px 0 # 989898, 0 13px 0 #dfdede; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,8), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 1), 0 5 piksel 0 # ccc, 0 6 piksel 0 # 989898, 0 13 piksel 0 # dfdede;
border-radius beyan ve kutu gölge beyanı. Köşeleri yuvarlatmak için CSS3 sınır yarıçapı bildirimini, "-moz-" ve "-webkit-" tarayıcı öneklerini kullandık, bunun gecko ve webkit tabanlı tarayıcılarda çalışmasını sağlamak için kullanılmıştır. Kutu gölge bildirimleri biraz kafa karıştırıcı görünebilir ama aslında çok basit. kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,8), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 1), 0 5 piksel 0 # ccc, 0 6 piksel 0 # 989898, 0 13 piksel 0 # dfdede;
Ön izleme
3. Giriş alanını şekillendirme
giriş [type = "text"] float: left; genişlik: 230px; dolgu maddesi: 15px 5px 5px 5px; kenar boşluğu: 5 piksel; sol kenar boşluğu: 3 piksel; sınır: 1px katı # 999999; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; -moz-box-shadow: iç metin 0 5 piksel 0 # ccc, iç metin 0 6 piksel 0 # 989898, iç metin 0 13 piksel 0 # ddfdede; -webkit-box-shadow: iç metin 0 5 piksel 0 #ccc, iç metin 0 6 piksel 0 # 989898, iç metin 0 13 piksel 0 # ddfdede; kutu gölgesi: ek 0 0 piksel 0 # ccc, ek 0 0 piksel 0 # 989898, ek 0 0 13 piksel 0 # ddfdede;
#ana. Aynı sınır yarıçapını (5px) kullandık. Yine, birden çok kutu gölgesi kulübe yerleştirildi. kutu gölgesi: ek 0 0 piksel 0 # ccc, ek 0 0 piksel 0 # 989898, ek 0 0 13 piksel 0 # ddfdede;
Ön izleme
4. Gönder düğmesini şekillendirin
giriş [type = "delivery"] katı float: left; imleç: işaretçi; genişlik: 130 piksel; dolgu maddesi: 8px 6px; sol kenar boşluğu: 20 piksel; arka plan rengi: # f8b838; renk: rgba (134, 79, 11, 0.8); metin dönüşümü: büyük harf; yazı tipi ağırlığı: kalın; sınır: 1px katı # 99631d; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; metin-gölge: 0 1 px 2 piksel rgba (255, 255, 255, 0.7), 0 -1 piksel 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,6), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 0,7), 0 5 piksel 0 # b8882a, 0 6 piksel 0 # 593a11, 0 13 piksel 0 # ccc; -webkit-geçişi: arka plan 0.2s kolaylık;
Metin gölgesi. metin-gölge: 0 1 px 2 piksel rgba (255, 255, 255, 0.7), 0 -1 piksel 0 rgba (64, 38, 5, 0.9);
Metin gölgesi bildirimde, ilk üç sayısal değer sırasıyla x-offset, y-offset ve blur değeridir. RGba değerleri gölge rengini gösterir. Bir sonraki bildirimde (virgülle ayrılmış), y-dengesine -1 değeri verilir. Bu metin vermek için yapılır “İç gölge” Efekt. Gönder düğmesinin vurgusu / odak durumu arka plan renginin ve gölgelerin farklı değerlerine sahiptir. Ön izleme
Düğme için "Aktif" durumu
giriş [type = "delivery"] katı: etkin background: # f6a000; pozisyon: göreceli; üst: 5 piksel; sınır: 1px katı # 702d00; -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,6), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 0,7), 0 3 piksel 0 # b8882a, 0 4 piksel 0 # 593a11, 0 8 piksel 0 # ccc;
Komple (CSS) Kodu
#main width: 400px; yükseklik: 50px; arkaplan: # f2f2f2; dolgu maddesi: 6px 10px; sınır: 1px katı # b5b5b5; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.8), içindekiler 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0pc 0 #cc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.8), içindekiler 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0pcc # 25c, 0 6px 0 # 989898, 0 13px 0 #dfdede; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,8), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 1), 0 5 piksel 0 # ccc, 0 6 piksel 0 # 989898, 0 13 piksel 0 # dfdede; input [type = "text"] float: left; genişlik: 230px; dolgu maddesi: 15px 5px 5px 5px; kenar boşluğu: 5 piksel; sol kenar boşluğu: 3 piksel; sınır: 1px katı # 999999; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; -moz-box-shadow: iç metin 0 5 piksel 0 # ccc, iç metin 0 6 piksel 0 # 989898, iç metin 0 13 piksel 0 # ddfdede; -webkit-box-shadow: iç metin 0 5 piksel 0 #ccc, iç metin 0 6 piksel 0 # 989898, iç metin 0 13 piksel 0 # ddfdede; kutu gölgesi: ek 0 0 piksel 0 # ccc, ek 0 0 piksel 0 # 989898, ek 0 0 13 piksel 0 # ddfdede; giriş [tür = "teslim"] katı float: left; imleç: işaretçi; genişlik: 130 piksel; dolgu maddesi: 8px 6px; sol kenar boşluğu: 20 piksel; arka plan rengi: # f8b838; renk: rgba (134, 79, 11, 0.8); metin dönüşümü: büyük harf; yazı tipi ağırlığı: kalın; sınır: 1px katı # 99631d; -moz-sınır yarıçapı: 5px; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; metin-gölge: 0 1 px 2 piksel rgba (255, 255, 255, 0.7), 0 -1 piksel 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,6), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 0,7), 0 5 piksel 0 # b8882a, 0 6 piksel 0 # 593a11, 0 13 piksel 0 # ccc; -webkit-geçişi: arka plan 0.2s kolaylık; giriş [tür = "Gönder"] katı: vurgulu, giriş [tür = "Gönder"] katı: odak background: # ffd842; -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.9), içindekiler 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.9), içindekiler 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,9), ek 0 0 piksel 1 px rgba (255, 250, 76, 0,8), 0 5 piksel 0 # d8a031, 0 6 piksel 0 # 593a11, 0 13 piksel 0 # ccc; giriş [tür = "teslim"] katı: etkin background: # f6a000; pozisyon: göreceli; üst: 5 piksel; sınır: 1px katı # 702d00; -moz-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: içindekiler 0 0 3px rgba (255, 255, 255, 0.6), içindekiler 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; kutu gölgesi: ek 0 0 3 piksel rgba (255, 255, 255, 0,6), ek 0 0 piksel 2 piksel rgba (255, 255, 255, 0,7), 0 3 piksel 0 # b8882a, 0 4 piksel 0 # 593a11, 0 8 piksel 0 # ccc;
