Anasayfa » Kodlama » CSS ile Boşaltma Sınır Tasarımı Nasıl Oluşturulur?

    CSS ile Boşaltma Sınır Tasarımı Nasıl Oluşturulur?

    Birlikte boşaltma sınır tasarımı kullanıcılara ne bulunabileceğini gösterebiliriz HTML öğesinin kenarlık alanının altında. Bu görev genellikle tarafından çözülür. iki veya daha fazla blok elemanının istiflenmesi (çoğu durumda divs) farklı boyutlarda Birbirinin üstünde. Öncelikle bu kolay bir çözüm gibi gözükse de, mizanpajı birçok kez tekrar kullanmak, öğelerin etrafında hareket etmek, tasarımı mobil cihazlar için optimize etmek veya kodu korumak istediğinizde daha sinir bozucu olur.

    Bu yazıda, size kullanan zarif bir CSS çözümü göstereceğim. sadece bir HTML elemanı aynı etkiyi elde etmek için. Bu teknik aynı zamanda erişilebilirlik için mükemmeldir. arka plan görüntüsünü CSS’e yükler, HTML’den ayrılmış.

    Bu yazının sonunda, nasıl yapılacağını bileceksiniz kenarlık alanında arka plan resmi gösterme oluşturmak için boşaltma sınır tasarımı aşağıda görebilirsiniz. Ayrıca tasarımı nasıl duyarlı hale getirebileceğinizi de göstereceğim. görünüm birimi kullanarak.

    İlk kod

    HTML cephesindeki tek gereksinim bir blok elemanı:

     

    İhtiyacımız olacak yeniden ölçüleri (genişlik ve yükseklik) ve kenarlık genişlik değerleri div, bu yüzden onları tanıtıyorum CSS değişkenleri olarak. Değişken --w gösterir Genişlik arasında .cb blok elemanı, --h gösterir yükseklik, --b için gider sınır genişliği, ve --b2 kenarlık genişliği için 2 ile çarpılır. Sonradan son değişkenin kullanımını görürüz..

    Boyutlandırıyorum

    göreceli olarak vitrinin genişliğine, dolayısıyla kullanımı vw birim (isterseniz sabit birimleri kullanabilirsiniz).

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2);  
    Hızlı açıklama - vw ve vh birimler

    Birim vw temsil etmek 1/100inci görünüm genişliğinin genişliği. Örneğin, 50vw görünüm genişliğinin 50 bölümü 100 eşit parçaya dikey olarak dilimlenmiş, süre 50vh görünüm yüksekliğinin 50 bölümü 100 eşit parçaya yatay dilimlenmiş.

    Bir arka plan ekleyerek ve kenarlığı, yüksekliği ve genişliği ayarlayarak yukarıdaki kodu geliştirelim. önceden tanımlanmış CSS değişkenlerimizi kullanarak.

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2); arkaplan: url (bg.jpg); kenarlık: var (- b) katı saydam; yükseklik: var (- h); genişlik: var (- w);  

    İşte demonun şu anda nasıl görünmesi gerektiği:

    Arka plan resmini boyutlandırma

    Arka plan resmine ihtiyacımız var tüm alanını kapsamak

    sınır bölgesi dahil, bu yüzden arka plan resmi olması gerekiyor buna göre boyutlandırılmış.

    Arkaplan resmine sabit bir boyut vermek istiyorsanız, yalnızca verdiğiniz boyutun, resmin sınır alanını kaplamasını sağladığından emin olun.

    yanı sıra. Yayında kullanılan kod gelince, işte arka fon değer veriyorum:

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2); arkaplan: url (bg.jpg) merkez / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); kenarlık: var (- b) katı saydam; yükseklik: var (- h); genişlik: var (- w);  

    arka plan görüntüsünün genişliği [hesaplanan (var (- w) + var (- b2))] toplamı div genişliği [var (w -)] ve sol ve sağ sınırların genişliği [var (- b2)].

    Benzer şekilde arka plan görüntüsünün yüksekliği [hesaplanan (var (- h) + var (- b2))] toplamı div yüksekliği [var (- h)] ve üst ve alt kenarlıkların genişliği [var (- b2)].

    Bu şekilde, arka plan görüntüsünü, boyutuyla aynı olan bir alana boyutlandırdık. div (sınır bölgesi dahil).

    merkez anahtar kelime arka plan resmini hizalar ortasına div.

    Not: Dolgu ekliyorsanız div, Hatırla dolgu alanı dahil arka plan boyutuna da sınır bölgesi ile aynı.

    Şu an elimizde olan bu:

    Sınır dışı bölgeyi kaplayın

    Şimdi sınır kapsayıcı alanı arka plan görüntüsü ile kapattık, geriye kalan tek şey sınırın içindeki orta alanı kaplayın (Kenarlık dışı alan) için düz bir renge sahip. kutu gölge ilave.

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2); arkaplan: url (bg.jpg) merkez / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); kenarlık: var (- b) katı saydam; kutu-gölge: iç metin var (- w) 0 0 rgba (0,120,237, 5); yükseklik: var (- h); genişlik: var (- w);  

    Değeri olan yatay gölge var (w -) tüm genişliğini kapsar div. Kullanımı RGBA renk fonksiyonu sağlar bazı şeffaflık karışıma eklenecekse de, orta bölgeyi tamamen kapatmak istiyorsanız, opak bir renk de kullanabilirsiniz..

    İle ekstra bir sınır ekle kutu gölge

    Codepen demosunda görüntünün etrafında beyaz bir kenarlık görebilirsiniz. Ünlü bir numara var Birden fazla kenarlık oluşturmak için kutu gölgeleri kullanma-aynı tekniği kullanabiliriz bir veya daha fazla düz renkli kenarlık ekleyin tasarımımıza.

    Güncellendi kutu gölge değer şudur:

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2); arkaplan: url (bg.jpg) merkez / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); kenarlık: var (- b) katı saydam; kutu-gölge: gömülü var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 hesaplanan (var (- b) / 2) beyaz; yükseklik: var (- h); genişlik: var (- w);  

    hesaplanan (var (- b) / 2) işlevi bir gölge yaratır sınır genişliğinin yarısı.

    İsteğe bağlı: Ayrı düzen ve estetik

    Son Codepen demomda, arkaplan resminin kodunu ve kutu-gölge rengini yerleştirdim ayrı bir sınıfa. Bu isteğe bağlı, ama isterseniz son derece yararlı olabilir boşaltma kenarlığı tasarımının düzenini yeniden kullanmak Birden çok öğede, bağımsız olarak her öğe için estetik (arka plan görüntüsü + renk) ekleyin..

    Adlı bir sınıf ekledim .poster1 -e

    bu hedefi başarmak için.

     .poster1 - tbgc: rgba (0,120,237, 5); background-image: url ("http://bit.ly/2eQBij2");  

    Dan beri arka fon kestirme bir özelliktir, uzun soluklu özellikleri tek tek geçersiz kılınabilir / ayarlanabilir. Dolayısıyla, ayarlayabiliriz arka plan görüntüsü içinde .poster1, ve url değerini arka fon mülk .cb.

    Değerini ayarlamak için kutu gölge, kullanabiliriz başka bir CSS değişkeni. --tbgc değişken renk değerini tutar biz de stil kurallarının arasında, kutu gölgesine (gösterideki lightblue) vermek istiyoruz .cb Biz renk değerini değiştirin. kutu gölge ile özellik var (- tbgc).

     .cb --w: 35vw; -h: 40vw; -b: 4vw; -b2: hesaplanan (var (- b) * 2); arkaplan: orta / hesapla (var (- w) + var (- b2)) hesapla (var (- h) + var (- b2)); kenarlık: var (- b) katı saydam; kutu-gölge: inset var (- w) 0 0 var (- tbgc), 0 0 0 hesaplanan (var (- b) / 2) beyaz; yükseklik: var (- h); genişlik: var (- w);  

    Portre modu için kod

    Boyutların hepsi ünitede olduğundan vw, olacak çok küçük görünmek Tasarımı portre modunda (yüksekliğe göre daha küçük genişlik) görüntülerken - tüm mobil cihazlarda varsayılan olarak bulunur. Bu sorunu çözmek için, şalter vw ile vh, ve tasarımı yeniden boyutlandır portre modlarına uygun gördüğünüz gibi.

     @ media (oryantasyon: portre) .cb --w: 35vh; -h: 40vh; -b: 4vh;  

    Not: Unutma viewport meta etiketini ekle mobil görünüm için optimize etmeye karar verdiyseniz HTML sayfanıza gidin.

    © Savtec
    Yararlı bilgi ve web geliştirme ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden yükleyin. Sıfırdan site ve uygulama oluşturma.