Jak vytvořit výřez hraniční design s CSS
S design hranic uživatelům můžeme ukázat, co lze nalézt pod hraniční oblastí elementu HTML. Tento úkol obvykle řeší stohování dvou nebo více blokových prvků (ve většině případů divs) různých velikostí na sebe. Nejprve se to jeví jako snadné řešení, ale je více frustrující, když chcete rozložení použít opakovaně, pohybovat se po prvcích, optimalizovat design pro mobilní zařízení nebo zachovat kód.
V tomto příspěvku vám ukážu elegantní řešení CSS, které používá pouze jeden element HTML dosáhnout stejného účinku. Tato technika je také skvělá pro přístupnost načte obrázek pozadí v CSS, odděleny od HTML.
Na konci tohoto příspěvku budete vědět, jak na to zobrazit obrázek na pozadí v pohraniční oblasti pro vytvoření design hranic můžete vidět níže. Také vám ukážu, jak můžete design reagovat pomocí zobrazovacích jednotek.
Počáteční kód
Jediným požadavkem v HTML frontě je prvek bloku:
Musíme to udělat opětovné použití rozměry (šířka a výška) a hodnoty šířky okraje div, Tak jim představuji jako proměnné CSS. Proměnná --w označuje šířka z .cb prvek bloku, --h označuje jeho výška, --b jde pro šířka okraje, a --b2 pro šířku ohraničení vynásobenou číslem 2. Později uvidíme použití poslední proměnné.
Dělám to Jednotka Pojďme zlepšit výše uvedený kód přidáním pozadí a nastavením ohraničení, výšky a šířky pomocí našich předdefinovaných CSS proměnných. Zde je ukázka, jak má demo vypadat právě teď: Potřebujeme obrázek na pozadí pokrývají celou oblast Pokud chcete dát obrázek na pozadí pevnou velikost, jen se ujistěte, že velikost, kterou dáváte, umožňuje, aby pokrýval hraniční oblast šířku obrázku na pozadí [ Podobně obrázek na pozadí [ Tímto způsobem jsme obrázek na pozadí na velikost, která je stejná jako velikost Poznámka: Pokud přidáváte polstrování k Právě teď máme: Teď, když jsme pokryli oblast s ohraničením včetně obrázku na pozadí, vše, co zbývá, je pokrývají středovou oblast uvnitř hranice (okrajově exklusivní prostor) s plnou barvou, na kterou se dostaneme po Horizontální stín s hodnotou V ukázce Codepen můžete vidět bílý rámeček kolem obrázku. Je tu slavný trik použití stínů boxů k vytvoření více ohraničení-můžeme použít stejnou techniku přidat jednu nebo více barevných hran k našemu designu. Aktualizováno V mém posledním demoverzi Codepen jsem umístil kód na pozadí a barvu boxu do samostatné třídy. Tohle je volitelný, ale může být velmi užitečné, pokud chcete opětovně použít rozvržení návrhu hraničních hran ve více prvcích a přidejte estetiku (obrázek na pozadí + barvu) pro každý prvek nezávisle. Přidal jsem třídu pojmenovanou Od té doby Nastavení hodnoty Protože všechny rozměry jsou v jednotce Poznámka: Nezapomeňte přidat metaznačku výřezu na stránku HTML, pokud jste se rozhodli pro její optimalizaci pro mobilní zobrazení.vw jednotka (můžete použít pevné jednotky, pokud chcete). .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2);
Rychlé vysvětlení -
vw a vh Jednotkyvw představuje 1/100th šířky výřezu. Například, 50vw je 50 částí šířky výřezu nakrájíme vertikálně na 100 stejných dílů, zatímco 50vh je 50 částí výšky výřezu nakrájíme vodorovně na 100 stejných dílů. .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2); background: url (bg.jpg); hranice: var (- b) pevná průhledná; výška: var (- h); width: var (- w);
Velikost obrázku na pozadí
Pozadí hodnota, kterou dávám: .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2); pozadí: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranice: var (- b) pevná průhledná; výška: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] je součtem šířka div [var (- w)] a šířku levé a pravé hranice [var (- b2)].calc (var (- h) + var (- b2))] je součtem výška div [var (- h)] a šířka horního a dolního okraje [var (- b2)].div (včetně pohraniční oblasti) \ t.centrum klíčové slovo zarovná obrázek na pozadí do centra div.div, pamatujte včetně oblasti čalounění na velikost pozadí stejně jako u pohraniční oblasti.
Pokryjte okrajově exkluzivní prostor
box-stín vložka. .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2); pozadí: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranice: var (- b) pevná průhledná; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); výška: var (- h); width: var (- w);
var (- w) pokrývá celou šířku div. Použití rgba funkce barev umožňuje určitá průhlednost přidávat do směsi, ale můžete také použít neprůhlednou barvu, pokud chcete plně pokrýt středovou oblast.
Přidejte další ohraničení
box-stínbox-stín hodnota je: .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2); pozadí: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranice: var (- b) pevná průhledná; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) bílá; výška: var (- h); width: var (- w);
calc (var (- b) / 2) funkce vytváří stín polovinu šířky okraje.
Volitelné: Samostatné uspořádání a estetika
.poster1 na .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); Pozadí je zkrácená vlastnost, jeho vlastnosti longhand mohou být přepsány / nastaveny individuálně. Můžeme tedy nastavit pozadí v .poster1, a odebrat hodnotu url z Pozadí nemovitost v .cb.box-stín, můžeme použít další proměnnou CSS. --tbgc proměnná drží hodnotu barvy chceme dát box-shadow (lightblue v demo), tak mezi pravidla stylu pro .cb my nahradit barevnou hodnotu box-stín vlastnictví s var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; -b2: calc (var (- b) * 2); pozadí: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranice: var (- b) pevná průhledná; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) bílá; výška: var (- h); width: var (- w);
Kód pro režim na výšku
vw, bude vypadají příliš malé když si prohlížíte design v režimu na výšku (menší šířka vzhledem k výšce) - ve výchozím nastavení jsou všechna mobilní zařízení ve výchozím nastavení. K řešení tohoto problému, přepínač vw s vh, a změnit velikost návrhu jak vidíte pro režimy na výšku. @media (orientace: na výšku) .cb --w: 35vh; --h: 40vh; - b: 4vh;
