CSS3 Eğitimi Bir Açık / Kapalı Düğmesi Oluşturma
Bir düğme kullanmak, şimdiye kadar, elektronik bir şeyle etkileşime girmek için tercih edilen yoldur; radyo, TV, müzik çalar ve hatta sesli komut özelliğine sahip bir akıllı telefon gibi hala en az bir veya iki fiziksel düğmeye ihtiyaç duyuyor.
Ayrıca, bu dijital çağda buton Dijital haliyle de gelişti, bu fiziksel düğmeyle kıyaslandığında onu daha etkileşimli, dinamik ve gerçek anlamda kolay hale getiriyor.
Yani, bu sefer, sadece CSS kullanarak Dribbble'da bu mükemmel tasarıma dayanan kaygan ve etkileşimli bir düğme yaratacağız..
Hadi başlayalım.
HTML
Aşağıdaki işaretlemeyi HTML belgesine yerleştirerek başlayacağız. Bu gerçekten basit, düğme bir tutturucu etiketine dayalı olurdu, biz de bir karış gösterge ışığını oluşturmak için yanında, ardından bir HTML5'in içine sarılırlar Bölüm etiket.
& # XF011;
Düğmemiz başlangıçta nasıl görünüyor?.
Temel stil
Bu bölümde, üzerinde çalışmaya başlayacağız stiller.
Öncelikle bu koyu arkaplanı İnce Desen'den vücudun belgesine uygulıyoruz ve Bölüm. Sonra noktalıleri de kaldırırız. taslak üzerine : odak ve :aktif bağlantı.
body background: url ('images / micro_carbon.png'); bölüm marj: 150 piksel otomatik 0; genişlik: 75px; yükseklik: 95 piksel; pozisyon: göreceli; metin hizalama: orta; : aktif,: focus outline: 0; Özel Yazı Tipini Kullanma
Düğmenin simgesi için, resim yerine Font Awesome'den özel bir font kullanıyor olacağız. Bu şekilde simge, stil sayfasında kolayca stillenebilir ve ölçeklenebilir olur.
Yazı tipini indirin, yazı tipi dosyalarını (eot, woff, ttf ve svg) saklayın. yazı klasöre yazıp, aşağıdaki yeni kodu yazı tipi ailesini tanımlamak için stil sayfanıza yerleştirin..
@ font-face font-ailesi: "FontAwesome"; src: url ("yazı tipleri / fontawesome-webfont.eot"); src: url ("yazı tipleri / fontawesome-webfont.eot? #iefix") biçimi ('eot'), url ("yazı tipleri / fontawesome-webfont.woff") biçimi ('woff'), url ("yazı tipleri / fontawesome- webfont.ttf ") formatı ('truetype'), url (" fontlar / fontawesome-webfont.svg # FontAwesome ") formatı ('svg'); yazı tipi ağırlığı: normal; yazı tipi stili: normal; 
güç simgesi Bu düğme için ihtiyacımız olan Unicode sayısında gösteriliyor. F011; Yukarıdaki HTML işaretlemesine yakından bakarsanız, bu sayısal karakteri koyduk. & # XF011; bağlantı etiketi içinde, ancak biz özel tanımıyoruz font ailesi düğme stilinde, simge henüz doğru şekilde oluşturulmadı.
Daha fazla okuma: Unicode ve HTML: Belge Karakterleri
Düğmeyi Şekillendirme
Her şeyden önce, gelenekleri tanımlamamız gerekir font ailesi düğme için.
Bizim düğmesi bir daire olacak, kullanarak daire efekti elde edebilirsiniz border-radius özelliği ve değeri en az düğmenin yarısı olarak ayarlayın. Genişlik.
Simge için bir yazı tipi kullandığımızdan, renk ve Ekle Metin gölgesi stil sayfasındaki simge için de.
Ardından, düğme için eğimli bir efekt de oluşturacağız. Bu etki oldukça karmaşık. İlk önce başvurmamız gerekiyor arkaplan rengi: rgb (83,87,93); düğmenin renk tabanı için, daha sonra dört katman ekleriz. Kutu gölgeler.
bir font-family: "FontAwesome"; renk: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0.1); yazı tipi boyutu: 32pt; Ekran bloğu; pozisyon: göreceli; metin dekorasyon: yok; arkaplan rengi: rgb (83,87,93); kutu-gölge: 0px 3px 0px 0px rgb (34,34,34), / * 1. Gölge * / 0px 7px 10px 0px rgb (17,17,17) / , 250, 250, .2), / * 3. Gölge * / ek 0px -12px 35px 0px rgba (0, 0, 0, 5); / * 4. Gölge * / genişlik: 70 piksel; yükseklik: 70px; sınır: 0; sınır yarıçapı: 35 piksel; metin hizalama: orta; hat yüksekliği: 79px;
Ayrıca düğmenin dışında daha büyük bir daire vardır ve biz :önce sözde eleman bunun için fazladan biçimlendirme eklemek yerine.
a: önce content: ""; genişlik: 80px; yükseklik: 80px; Ekran bloğu; z-endeksi: -2; pozisyon: mutlak; arkaplan rengi: rgb (26,27,29); solda: -5px; üst: -2px; sınır yarıçapı: 40 piksel; kutu-gölge: 0px 1px 0px 0px rgba (250,250,250,0.1), ek 0px 1px 2px rgba (0, 0, 0, 0.5);
Daha fazla okuma: CSS: öncesi ve sonrası sözde elemanları (Hongkiat.com)
Gösterge ışığı
Düğmenin altında, Güç Açık ve Kapalı durumunu belirlemek için küçük bir ışık vardır. Altta, ışığın rengine kırmızı uyguladık çünkü güç başlangıçta KAPALI, kutu gölge ışığın parıltı etkisini taklit etmek.
a + span display: block; genişlik: 8px; yükseklik: 8px; arkaplan rengi: rgb (226,0,0); kutu-gölge: iç içe 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); sınır yarıçapı: 4px; ikisini de temizle; pozisyon: mutlak; alt: 0; solda:% 42;
Etki
Bu noktada düğmemiz iyi görünmeye başlar ve sadece üzerinde bazı efektler eklememiz gerekir, örneğin, düğme 'tıklandığında', düğmenin basılı tutulduğu gibi görünmesini istiyoruz.
Etkisi elde etmek için, ilk kutu gölge düğmedeki sıfırlanır ve konum biraz düşürülür. Ayrıca diğer üç gölgenin yoğunluğunu düğme konumuna uyacak şekilde biraz ayarlamamız gerekir..
a: etkin kutu gölge: 0 piksel 0 piksel 0 piksel 0 piksel rgb (34,34,34), / * İlk Gölge * / 0 piksel 3 piksel 7 piksel x piksel 0 piksel rgb (17,17,17), / * 2. Gölge * / metin 0 piksel 1 piksel 1 piksel 0px rgba (250, 250, 250, .2), / * 3. Gölge * / ek 0px -10px35px5px rgba (0, 0, 0, 5); / * 4. Gölge * / arka plan rengi: rgb (83,87,93); üst: 3 piksel;
Ayrıca, düğmeye tıklandığında, basılı kalmalı ve gücün AÇIK olduğunu belirtmek için simgenin 'parlaması' gerekir.
Böyle bir etki elde etmek için düğmesini kullanarak düğmeyi hedefleyeceğiz. :hedef Sözde sınıf, sonra simgenin rengini beyaz olarak değiştirin ve bir Metin gölgesi yanı sıra beyaz renk ile.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), iç metin 0px 1px 1px 0px rgba (250, 250, 250, .2) , iç içe geçmiş 0px-10px35px5px rgba (0, 0, 0,5); arkaplan rengi: rgb (83,87,93); üst: 3 piksel; renk: #fff; metin gölgesi: 0 piksel 0 piksel 3 piksel rgb (250,250,250);
Daha fazla okuma: Kullanma: target Sözde sınıf
Biz de ayarlamak gerekir kutu gölge düğmenin dışındaki dairede aşağıdaki gibi.
a: active: before, a: target: before top: -5px; arkaplan rengi: rgb (26,27,29); kutu-gölge: 0px 1px 0px 0px rgba (250,250,250,0.1), ek 0px 1px 2px rgba (0, 0, 0, 0.5);
Işık göstergesi, gücün zaten AÇIK olduğunu vurgulamak için varsayılan kırmızıdan yeşil renge döner.
a: hedef + açıklık kutu-gölge: ek 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); arkaplan rengi: rgb (135,187,83);
Geçiş Etkisi
Son olarak, düğmenin efektinin sorunsuz çalışmasını sağlamak için aşağıdaki geçiş efektini de uygulayacağız..
Aşağıdaki bu kod parçası, özellikle renk mülkiyet ve Metin gölgesi için 350ms bağlantı elemanında.
a geçiş: renkli 350 ms, metin gölgeli 350 ms; -o-geçiş: renkli 350ms, metin-gölge 350ms; -moz-geçiş: renkli 350ms, metin-gölge 350ms; -webkit-geçişi: renkli 350ms, metin gölgesi 350ms;
Aşağıdaki bu ikinci kod parçası, arka plan rengi ve kutu gölge ışık göstergesindeki özellik.
a: target + span geçişi: arka plan rengini 350ms, kutu gölge 700ms; -o-geçiş: arka plan rengini 350ms, kutu gölge 700ms; -moz-geçiş: arka plan rengini 350ms, kutu gölge 700ms; -webkit-geçişi: arka plan rengini 350ms, kutu gölge 700ms;
Son sonuç
İhtiyacımız olan tüm stilleri gördük, şimdi son sonucu canlı olarak görebiliyor, kaynak dosyasını aşağıdaki bağlantılardan indirebiliyorsunuz.
- gösteri
- Kaynak İndir
Bonus: Nasıl kapatılır?
İşte bonus geliyor. Yukarıdaki demosundaki düğmeyi denediyseniz, düğmenin yalnızca bir kez tıklanabileceğini, bunun açılması için bir fark olduğunu fark ettiniz, bu yüzden onu nasıl kapatırız??.
Ne yazık ki, bunu jQuery ile yapmak zorundayız, ancak bu gerçekten de basit. İhtiyacımız olan tüm jQuery kodu.
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Yukarıdaki snippet, çapa ON sınıfını ekler ve biz toggleClass JQuery işlevi eklemek için. Yani, ne zaman #buton üzerine tıklandığında, jQuery, sınıfın eklenip eklenmediğini kontrol eder: olmadığında, jQuery sınıfı ekler ve eklenirse, jQuery sınıfı kaldırır.
Not: JQuery kütüphanesini eklemeyi unutmayın.
Şimdi Stili biraz değiştirmek zorundayız. Sadece tüm değiştirin :hedef sözde eleman ile .üzerinde sınıf seçici, aşağıdaki gibidir:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), ek 0px 7px 0px 0px rgba (250, 250, 250, .2) , iç içe geçmiş 0px-10px35px5px rgba (0, 0, 0,5); arkaplan rengi: rgb (83,87,93); üst: 3 piksel; renk: #fff; metin gölgesi: 0 piksel 0 piksel 3 piksel rgb (250,250,250); a: active: önce, a.on: before top: -5px; arkaplan rengi: rgb (26,27,29); kutu-gölge: 0px 1px 0px 0px rgba (250,250,250,0.1), ek 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span kutu-gölge: ek 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0.5); arkaplan rengi: rgb (135,187,83);
Sonunda tarayıcıda deneyelim.
- gösteri
- Kaynak İndir
