Hogyan készítsünk kivágott határtervezést CSS-sel
Val,-vel kivágott határtervezés megmutathatjuk a felhasználóknak, hogy mi található egy HTML elem határterülete alatt. Ezt a feladatot jellemzően a két vagy több blokkelem egymásra rakása (a legtöbb esetben divs) különböző méretű egymás tetején. Először is ez egy egyszerű megoldás, de egyre több frusztráló lesz, ha többször szeretné használni az elrendezést, mozogni az elemek között, optimalizálni a mobil tervezését, vagy megtartani a kódot.
Ebben a bejegyzésben egy elegáns CSS-es megoldást fogok mutatni neked csak egy HTML elem azonos hatás eléréséhez. Ez a technika nagyszerű a hozzáférhetőség szempontjából is betölti a háttérképet a CSS-be, elkülönítve a HTML-től.
A hozzászólás végére tudni fogja, hogyan kell háttérkép megjelenítése a határ menti területen annak létrehozásához kivágott határtervezés alább látható. Azt is megmutatom, hogy hogyan tudod reagálni a designra nézetablak-egységek használatával.
Kezdeti kód
A HTML front egyetlen követelménye a blokk elem:
Meg kell újrafelhasználás a méretek (szélesség és magasság) és a szélesség szélességének értékei div, így bemutatom őket mint CSS változók. A változó --w a szélesség a .cb blokk elem, --h jelzi magasság, --b a határ szélessége, és --b2 a szélesség szélességével szorozva 2. Később látjuk az utolsó változó használatát.
Én méretezem Az egység Javítsuk a fenti kódot egy háttér hozzáadásával és a határ, magasság és szélesség beállításával az előre meghatározott CSS változóink használatával. Az alábbiakban bemutatjuk, hogyan néz ki a demó most: Szükségünk van a háttérképre az egész területet lefedik Ha a háttérképet rögzített méretben szeretné megadni, csak győződjön meg róla, hogy az Ön által megadott méret lehetővé teszi, hogy lefedje a A a háttérkép szélessége [ Hasonlóképpen a a háttérkép magassága [ Ily módon a háttérképet egy olyan területre méreteztük, amely azonos a méretével A Jegyzet: Ha hozzáadsz párnát a Ez az, amit most megvan: Most, hogy a háttérképet fedő területet lefedtük, mindössze az fedje le a határ közepét (határ-exkluzív terület) tömör színnel, amelyért a A vízszintes árnyék értékkel A Codepen demóban látható egy fehér szegély a kép körül. Van egy híres trükk a doboz-árnyékok segítségével több határt hozhat létre-ugyanazt a technikát használhatjuk adjunk hozzá egy vagy több szilárd színű szegélyt a tervezéshez. A frissítés A Az utolsó Codepen demómban elhelyeztem a háttérkép és a box-shadow szín kódját egy külön osztályba. Ez választható, de nagyon hasznos lehet, ha szeretné újrahasznosítsa a kivágott határtervezés elrendezését több elemben, és minden egyes elemhez hozzáadjuk az esztétikát (háttérkép + szín). Hozzáadtam egy nevezett osztályt Mivel A Mivel a méretek az egységben vannak Jegyzet: Ne felejtsd el hozzáadja a nézetablak-meta tagot HTML-oldalára, ha úgy döntött, hogy optimalizálja azt mobil nézetre.vw egység (ha akarja, fix egységeket használhat). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2);
Gyors magyarázat -
vw és vh egységekvw az 1/100th a nézetablak szélessége. Például, 50vw 50 nézetablak szélessége függőlegesen szeletelve 100 egyenlő részre, míg 50vh 50 nézetablak magassága vízszintesen szeletelve 100 egyenlő részre. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2); háttér: url (bg.jpg); határ: var (- b) szilárd átlátszó; magasság: var (- h); szélesség: var (- w);
A háttérkép méretét
háttér értéket adok neki: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2); háttér: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); határ: var (- b) szilárd átlátszó; magasság: var (- h); szélesség: var (- w);
Calc (var (- w) + var (- b2))] a a div [var (- W)] és a a bal és jobb szélek szélessége [var (- b2)].Calc (var (- h) + var (- b2))] a a div magassága [var (- h)] és a a felső és az alsó határok szélessége [var (- b2)].div (beleértve a határterületet).központ kulcsszó igazítja a háttérképet a központ közepére div.div, emlékezni tartalmazza a padding területet a háttérmérethez hasonlóan, ugyanúgy, mint a határterület.
Fedjük le a határ-exkluzív területet
box-shadow betétlap. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2); háttér: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); határ: var (- b) szilárd átlátszó; box-shadow: betét var (- w) 0 0 rgba (0,120,237, .5); magasság: var (- h); szélesség: var (- w);
var (- W) a teljes div. A ... haszna RGBA színes funkció lehetővé teszi némi átláthatóság hozzá kell adni a keverékhez, de akkor is használhat átlátszatlan színt, ha teljes mértékben lefedi a középső területet.
Adjon hozzá egy extra határt
box-shadowbox-shadow értéke: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2); háttér: url (bg.jpg) center / calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); határ: var (- b) szilárd átlátszó; doboz-árnyék: betét var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 számított (var (- b) / 2) fehér; magasság: var (- h); szélesség: var (- w);
Calc (var (- b) / 2) funkció létrehoz egy árnyékot a szélesség szélességének fele.
Választható: külön elrendezés és esztétika
.poszter1 hoz .poszter1 --tbgc: rgba (0,120,237, .5); háttérkép: url ("http://bit.ly/2eQBij2"); háttér egy rövidített tulajdonság, a hosszútávú tulajdonságait külön-külön lehet felülírni / beállítani. Ezért beállíthatjuk háttérkép ban ben .poszter1, és távolítsa el az url értékét a háttér ingatlan .cb.box-shadow, tudjuk használni másik CSS változó. A --tbgc változó tartja a színértéket azt szeretnénk adni a doboz-árnyéknak (világoskék a demóban), így a stílusszabályok között .cb mi cserélje ki a szín színértékét box-shadow ingatlan a var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: számított (var (- b) * 2); háttér: középpont / számított (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); határ: var (- b) szilárd átlátszó; box-shadow: betét var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) fehér; magasság: var (- h); szélesség: var (- w);
Portré mód
vw, fog túl kicsi amikor a tervezést álló módban (a magassághoz képest kisebb szélességben) nézed meg, ahol minden mobileszköz alapértelmezés szerint van. A probléma megoldása, kapcsoló vw val vel vh, és átméretezi a tervet amint látja, alkalmas a portré módokra. @media (tájolás: portré) .cb --w: 35vh; --h: 40vh; --b: 4vh;
