CSS Şeridi Nasıl Oluşturulur
Hakkında konuşuruz CSS şeritleri web tasarımında bir kutu şeridi (şerit adı verilir) başka bir kutuyu sarar. Oldukça kullanılan bir tasarım tekniğidir. metni süsle, özellikle başlıklar. W3C'nin web sitesinde, doğru bir şekilde kullanılan CSS şeritlerinin nasıl yardımcı olabileceğini kontrol edebilirsiniz. yapı içeriği ince bir şekilde.
Yani, bu yazıda göreceğiz basit bir CSS şeridi nasıl oluşturulur kullanabileceğin başlıkları geliştirmek Web sitenizde. Sayesinde CSS dönüşümleri, bu tasarımı öncekinden çok daha basit bir kod tabanı ile oluşturabiliriz.
Aşağıdaki final demosunda bir göz atabilirsiniz.
HTML ve temel stiller
İlk önce ile işaretlediğimiz etiket .kart bir temsilci dikdörtgen kutu şerit olacak sarmak etrafında.
Biz de temel boyutlar ve arka plan rengi CSS ile.
.kart background-color: bej; yükseklik: 300px; marj: 40 piksel; genişlik: 500px;
Şeridin orta kısmı
Kullanacağız CSS değişkeni (bir CSS değerini saklamamıza ve yeniden kullanmamıza izin verir) --p için dolgu değerini saklayın. Değeri dolgu malzemesi özellik kullanır var (- p) Şeridin sol ve sağ kenarları için sözdizimi, kolayca genişletildi. --p değişken daha sonra olacak birden çok kez yeniden kullanıldı; kodumuzu esnek kılan.
.şerit - p: 15 piksel; arkaplan rengi: rgb (170,170,170); yükseklik: 60px; dolgu maddesi: 0 var (- p); genişlik:% 100;
Aşağıdaki ekran görüntüsünde, demonuzun bu noktada nasıl görünmesi gerektiğini görebilirsiniz:
Şeridi ortalamak
Ayrıca gerekir şeridi ortala. Biz dolgu ölçüsü ile sola itin (ile işaretlenmiş --p değişken) göreceli konumlandırma kullanarak.
.şerit - p: 15 piksel; arkaplan rengi: rgb (170,170,170); yükseklik: 60px; dolgu maddesi: 0 var (- p); pozisyon: göreceli; sağ: var (- p); genişlik:% 100;
Güncellenen demo:
Şeridin kenarları
Şimdi biz yaratıyoruz şeridin sol ve sağ tarafları Bu kart kenarına görünüşte bükülmelidir. Bunu yapmak için, her ikisini de kullanırız. :önce ve :sonra sözde unsurları .kurdele.
Her iki sözde öğe arka plan rengini miras alır. .kurdele, ve biz kullanırız filtre: parlaklık (.5) renklerini biraz karartmaya karar verir. Onlar ayrıca kesinlikle konumlandırılmış (göreceli olarak konumlandırılmış) ebeveynleri içinde.
Onların genişliği olması gerekir dolgu boyutu ile aynı, ve onları yerleştiririz şeridin sol ve sağ uçlarına kullanmak solda: 0 ve sağ: 0 stil kuralları.
.şerit: önce, .ribbon: sonra background-color: inherit; içerik: "; ekran: blok; filtre: parlaklık (.5); yükseklik:% 100; konum: mutlak; genişlik: var (- p); .ribbon: önce left: 0; .ribbon: after sağ: 0;
Şimdi yeni eklediğimiz kenarlara sahip şerit aşağıdaki gibi görünüyor:
Yanları eğrilt
Şeridin kenarlarını yapmak bükülmüş görünmek, Bizim ihtiyacımız kenarları 45 ° döndürün. dönüşümü: skewy () CSS kuralı elemanları dikey olarak bükülür.
.şerit: önce sol: 0; dönüşümü: skewY (45deg); .ribbon: sonra sağ: 0; dönüşümü: skewY (-45deg);
Tarafların kenarlarını görebileceğiniz gibi hizalanma Dönüşümden sonra, ihtiyacımız olan onları aşağı çekmek.
Yanları hizala
için uygun uzunluğu belirlemek tarafları aşağıya indirmemiz gerektiğinden, trigonometriye dönüyoruz. Bulmamız gereken şey x, gibi y kenarların genişliğidir (dolgu boyutuna eşittir). .kurdele) ve açı θ 45 ° 'dir (eğriltme açısı).
Sonuç x sonra yarıya ihtiyacı var, sol ve sağ taraf olduğu gibi.
Herhangi bir CSS önişleyici kullanıyorsanız, cihazın taba rengi aksi halde bir teğet şemaya veya hesap makinesine bakın. açının teğet değerini öğrenmek. Olarak şanslıyız kahverengi 45 ° olduğu 1, Bu değer anlamına gelir x eşittir y bizim durumumuzda.
.şerit: önce, .ribbon: sonra background-color: inherit; içerik: "; ekran: blok; filtre: parlaklık (.5); yükseklik: 100%; konum: mutlak; üst: kalk (var (- p) / 2); genişlik: var (- p);
Dan beri x yarıya inmek zorunda kaldık hesaplanan () CSS işlevi bölme işlemini gerçekleştirmek için --p değişken.
Sonunda ihtiyacımız var yanları z ekseni boyunca hizalayın ayrıca, ekleyelim z dizini: -1 taraflara hükmetmek onları şeridin orta kısmının arkasına yerleştirin.
.şerit: önce, .ribbon: sonra background-color: inherit; içerik: "; ekran: blok; filtre: parlaklık (.5); yükseklik:% 100; konum: mutlak; üst: kalk (var (- p) / 2); genişlik: var (- p); z- dizin: -1;
Artık kenarları hizaladığımıza göre, CSS şeridimiz bitti.
Aşağıda canlı demoyu tekrar kontrol edebilirsiniz. Lütfen bazı ek tarzları da kullandığını unutmayın..
