Anasayfa » Kodlama » CSS Maskesini Kullanarak Bir Anahtar UI Oluşturma

    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.

    Chrome tarayıcısında radyo düğmelerini içeren anahtar kullanıcı Arabiriminin ekran görüntüsü

    Adım 2. Switch'e Dış Görünüm Ekleme

    Bu adımda iki tane ekleyeceğiz

    HTML dosyamızdaki radyo düğmelerinin altındaki iki kaplama için etiketler ve CSS'imizdeki her kaplamanın arka plan resmi.

    “Gündüz” ve “Gece” yi, Minh Killy Le'nin bir Dribbble atışından ilham alan iki durum olarak kullanıyorum..

    Gün cilt
    Gece cilt

    HTML

    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ş.

    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 içindeki etiketler (kaynak görüntülerle birlikte)

    Etiketler de çalışabilir. Onlar olacak iki şalter durumu için kaplamalar.

    Kromdaki derileri olan anahtarın ekran görüntüsü

    Adım 3a. Maske ekle (Webkit sürümü)

    Chrome ve diğer Webkit tabanlı tarayıcılar için 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.

    Genel olarak iki tür maskeleme vardır: parlaklık ve alfa.

    • İçinde parlaklık maskeleme, maske görüntüsünün karanlık kısmı, maskeleyen görüntüyü gizler: bir bölüm maske görüntüsünde daha koyu, o kısım ne kadar gizli maskelenen görüntüde.
    • İçinde alfa maskeleme, Maske görüntüsünün saydam kısmı, maskeleyen görüntüyü gizler: Bir bölüm maske görüntüsünde ne kadar şeffaf olursa, o bölüm maskelenmekte olan görüntüde o kadar gizli kalır..

    Chrome'da (sürüm 51.0.2704.103, Win10), şu anda yalnızca alfa çalışıyor gibi görünüyor.

    CSS’de, alfa ve parlaklık değerleri Maske tipi özellik.

    İşte CSS maske ekler Webkit tarayıcılarında görüntüleri arka plana çekmek için:

    CSS

    #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) ; 

    Kullandım -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.

    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. radyal gradyan () işlev ve kalan kısmı saydam hale getirme.

    Henüz Webkit tarayıcılarında desteklenmese de, ekledim. Maske tipi ileride başvurmak üzere CSS mülküne.

    Gece görünümü seçiliyken geçiş ekran görüntüsü
    Day skin seçili durumun ekran görüntüsü

    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

    derileri sonra bir kutu gölge ile bir daire şeklinde (maske daire ile aynı boyutta). Gölge, daire maskesinin pürüzlü kenarlarını gizler.

    HTML

    CSS

    #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; 
    Maske çemberinin pürüzlü kenarları gizlenmiş anahtarın ekran görüntüsü

    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.

    rağmen 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.

    Yani, yerine 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.

         

    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.

    SVG görüntüsü (maske için beyaz dikdörtgen ve siyah daire)

    HTML

                 

    CSS kodunu değiştirin (veya ile birleştirin). #nightSkin Webkit sürümünde aşağıdaki kodu kullandık. Ve bitti.

    Şimdi iki farklı maske resmine (CSS gradient & SVG), iki farklı maske tipine (Alpha & Luminance) ve hem Webkit hem de Firefox desteğine sahibiz..

    CSS

    #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

    • gösteri
    • Kaynak İndir
    © PHHSNEWS
    Web geliştirme konusunda faydalı bilgiler ve ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden kurun. Sıfırdan web siteleri ve uygulamalar oluşturma.