CSS Maskesini Kullanarak Bir Anahtar UI Oluşturma
Görüntü işleme, maskeleme size izin veren bir tekniktir görüntüyü gizle diğeriyle birlikte. Görüntünün bir bölümünü yapmak için maske kullanılır. transparan. Maskeleme özellikleri yardımıyla CSS kullanarak maskeleme işlemini gerçekleştirebilirsiniz.
Bugünün yayınında, iki PNG görüntüsü ve CSS maskeleme tekniği kullanarak maskelenmiş bir görüntü oluşturacağız ve kullanıcıların görüntünün iki durumunu ele almalarını sağlayacağız (gün ve gece) bir anahtar UI yardımı ile.
Bazı tarayıcı uyumluluğu sorunları nedeniyle - her tarayıcıda tüm maskeleme özellikleri desteklenmiyor (Haziran 2016'dan itibaren) - Ben göstereceğim maske eklemek için iki teknik, biri Webkit tabanlı tarayıcılar için ve diğeri Firefox için. Bu üç adımlı öğreticideki ilk iki adım, her tarayıcı için aynıdır, ancak üçüncü adımda bir fark olacaktır..
1. Adım. Basit bir anahtar oluşturun.
Tipik bir anahtarın iki durumu olduğundan sadece bir etkin bir anda, bir iki radyo düğmesi grubu Anahtarın çalışma bileşenlerini oluşturmak için. Her radyo düğmesini üst öğelerinin sol ve sağ uçlarına yerleştirin.
Radyo düğmesi grupları, her radyo düğmesine aynı şekilde verilerek oluşturulur. isim bağlıyor. Radyo düğmesi grubunda, sadece bir radyo düğmesi bir anda kontrol edilebilir.
Aşağıdaki HTML ve CSS ile başlıyoruz:
HTML
CSS
Aşağıdaki CSS'de, radyo düğmelerini tam olarak istediğim yere ekrana yerleştirmek için mutlak konumlandırma kullandım.
#outerWrapper width: 450px; yükseklik: 90px; dolgu maddesi: 10px; marj: 100 piksel otomatik 0 otomatik; sınır yarıçapı: 55 piksel; kutu-gölge: 0 0 10px 6px #EAEBED; arkaplan: #fff; #innerWrapper height:% 100; Çerçeve-yarıçapı: 45px; taşma: hidden; konum: göreceli; .radio genişlik: 90px; Yükseklik: 100%; konum: mutlak; marjı: 0; opaklık: 0; #rightRadio sağ: 0; .radio: not (: checked) imleç: pointer;
Ekledim opaklık: 0 kural .radyo derse girmek radyo düğmelerini gizle. Aşağıdaki kod bloğundaki son kural, imleç: işaretçi; denetlenmeyen radyo düğmesi için işaretçi imlecini gösterir, böylece kullanıcılar geçiş durumunu değiştirmek için hangi düğmeyi tıklayacaklarını bilirler.
Adım 2. Switch'e Dış Görünüm Ekleme
Bu adımda iki tane ekleyeceğiz “Gündüz” ve “Gece” yi, Minh Killy Le'nin bir Dribbble atışından ilham alan iki durum olarak kullanıyorum.. HTML CSS Pointer-events CSS özelliği ile, bir grafik öğesinin hangi koşulları altında olabileceğini belirleyebilirsiniz. fare olayları tarafından hedeflenen. Yukarıdaki kod için bir alternatif olarak, iki Chrome ve diğer Webkit tabanlı tarayıcılar için Genel olarak iki tür maskeleme vardır: parlaklık ve alfa. Chrome'da (sürüm 51.0.2704.103, Win10), şu anda yalnızca alfa çalışıyor gibi görünüyor. CSS’de, İşte CSS maske ekler Webkit tarayıcılarında görüntüleri arka plana çekmek için: CSS Kullandım Gece cildi için şeffaf bir daire oluşturdum ve kabın kalan kısmını opak hale getirdim. Gündüz cildi için tam tersini yaptım: ile opak bir daire oluşturdum. Henüz Webkit tarayıcılarında desteklenmese de, ekledim. Yukarıda gördüğünüz gibi, dairenin sınırı çok düzgün değil. için pürüzlü kenarları gizle, ekle HTML CSS rağmen Yani, yerine Yukarıdaki SVG resmi, beyaz dikdörtgen ve bir siyah daire. Bunu ve bir tane daha ekle siyah dikdörtgen ve bir beyaz daire Webkit sürümünde kullandığımız HTML maskeleri olarak. HTML CSS kodunu değiştirin (veya ile birleştirin). Şimdi iki farklı maske resmine (CSS gradient & SVG), iki farklı maske tipine (Alpha & Luminance) ve hem Webkit hem de Firefox desteğine sahibiz.. CSS
#daySkin background-image: url ('day.png'); #nightSkin background-image: url ('night.png'); .skin genişlik:% 100; yükseklik:% 100; pointer-events: yok; pozisyon: mutlak; marj: 0; pointer-events: yok; kaplamadaki click olaylarının düzenlenmesi için kaplamalara kural eklenir onlardan geçmek, ve radyo düğmelerine eriş.
Adım 3a. Maske ekle (Webkit sürümü)
Maske-görüntü - Bu yazının yazıldığı gibi - yalnızca -webkit Webkit tarayıcılarında önek. Maske-görüntü özellik size izin verir görüntüyü belirt kullanılacak olan olarak maskelemek.alfa ve parlaklık değerleri Maske tipi özellik.#nightSkin background-image: url ('night.png'); Maske tipi: a; / * kalan kısmı opak olan şeffaf daire * / -webkit-mask-image: radyal gradyan (45px 45px'deki daire, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ; / * Gündüz derisi seçildiğinde * / #leftRadio: checked ~ # nightSkin mask-type: alpha; / * Kalan kısmı şeffaf olan opak daire * / -webkit-mask-image: radyal-gradyan (405px 45px'deki daire, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ; -webkit-maskesi-görüntü İlk maske görüntüsünü yaratma özelliği. Değeri kullanır radyal gradyan () Önceden tanımlanmış bir şekilden bir görüntü, radyal bir degrade ve degradenin merkezinden oluşturmak için kullanılan CSS işlevi.radyal gradyan () işlev ve kalan kısmı saydam hale getirme.Maske tipi ileride başvurmak üzere CSS mülküne.
#switchBtnOutline width: 90px; Yükseklik: 100%; Çerçeve-yarıçapı: 45px; kutu-gölge: 0 0 2 piksel 2 piksel gri iç metin, 0 0 10 piksel gri; işaretçi olaylar: yok; konum: mutlak; marjı: 0; / * Gündüz cilt seçildiğinde #switchBtnOutline öğesini sağ uca yerleştirin * / #leftRadio: checked ~ # switchBtnOutline right: 0;
Adım 3b. Maske ekle (Firefox sürümü)
Maske-görüntü CSS özelliği aslında bir el yazısı özelliği, ve bu kestirme özelliğin bir parçası maskelemek Bu aynı zamanda maske olarak kullanılacak görüntüyü belirlemenizi sağlar. Süre Maske-görüntü henüz Firefox'ta desteklenmiyor, maskelemek olduğu.maskelemek özellik, ile oluşturulan bir resmi kabul etmelidir. radyal gradyan () CSS, bir değer gibi, aynı Maske-görüntü özellik yaptım, henüz Firefox'ta bunun için destek yok.radyal gradyan () görüntüde, maske türüyle birlikte maske görüntüsü olarak bir SVG görüntüsü kullanalım. parlaklık.
#nightSkin Webkit sürümünde aşağıdaki kodu kullandık. Ve bitti.#nightSkin background-image: url ('night.png'); maske tipi: parlaklık; Maske: url (#leftSwitchMask); #leftRadio: checked ~ # nightSkin mask tipi: parlaklık; Maske: url (#rightSwitchMask); Demoyu Kontrol Et
