Box-Shadow ile CSS-Only Overlays Etkisi Nasıl Yapılır
İçerik kaplamaları modern web tasarımının önemli bir parçasıdır. Sana yardım ediyorlar bir öğeyi gizle bir web sayfasında ve daha sonra - kullanıcının onayıyla - Ortaya koy, ve arkasında düğmeler gibi ek bilgileri veya denetimleri görüntüleme.
Tipik bir kaplama yarı saydam, Birlikte düz arka plan rengi (genellikle siyah) ve kullanıcıların görmesi veya onlarla etkileşime geçmesi için üzerinde bazı metinler veya düğmeler var. Etkileşimden sonra (tıklatma veya üzerine gelindiğinde), kaplama kaldırılır ve içeriği gösterir Onun altında.
Bu yazıda, nasıl yapılacağına bir göz atacağız. resimlere renkli kaplama ekleyin saf CSS kullanarak. Nihai sonucu aşağıdaki demoda görebilirsiniz. Bindirmeleri dubaları ortaya çıkarmak için görüntüleri gezdirin. Bu gönderi görüntüleri tartışsa da, sunduğu teknik diğer içerik türlerine de (metin blokları gibi) güvenle uygulanabilir..
Ekstra HTML Öğeleri Eklemekten Kaçının
Bindirmeler sıklıkla tarafından oluşturulur. ekstra bir HTML öğesini konumlandırma bir ile opaklık 1'den küçük değer kaplanacak öğenin hemen üstünde. Sorun şu ki, bu tekniğin kullanımı ekstra yer paylaşımı için öğe (veya sözde öğe).
Eğer bir HTML boyutunda serseri değilseniz, bindirme için fazladan bir öğeye sahip olmak büyük olasılıkla büyük bir mesele değildir, çünkü büyük olasılıkla herhangi bir ağın bant genişliğini bu kadar fazla vergi ödemeyecektir. Ancak sahip ayrı elemanlar ve kaplamaları için stil kuralları hala CSS okunabilirliğine ve bakımına zarar veriyor.
Kodunuzu düzenli tutmak ve HTML anahattınızı karıştırmamak için, yalnızca CSS çözümü kullanmak daha iyi bir seçimdir..
İle Yer Paylaşımı Oluştur kutu gölge
Peki, aslında sadece bir CSS yerleşimi nasıl oluşturabilirsiniz? Yardımı ile kutu gölge CSS özelliği. Kutu-gölge bu iş için mükemmeldir, çünkü bir kaplamadır; bir öğenin üzerine koyu gölge?
Bu kutu gölgesi adı verilen bir özellik değerine sahiptir. ilave, hangi gölge görünmesine neden olur kutunun çerçevesinin içine doğru.
Öğenin genişliğinin ve yüksekliğinin yarısı veya yarısından daha büyük bir gölge boyutuna sahip iç metin kutusu-gölgesi, kapsar tüm eleman.
.kutu genişlik: 200 piksel; yükseklik: 200px; kutu-gölge: yeşil 0 0 0 100 piksel ek;
Genellikle bindirmelerden beri biraz saydamlığa sahip olmak, kutu gölgesine de eklemeniz gerekir. Bu kullanılarak yapılabilir RGBA () Gölge rengi için işlev.
rgb rgba kısmı, kırmızı, yeşil ve mavi renk kanalı değerlerini temsil ederken bir temsil etmek alfa kanalı, hangisi şeffaflıktan sorumlu.
Alfa kanalı için 1 değeri bir opak renk, 0 ise bir tamamen şeffaf renk.
Kutu gölgesinin rgba renk değerinin alfa kanalına 0 ile 1 arasında bir değer atayarak, yarı saydam bir kaplama oluşturmak.
Demo için Kod Yaratın
Demomuz farklı pokemon görüntülerini ve isimlerini gösterecek. Burada sadece demodaki ilk pokemon olan Bulbasaur için kod oluşturacağız, diğerleri aynı şekilde yapılıyor (Codepen'de onlar için de kodu kontrol edebilirsiniz).
HTML
HTML için, yalnızca kutu oluştur CSS ile başka her şeyi ekleyeceğiz.
CSS
Aşağıdaki CSS’de .pokemon öğeler pokemon görüntülerini ve .pokemon :: sonrası sözde unsurlar pokemon adını taşır..
Beri kutu gölge özellik birden fazla değer alabilir amacıyla birden çok gölge oluşturmak, üst üste binen gölgenin yanı sıra, diğer gri gölgelere de ekledim. .pokemon ve .pokemon: hover estetik unsurları.
/ * pokemon resimleri * / .pokemon width: 200px; yükseklik: 200px; / * esnek kutu kullanarak orta içerik * / ekran: esnek; haklı içerik: merkez; hizalama ögeleri: orta; / * overlay * / box-shadow: 0 0 0 100 piksel ek, 0 0 5 piksel gri; / * gezme geçişi * / geçişi: kutu gölgesi 1'ler; / * pokemon adları * / .pokemon :: after width: 80%; yükseklik:% 80; Ekran bloğu; font: 16pt 'bookman old syle'; Beyaz renk; sınır: 2px katı; metin hizalama: orta; / * esnek kutu kullanarak orta içerik * / ekran: esnek; haklı içerik: merkez; hizalama ögeleri: orta; / * geçişi gezdir * / geçiş: opaklık 1s, 5s; / * vurgulu pokemon resmini gösterir * / .pokemon: hover geçiş: kutu-gölge 1s; kutu-gölge: 0 0 0 5 piksel ek, 0 0 5 piksel gri, 0 0 10 piksel gri ek; / * vurgulu pokemon adını gizle * / .pokemon: hover :: after transition: opacity .5s; opaklık: 0;
Ne zaman .pokemon öğelerin üzerine gelindiğinde, arkalarındaki görüntüyü ortaya çıkarmak için kutu gölgelerinin değişmesi gerekir..
Bunu görebilirsiniz .pokemon: hover Seçici, kaplamayı kaldıran yeni bir kutu gölgesi alır. .pokemon: hover :: sonrası seçici, pokemonun ismini kullanarak opaklık özellik.
Ayrıca fark etmiş olabilirsiniz renk değerlerinin olmaması paylaşım kutusundaki gölgeler .pokemon ve .pokemon: hover stil kuralları Tek tek dürtmelerin bindirme kutusu-gölge renginin belirtilmesi gerekir kendi ayrı stil kurallarında, hepsi birbirinden farklı olduğu gibi.
Gibi kutu gölge uzun soluklu mülk yok, gölge rengini ayarlayamazsın bireysel gibi bir şeyle, kutu-gölge-renk; bunun yerine - kullanıyoruz renk özellik.
Varsayılan olarak, değer için renk özellik, bu değer kenarlık, anahat ve kutu gölgesi renkleri için uygulanır. yanı sıra. Yani, sadece kullanabilirsiniz renk kutu gölgesine renk ekleme özelliği.
#bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * kutu gölge rengi için kullanılan renk değeri * / renk: rgba (71, 121, 94, 0.9); #bulbasaur :: sonra / * pokemon name * / content: 'Bulbasaur';
Kaplama gölgesinin rengi yukarıda belirtilenleri kullanır. RGBA () bindirmeyi saydamlaştırmak için alfa değeri için 0,9'lu işlev.
Kaplama gölgesinin renginin yanı sıra, yukarıdaki CSS de her pokemon'a ayrı kurallar ekler - resim arka plan görüntüsü ve isim.
Hepsi bu kadar, sadece CSS renkli görüntü bindirmeye hazırız. Aşağıdaki kalemdeki tüm sahte kodlara bir göz atın.
