Ako vytvoriť návrh hraničnej hranice s CSS
S dizajn okrajov môžeme používateľom zobraziť, čo sa dá nájsť pod hraničnou oblasťou prvku HTML. Táto úloha je zvyčajne vyriešená stohovanie dvoch alebo viacerých prvkov bloku (vo väčšine prípadov divs) rôznych rozmerov navzájom nad sebou. Najskôr sa to zdá jednoduché riešenie, ale je to viac frustrujúce, keď chcete opakovane používať rozloženie, pohybovať sa okolo prvkov, optimalizovať dizajn pre mobilné zariadenia alebo udržiavať kód.
V tomto príspevku vám ukážem elegantné riešenie, ktoré používa iba CSS iba jeden prvok HTML na dosiahnutie rovnakého účinku. Táto technika je tiež skvelá pre prístupnosť, pretože načíta obrázok na pozadí v CSS, oddelené od HTML.
Do konca tohto príspevku budete vedieť zobraziť obrázok v pozadí v oblasti hraníc s cieľom vytvoriť dizajn okrajov môžete vidieť nižšie. Ukážem aj to, ako môžete dizajn reagovať pomocou jednotiek zobrazovacích jednotiek.
Počiatočný kód
Jedinou požiadavkou v prednej časti HTML je a prvok bloku:
Budeme musieť opätovné rozmery (šírka a výška) a hodnoty šírky ohraničenia div, preto ich predstavujem ako premenné CSS. Premenná --w označuje šírka z .cb prvok bloku, --hod označuje jeho výška, --b ide za hraničná šírka, a --b2 pre šírku hranice vynásobenú 2. Neskôr sa zobrazí použitie poslednej premennej.
Ja som veľkosť Jednotka Skúste vylepšiť uvedený kód pridaním pozadia a nastavením okraja, výšky a šírky pomocou našich preddefinovaných premenných CSS. Tu je návod, ako má demoverzia vyzerať: Potrebujeme obrázok na pozadí pokryť celú oblasť Ak chcete dať obrázok na pozadí pevnej veľkosti, len sa uistite, že veľkosť, ktorú dáte, umožňuje pokryť hraničnú oblasť šírka obrazu pozadia [ Podobne výška pozadia na pozadí [ Týmto spôsobom sme veľkosť pozadia zmenili na oblasť, ktorá je rovnaká ako veľkosť Poznámka: Ak pridávate polstrovanie do Práve to máme práve teraz: Teraz, keď sme pokryli oblasť zahŕňajúcu hranice s obrazom pozadia, všetko, čo zostáva, je pokryte stredovú oblasť vnútri ohraničenia (oblasť exkluzívnej oblasti) s plnou farbou, pre ktorú dosahujeme Horizontálny tieň s hodnotou V kópii Demo môžete vidieť biely okraj okolo obrázka. Je tu slávny trik pomocou stípacích polí na vytvorenie viacerých okrajov-môžeme použiť rovnakú techniku na pridať jeden alebo viac pevných farebných okrajov na náš dizajn. Aktualizované V mojom konečnom demo Codepen som umiestnil kód pre obrázok pozadia a farbu tieňovej krabice do samostatnej triedy. Toto je voliteľný, ale môže byť veľmi užitočné, ak chcete opätovne použite rozloženie konštrukcie okrajov vo viacerých prvkoch a pridať estetiku (obrázok na pozadí + farbu) pre každý prvok nezávisle. Pridal som triedu s názvom od tej doby Nastavenie hodnoty Pretože všetky rozmery sú v jednotke Poznámka: Nezabudnite pridajte metaznačku výrezu na vašu stránku HTML, ak ste sa rozhodli ju optimalizovať pre mobilné zobrazenie.vw jednotka (ak chcete, môžete použiť pevné jednotky). .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2);
Rýchle vysvetlenie -
vw a vh Jednotkyvw predstavuje 1/100th šírky výrezu. Napríklad, 50vw je 50 častí šírky zobrazenia rozrezané vertikálne na 100 rovnakých častí, zatiaľ čo 50vh je 50 častí výšky výrezu rozrezané vodorovne na 100 rovnakých častí. .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2); pozadie: url (bg.jpg); hranica: var (- b) pevná transparentná; výška: var (- h); šírka: var (- w);
Veľkosť obrázka pozadia
pozadie hodnota, ktorú dám: .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2); pozadie: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranica: var (- b) pevná transparentná; výška: var (- h); šírka: var (- w);
calc (var (- w) + var (- b2))] je súčet šírka div [var (- w)] a šírka ľavého a pravého okraja [var (- b2)].calc (var (- h) + var (- b2))] je súčet výška div [var (- h)] a šírka horných a spodných okrajov [var (- b2)].div (vrátane pohraničnej oblasti).centrum kľúčových slov zarovnáva obrázok pozadia do stredu div.div, pamätajte zahrňte oblasť čalúnenia na veľkosť pozadia rovnako ako hraničné oblasti.
Zakryť oblasť exkluzívnej hranice
box-shadow vložiť. .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2); pozadie: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranica: var (- b) pevná transparentná; box-tieň: vložka var (- w) 0 0 rgba (0,120,237, .5); výška: var (- h); šírka: var (- w);
var (- w) pokrýva celú šírku div. Použitie RGBA farebná funkcia umožňuje istá transparentnosť ktoré chcete pridať do mixu, môžete však použiť aj nepriehľadnú farbu, ak chcete úplne zakryť stredovú oblasť.
Pridajte ďalšiu hranicu
box-shadowbox-shadow hodnota je: .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2); pozadie: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranica: var (- b) pevná transparentná; box-shadow: vložka var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) biela; výška: var (- h); šírka: var (- w);
calc (var (- b) / 2) funkcia vytvára tieň polovica šírky ohraničenia.
Voliteľné: Samostatné rozloženie a estetika
.poster1 na .plagát1 - tbgc: rgba (0,120,237, .5); obrázok na pozadí: url ("http://bit.ly/2eQBij2"); pozadie je vlastnosť skratky, jeho vlastnosti z dlhého ruky je možné prepísať / nastaviť individuálne. Preto môžeme nastaviť background-image v .poster1, a odstráňte hodnotu url z pozadie nehnuteľnosť v .cb.box-shadow, môžeme použiť ďalšie premenné CSS. --tbgc premenlivý uchováva hodnotu farby chceme dať do box-tieňa (lightblue v demo), tak medzi pravidla štýlu pre .cb my vymeňte hodnotu farby box-shadow nehnuteľnosť s var (- tbgc). .cb - w: 35vw; - h: 40vw; -b: 4vw; -b2: calc (var (-b) * 2); pozadie: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); hranica: var (- b) pevná transparentná; box-shadow: vložka var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) biela; výška: var (- h); šírka: var (- w);
Kód pre režim na výšku
vw, to bude vyzerajú príliš malý pri prezeraní dizajnu v režime na výšku (menšia šírka v porovnaní s výškou), v ktorej sú všetky mobilné zariadenia štandardne. Vyriešiť tento problém, prepínač vw s vh, a zmena veľkosti dizajnu ako uznáte za vhodné pre režimy na výšku. @media (orientácia: na výšku) .cb - w: 35vh; -h: 40vh; -b: 4 vh;
