Mivel az oldalak elrendezése egyre nehezebbé válik, a fejlesztőknek hozzáférést igényelnek a több mérési egységhez a tervezés megtestesítéséhez. A szokásos érdeklődés mellett az EM és a REM, és a képpontok a VW és VH mérési egységek is vannak, mind a vmin, mind a VMAX kapcsolódva, ami erősebb módokat teremt a létrehozáshoz adaptív tervezésamelyek gyakran segíthetnek abban, hogy elhagyják a @Media átmeneti pontok használatát.
Menjünk túl az érdeklődésre
A hagyományos CSS mérőegységek létrehozzák a következő problémákat a webdesignban:
- A mérési egység százalékos aránya nem mindig működik a várt módon. A fejlesztőknek emlékezniük kell a külső lerakódásokra, meghatározzák az elemek méretét. Ne használjon mérési százalékos mérést a testelem magasságának beállításához. FIGYELMEZTETÉS FONT-MÉRET: 50% Megadja a szabvány méretének felét megegyező szövegméretet, és nem állapítja meg a szöveg méretét és az elemet tartalmazó elemének méretét.
- Szinte lehetetlen a tökéletes formában a böngészőablak különböző méretű alakjainak létrehozása. Nagyon nehéz biztosítani, hogy az elem tökéletesen négyzet és egyidejűleg adaptív.
A VW és VH mérési egységei nagyrészt megoldják ezeket a problémákat.
Ideális arányok támogatása
A VW és VH mérési egységeket használva nagyon könnyű tökéletes figurákat hozni a weboldalakon. Ezek az egységek szinte minden méretének meghatározására használhatók cSS tulajdonságok. Ezért, ha kell, hogy hozzon létre egy elemet, hogy minden böngésző ablakot, akkor úgy 20% a szélessége és az is marad tér, meg kell adnia ugyanazokat az értékeket a szélesség és magasság tulajdonságokat a VW mértékegysége:
Div.twentysquare (háttér: # 999 ; Szélesség: 20VW; Magasság: 20VW; )
Nézd meg az alábbi példa bemutatását, menjen a linkre, és próbálja meg megváltoztatni a megtekintési egység méretét a számok méretének megváltoztatásához.
Ugyanezzel a módszerrel könnyen létrehozhat egy téglalapot, amelynek magassága kétszer annyi, mint a böngészőablak bármilyen méretével:
Div.networect (szélesség: 20VW, magasság: 40VW;)
Banner beállítása A tökéletes méretarány nagyon egyszerű a következő CSS-kóddal:
Div.goldenrect (szélesség: 100VW, magasság: 61 .8vw, háttér: piros;)
Az optimális szöveges méretezéshez egy adaptív blokkban vegyen részt az összes adott mennyiségben, csak be kell állítania a betűméretet a VW mérési egységekben.
Fordítás - djurka
A szerzőtől: Téglalap belsejében téglalapok: Ez az, hogy a weboldalainkat mindig építették. A CSS-t hosszú ideig megpróbáltuk eltávolítani ezeket a korlátozást, hogy geometriai alakokat hozzon létre, de ezek a számok soha nem befolyásolták a díszített elemek belsejében lévő tartalmat, vagy ha más elemek az oldalon viszonylag díszítettek.
Az adatok új CSS-specifikációja megváltoztatja a dolgok jelenlegi helyzetét. Az Adobe által 2012 közepén bemutatott, célja, hogy a webes tervezők képesek legyenek megváltoztatni a tartalom áramlását a viszonylag összetett számok - valami, amit nem tudtunk elérni, még a JavaScript használatával is.
Például figyeljen arra, hogy a szöveges képeket a következő tervezésben fordítsa. Ábrák nélkül a szöveg négyszögletes formájú lenne - kifinomult vételt dobva, amely felemeli a designot a következő szintre.
Ne feledje, hogy a szöveg a lemez szélei mentén kerekített alakot vesz igénybe. A CSS-számok használatával létrehozhatunk egy hasonló kialakítást és egy weboldalt.
Nézzük meg részletesen, hogy a számok hogyan működnek, és hogyan lehet használni őket.
Böngésző támogatás
A CSS-számok továbbra is csak a Webkit éjszakai és krómozott kanáriban vannak támogatva, de az 1-es szintű modul elérte a jelölt ajánlás állapotát, így a specifikációban meghatározott tulajdonságok és szintaxis meglehetősen stabil. Egy kis időt vesz igénybe, mielőtt a többi böngésző megkezdi fenntartani őket. Ez a szint az olyan számok tulajdonságaira koncentrálódik, amelyek megváltoztatják az ábrán körüli tartalom áramát. Különösen az alakon kívüli tulajdonságra koncentrál, és kapcsolódik hozzá.
Kombinálva más közelmúltbeli képességek, mint a vágás és a borítása maszk, CSS szűrők és collance és összevonása, CSS számok lehetővé teszi számunkra, hogy hozzon létre egy bonyolultabb tökéletes design, anélkül, hogy igénybe grafikus szerkesztők, mint a Photoshop és az InDesign.
A jövőbeli CSS-szintek számok is figyelmet fordítanak az ábrákon belüli tartalom kialakítására is. Például ma elég ahhoz, hogy egyszerűen hozzon létre egy rombikus alakot a CSS-en: csak forgassa az elemet 45 fokra, majd kapcsolja be a tartalmat ellentétes irányHogy az oldal vízszintesen helyezze el. De a rombuszon belüli tartalom nem veszi meg a megfelelő formát, és mindig négyszögletes marad. Mire a forma-belső tulajdonság megvalósul, a tartalmat is rombuszos, létrehozhatunk egy jelölést, hasonlóan az alábbi képhez.
Hamarosan a CSS-adatok is lehetővé teszik a szöveg belsejében, mint ezek a gyémántok, hogy vágás vagy túlcsordulás helyett a szöveg a konténer széleihez viszonyítva volt.
A CSS-adatok ma a Chrome Kanári-ban történő használatához engedélyeznie kell a hozzáférhető kísérleti funkciókat.
CSS-ábrák létrehozása
Az alakot az elemre az alakok tulajdonságai segítségével alkalmazhatja. Az ábra értékét az érték minőségében átadja. A funkciószám a kód azon része, ahol átadja azokat a paramétereket, amelyek meghatározzák az elemre, amelyet az elemre szeretnének alkalmazni.
A számok az alábbi funkciók egyikével hozhatók létre:
Minden ábrát egy pont határozza meg. Egyes funkciók pontokat tartalmaznak, mint paraméterek; Mások - Elfogadják az offset paramétereket, de végül az elemek számát idézik. Elemezzük a példák mindegyik funkciójának paramétereit.
Az ábra az alfa-csatorna eltávolításával is meghatározható a képen. Ha a képet az alakzathoz továbbítják, akkor a böngésző a kép alakját a forma-kép-küszöbérték alapján visszakerül. Az ábrát képpontok határozzák meg, amelynek alfa értéke a megadott küszöbérték felett van. A képnek rendelkeznie kell az CAS-kompatibilitással. Ha valamilyen okból biztosított ok nem áll rendelkezésre (például nem létezik), akkor nem kerül sor.
Az alábbi ábrák a fentiekben ismertetett funkciókat értékek:
shape-out: okozza a tartalmat, hogy megfordítsa az alakot (kívül)
shape-Inside: A tartalom az alak alakja belülről
A forma-külső tulajdonságot formálja az alakjával kombinálva annak érdekében, hogy hozzáadjon egy külső fűtést az ábra körül, amely a tartalmat az alakból mozgatja, így a hely közöttük. A forma-margin tulajdonságot is megkapja, hogy a Shape-Margin tulajdonságot megkapja a forma-padding tulajdonság, amely hozzáad egy belső fűtést.
Az ábra vagy funkció tulajdonságai segítségével kijelölve az alak elemét, csak egy vonalcsökkenési kóddal teheti meg:
Elem (forma kívül: kör (); / * tartalom fogja küzdeni az elemre * /)
Elem (alak-külső: URL (útvonal / to / image-with-shape.png);)
Elem (alak - külső: URL (út / to / kép - forma. PNG);) |
De ... Ha ezt a vonalat CSS kódot alkalmazza az elemre, akkor az ábra nem kerül felhasználásra, ha a következő feltételek nem teljesülnek:
Az elemnek lebegnie kell. A jövőbeli CSS-szintek szintjei lehetővé teszik számunkra, hogy meghatározzuk a nem lebegő elemek számát, de nincs ilyen lehetőség.
Meg kell adni az elemet. Az elem által meghatározott magasság és szélesség a koordináta-rendszer létrehozására szolgál.
Ahogy a fenti funkciókban láttad, az ábrákat egy ponttal határozza meg. Mivel a pontok koordinátákkal rendelkeznek, a böngésző megköveteli a koordináta-rendszert, hogy tudja, hol kell az elemet az elemen. Így a példa a fentiekben működik, ha a következő:
Elem (úszó: balra; magasság: 10em; szélesség: 15em; alakú kívül: kör ();)
Elem (úszó: balra; magasság: 10em; szélesség: 15em; alak - kívül: kör ();) |
Azonban bizonyos méretű feladatokat nem érinti az érzékenység (később fogunk beszélni). Mivel az egyes számok egy pár koordinátát használó pontokként vannak meghatározva, a pont koordinátái változása befolyásolja a létrehozott számot. Például a következő ábra azt mutatja, hogy a poligon () függvény segítségével létrehozható hexagont. Az ábra hat pontból áll. Megváltoztatása vízszintes koordinátáját narancssárga pont meg fogja változtatni a végleges szám, és az is befolyásolja a tartalmának elhelyezése külső / belső bármely tételt, amelyre a szám alkalmazzák.
Ha az elem lebeg, és egyenlő a jobb szélével, akkor egy számot alkalmaznak rá, a bal oldali tartalom megváltoztatja a helyét, ha az egyik narancssárga pont koordinátát a poligon () függvényen belül megváltoztatják.
Referenciablokk ábra
A CSS-számok meghatározzák és létrehozhatók a referenciablokkban (referenciakezdés), ahol az ábra húzódik. Az elem magassága és szélessége mellett az elem-margin doboz, a tartalomdoboz, a padding doboz és a határ doboz blokkmodellje is könyvtárak az elem alakjának meghatározására.
Alapértelmezés szerint a külső visszatérő egység (margin doboz) hivatkozásként használható, így ha az az elem, amelyhez az ábrát alkalmazza, már van egy külső francia bekezdés, az ábra a külső visszatérés szélén véget ér, a határ. Ha egy blokkmodell más értékét szeretné használni, megadhatja az ábrát, hogy átadja az ábrát:
alakja kívül: kör (250px 50% 50%) padding-box;
alak - kívül: kör (250px 50% 50%) padding - doboz; |
A Padding-Box kulcsszó ebben a szabályban határozza meg az ábra és a korlátozás alkalmazását a padding doboz (a belső arrogancia területe) formájában. A kör () függvény határozza meg a kört, méretét és elhelyezését az elemhez képest.
A figurák meghatározása funkciók használatával
Elkezdjük azzal a ténnyel, hogy foglalkozunk a felhasználó avatarának körkörös képének információs szövegével, mint a felhasználói profil vagy a visszahívás.
A CSS formák használatával a felhasználói kép körül szövege áramlik, ahelyett, hogy egy téglalap alakú alakot takarít meg..
A kör () függvényt használjuk annak érdekében, hogy egy kerek alakú legyen a profilképhez a következő jelöléssel:
Lorem Ipsum Dolor Sit AMET, konzerturi adipising elit. Harum Itaque Nam Banditis Eveniet Enim Eligendi Quae Adipisci?
FIGYELMEZTETÉS BLANDITIIS VOLUPTAS TEMPORE PORRO QUIBUSDAM BEATAE DELENITI QUOD Aspperes Sapiente Dolorem hiba! Quo Nam Quasi Soluta Repherit Laudantium Optio Ipsam Ducimus Cheath ENIM FUKA QUIBUSDAM MOLLITIA NESCIUNT MODI.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! Lang: profilkép" / > !}< p > Lorem Ipsum Dolor Sit AMET, konzerturi adipising elit. Harum Itaque Nam Banditis Eveniet Enim Eligendi Quae Adipisci?< / p > < p > FIGYELMEZTETÉS BLANDITIIS VOLUPTAS TEMPORE PORRO QUIBUSDAM BEATAE DELENITI QUOD Aspperes Sapiente Dolorem hiba! Quo Nam Quasi Soluta Repherit Laudantium Optio Ipsam Ducimus Cheath ENIM FUKA QUIBUSDAM MOLLITIA NESCIUNT MODI.< / p > |
Megkérdezheted: "Miért nem alkalmazhatjuk a Border Radiust a képek kerekítéséhez?" Válasz: A Border Radius tulajdonság nem befolyásolja a tartalom helyét a tartalom belsejében és azon kívül, amelyhez alkalmazzák. Csak az elem vagy a háttér határait érinti. A hátteret lekerekített sarkokra vágják. Az elem belsejében lévő tartalom téglalap alakú marad, és az elemen kívüli tartalom is viselkedik, mintha az elem téglalap alakú marad.
A kerek képet a kerek kép elérése érdekében fogjuk használni - itt van, hogy mit csinálunk annak érdekében, hogy a képek vagy más elemek kerekíthessék az oldalon:
img (úszó: bal, szélesség: 150px, magasság: 150px; határ - sugara: 50%, margó - jobb: 15px;) |
CSS-adatok nélkül a szöveg egy négyzet alakú képet lát, és összeköti a négyzet alakú ábrát, és nem kerek.
A böngészőben, amely nem támogatja a CSS formákat, a kerek kép körüli tartalma úgy található, mintha nem kerek. Így fog kinézni a régi böngészőkben. A tartalom egyszerűsítése egy adott ábra körül, használja az ábra tulajdonságait.
img (úszó: balra, szélesség: 150px; magasság: 150px; határ-sugár: 50%; forma kívül: kör (); forma-margó: 15px;)
img (úszó: balra, szélesség: 150px; magasság: 150px, határvonal, sugara: 50%; alak - kívül: kör (); forma - margó: 15px;) |
A kód segítségével a szöveg képes lesz arra, hogy "lásd" a képre alkalmazott kerek alakot, és azt állíthatja, hogy az első képernyő schot. (Megnézheti az eredményt.) A böngészőkben, amelyek nem támogatják az ábrákat, úgy néz ki, mint a második kép.
Használhatja a kör () funkciót tiszta forma Vagy adja át a paramétereket. Itt van a hivatalos szintaxis:
kör () \u003d kör ([[
A kérdőjelek azt mutatják, hogy ezek a paraméterek opcionálisak és kimaradhatnak. A hiányzó paraméterek alapértelmezett értékeket fognak venni. Ha a CIRCLE () alkalmazást használja, ahelyett, hogy a pozíció közvetlen jelzése lenne, alapértelmezés szerint a kör középpontja az elem közepén lesz, amelyhez alkalmazza.
Beállíthat egy kör sugarat bármilyen hosszúságú hossz (px, em, pt stb.) A sugárat a legközelebbi oldalsó vagy legtávolabbi paraméterek alkalmazásával állíthatja be, de a legközelebbi oldal az alapértelmezett érték, amely azt jelenti, hogy a böngésző átveszi a sugár távolságot az elem középpontjától a legközelebbi oldalig, a legtávolabbi oldal a távolságot a központtól a távolabbi felé használja.
alakja kívül: kör (legtávolabbi oldal 25% 25%); / * Meghatározza azt a kört, amelynek sugara megegyezik a leghosszabb oldal felét, a koordinátarendszer 25% 25% -os 25% -kal * / alakja: kör (250px 500px 300px); / * Meghatározza a kört, amelynek középpontja 500px vízszintesen és 300px függőlegesen, 250px sugarú * /
Az Ellipse () függvény működik, valamint a kör (), ugyanazzal az értékekkel, kivéve, hogy a sugár paraméter helyett kettő: egy sugarúg a tengely mentén, a másik - az Axis-y.
ellipszis () \u003d ellipszis ([
A beágyazás () függvény nem közvetlenül kapcsolódik egy körhez vagy ellipszishez, akkor az elem belsejében téglalap alakú formák létrehozására szolgál. Mivel az elemek négyszögletesek, nem szükséges téglalapok létrehozása. Ehelyett a beágyazás () segíthet nekünk létrehozni téglalapokat kerekített sarkokkal, így a tartalom lekerekített sarkokban áramlik.
A beágyazás () függvény egy-négy offset paraméterből áll, amely meghatározza az eltolás a referenciaegység széléhez képest, amely meghatározza az elem belsejében lévő téglalap helyét. A lekerekített sarkok pontosan ugyanúgy jelennek meg, mint a határ-sugár, a négy érték egyikével, kulcsszóval kombinálva.
beágyazás () \u003d beágyazás (offset (1,4)?)
beágyazás () \u003d beágyazás (offset (1, 4) [forduló< border - radius > ] ? ) |
A következő kód létrehoz egy téglalapot kerekített sarkokkal egy lebegő elemen.
Elem (úszó: bal, szélesség: 250px; magasság: 150px; alakú kívül: beágyazás (0px forduló 100px) határon;)
Element (úszó: bal, szélesség: 250px, magasság: 150px; forma - külső: inset (0px forduló 100px) határon;) |
Az ábrák utóbbi jellemzője sokszög (), amely a bonyolultabb kétértelmű számokat minden pontszámmal határozza meg. A funkció tartalmaz egy sor gőzkoordinátát, ahol minden pár határozza meg a pont helyzetét.
A következő példában a lebegő kép a jobb szélén helyezkedik el, amely a képernyő teljes magasságát foglalja el, és a nézet ablak nézeteit használja. Azt szeretnénk, hogy a szöveg a bal oldali hegymászó homokóra a képen belül, és a poligon () függvényt használjuk a kép nem szabványos alakjának meghatározásához.
CSS A fenti kép kódja a következő:
img.Right (úszó: jobb, magasság: 100Vh, szélesség: számított: Calc (100VH + 100VH / 4); alakja kívül: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% %, 45% 40%);)
iMG. Jobbra (úszó: jobb; magasság: magasság: 100VH; szélesség: Calc (100VH + 100VH / 4); alakú - külső: poligon (40% 0, 100%, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
Beállíthatja a pontok koordinátáit, amelyek meghatározzák az ábrát hosszúságú vagy százalékos egységekben, mint én. Ez a kód megadja a szükséges eredményt, de ahogy látja, az ábra függvénye nem befolyásolja a kép hátralévő részeit a megadott számon kívül. Az a tény, hogy az ábra függvényének az elemhez való használata - függetlenül attól, hogy egy kép vagy egy tartály, vagy valami más - nem befolyásolja semmit, mint az egyszerűsítési tartalom területén. A háttér, a határok és minden más változatlan marad.
A létrehozott sokszög vizuálisan történő benyújtásához a képen kívül "vágtunk" részeket. Ez segít nekünk a CSS maszkoló modul specifikációjából származó klip-útvonal tulajdonságot.
A Clip-Path tulajdonság ugyanolyan funkciókat tartalmaz az alak és a jelentés, mint az ábra tulajdonát. Ha ugyanazt a sokszögű alakot adjuk, amelyet az alakon kívüli tulajdonsághoz használtunk, a klip-útvonal tulajdonság, a képen kívüli kép része.
img.Right (úszó: jobb, magasság: 100Vh, szélesség: számított: Calc (100VH + 100VH / 4); alakja kívül: poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% %, 45% 40%); / * Vágó képek az ábra kontúrján * / Clip-Path: sokszög (40% 0, 100% 0, 100% 100% 100%, 40% 100%, 45% % 40%););)
iMG. Jobbra (úszó: jobb; magasság: magasság: 100VH; szélesség: Calc (100VH + 100VH / 4); alakú - külső: poligon (40% 0, 100%, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * A képeket az ábra kontúrján * /clip - Path: Poligon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Az eredmény így néz ki:
A Clip-Path tulajdonság még mindig támogatott az előtagok mellett, azaz Krómban fog működni, az előtag -webkit hozzáadásával. Megnézheti a demót.
A Clip-Path tulajdonság egy csodálatos műhold az ábrához, mivel segíti a létrehozott formákat és a termésalkatrészeket az ábrán kívül, hogy nagyon gyakran használják őket együtt.
Poligon () függvény is elfogadható kulcsszó Kitölteni, ami lehet, hogy nonzero vagy egyenletes. Meghatározza, hogy a sokszög belsejében metsző területek hogyan viselkednek. Nézze meg az SVG kitöltési szabályokat a részletekért.
Ábra meghatározása kép segítségével
Az ábra a kép segítségével történő beállításához az alfacsatorna jelen kell lennie a képen, amelyből a böngésző kivonja a képet.
Az ábrát olyan pixelek határozzák meg, amelyek alfa értéke magasabb, mint egy bizonyos küszöbérték. Az alapértelmezett küszöbérték rendben van (teljesen átlátszó), vagy megadhatja közvetlenül az alakkép-küszöb-tulajdonság használatával. Így bármilyen átlátszatlan pixel használható a kép által meghatározott szám részeként.
A jövőbeli CSS-adatok lehetővé teszik a kép fényerő adatainak használatát az alfa-csatorna helyett. Ha ez megtörténik, a Shape-kép-küszöbértéket kiterjesztik, hogy egy küszöbértéket vagy fényerőt vagy alfa-csatornát tartalmazza, a kapcsolási állapottól függően.
A következő képet használjuk az elem alakjának meghatározásához, és arra kényszerítjük a szöveget, hogy megvizsgálja:
Természetesen, ha az elem hátterét alkalmazta, a háttérnek a megadott számon kell vágnia. A maszkképek (a megfelelő előtagokkal) a maszkok modulból segíthet ebben, mivel a klip-útvonal tulajdonság nem fogadja el az alfa-csatorna értékét értékként. Az eredmény így néz ki:
Ha összetett számokat készít, előfordulhat, hogy az alak beállítása a kép segítségével. Ez lehetővé teszi az Alpha Képcsatorna használatát a Photoshopban, ahelyett, hogy manuálisan beállítaná a pontokat.
Ön is kényelmes lesz a kép használata helyett az ábra függvényében, ha sok úszó eleme van, vagy az elem belsejében van - mert ebben a pillanatban Nincs lehetőség arra, hogy több elemet hozzon létre egy elemre. De ha a kép több területet tartalmaz, a böngésző eltávolítja ezeket a területeket, és felhasználja őket.
A CSS-számok az érzékeny tervezésben
Lehet-e a CSS-adatok reakcióképes kialakításra? Az alakzat jelenlegi specifikációja ezen a pillanatban tartalmazza, mert lehetővé teszi az elem méretét vagy százalékos méretét, vagy hossznévesztési egységeket, valamint az ábrát meghatározó pontokat (az ábra funkció paraméterei) is meghatározható százalékban. Ez azt jelenti, hogy egy adott alakú-külső elem teljesen érzékeny lehet, valamint bármely lebegő elem, amely százalékban meghatározott méretekkel rendelkezik.
A forma-belső tulajdonság még nem reagál, de azért van, mert a 2. szintű modulra váltott. Számos jelenlegi korlátozása a következő szinten fog menni.
A számok létrehozásához szükséges eszközök
A komplex figurák létrehozása funkciókkal időigényes feladat lehet, különösen akkor, ha olyan pontot hoz létre, amely több ponttal és koordinátával rendelkezik poligon () segítségével. Szerencsére az Adobe Web Platform csapata az interaktív eszközök gyártásán dolgozik, hogy ezt a folyamatot sokkal könnyebbé tegye. Bear Travis létrehozott egy gyűjtemény eszközök létrehozására számok, amely lehetővé teszi számunkra, hogy hozzon létre vizuálisan sokszögű számokat. Az eszköz az ábra függvényét generálja. Hasznos lehet, de korlátozása van, ha egy adott képen alapuló alakot hoz létre, mivel az eszköz nem nyújt ilyen lehetőséget.
Az Adobe Web Platform fejlettebb és interaktív eszközt fejlesztett ki. A szerszámot a közelmúltban kiadta a zárójelek szabad szerkesztőjének kiterjesztése. Lehetővé teszi a böngészőben lévő formák megjelenítését és szerkesztését, és képes az online előnézetre, amely frissíti az alakzat értékét a stílus asztalon, amikor megváltoztatja őket az oldalon. Ez azonnali vizuális visszacsatolás A módosítások, amelyek lehetővé teszik, hogy az adatok hogyan kölcsönhatásba lépnek az oldalon található más elemekkel.
A poligonális alak szerkesztése közvetlenül a böngészőben az előnézeti üzemmódban a zárójelben. A képernyő bejegyzése Razvan Caliman.
Ez az eszköz elengedhetetlen lesz, mivel megkönnyíti az ábrák létrehozását, szerkesztését és lebontását. Razvan Caliman, amely megmagyarázza, hogyan kell hívja az alakszerkesztőt zárójelben, és kezdje el használni.
Jövő: CSS kivételek
A számok CSS-specifikációja a CSS-adatokra és kivételekre szánt specifikáció volt, de megosztották. Míg a CSS-szám határozza meg az alak-belső és alak-külső tulajdonságokat, kivéve a CSS-t olyan tulajdonságokat határoz meg, amelyek a nem lebegő elemek tartalmát okozzák, például abszolút elhelyezkedéssel. Lehetővé teszik az egész számot a különböző oldalak tartalmával, amint az az alábbi képen látható.
A jövőben, CSS kivételek lehetővé tartalom megküzdenie egy ilyen alak, mint a vágás, ahogy az a fordulat a magazin. A réz is kerek lehet, és a szöveg is megérinti..
Új számok
A számok jelenlegi CSS-specifikációja csak az első lépés. Hamarosan új lehetőségek adnak nekünk több irányítást. Meg kell teremteni a tartalom megteremtését és megerősítését, így könnyebb lesz számunkra, hogy az elrendezéseket egy élő designban csak néhány kód segítségével fordítsuk el. A mai napig a specifikációs szerkesztők az alakzat befejezésére koncentrálódnak, és láthatják a CSS-számok támogatását nagy mennyiség böngészők 2014 végéig.
A számokat ma a progresszív javítóstratégia részeként használhatja, tudva, hogy elfogadható helyettesítése van a nem támogató böngészőkben. Nemrég kezdett alkalmazni őket a weboldalamon, és a csere meglehetősen elfogadhatónak tűnik. A bonyolultabb kialakításhoz használhatja a szkriptet, hogy ellenőrizze a böngésző támogatását, és bármilyen cserét adjon meg, ha nincs támogatás. A Modernizr teszteket is használhatja a szkript segítségével, hogy ellenőrizze, hogy az alakon kívüli tulajdonság fenntartja-e, vagy töltse le saját szerelvényét, amely tartalmazza ezt a tesztet.
A CSS-számadatok lehetővé teszik számunkra, hogy hozzon létre egy másik hídot a nyomtatás és a webdesign között. Az e cikkben szereplő példák egyszerűek, de alapul szolgálnak a tervezéshez hasonlóan egy magazinnal vagy poszterrel, anélkül, hogy aggódnának, hogy újraindíthatod-e a képernyőn. Tehát, hogy tanulmányoztad - a nem téglalap alakú jelekről az ábrák animációjára - most a kísérletek időpontja.
Vlad merzehevich
A helyszíneken a háromszögeket egyáltalán alkalmazzák, és a tervezési elemek részeként közel kerülnek, például mutatónak szolgálnak egy bizonyos objektumnak, és irányítják az olvasó figyelmét a megfelelő helyre. A háromszögek is díszítő funkciókat végeznek, így blokkok, ahol használják őket, elegánsabb és modern. Ábrán. Az 1. ábra egy példát mutat a tervezés háromszög használatára.
Ábra. 1. Háromszögek a webdesignban
Közvetlenítsen háromszöget cSS eszközök Lehetetlen, így két módszer lehetővé teszi, hogy hozzáadja a határ és átalakításhoz.
A határon.
Bár a határokon átnyúló határok nem közvetlenül kapcsolódnak a háromszögekhez, akkor a határát a leggyakrabban használják. Ha beállítja az elem nulla szélességét és magasságát, valamint elegendően vastag határokat telepít, négy háromszögből állunk (2. ábra). Az egyértelműség érdekében a határok minden oldalán különböző színeket állítanak be.
Ábra. 2. Határ hozzáadása tételhez
Csak a kívánt szegélyt hagyva, és a többi átlátszó módon megkapjuk a kívánt szín háromszögét (3. ábra).
Ábra. 3. Elem átlátszó határokkal
Az 1. példa egy háromszög hozzáadását mutatja a blokkhoz egy pszeudo-elem :: után.
1. példa A háromszög blokkolása
Abszolút elhelyezett elemek esetén a nulla szélesség és magasság nem szükséges.
A határok kombinációjának köszönhetően négy további háromszöget kaphat, amelyek a már említettük, nyolc lehetőséget adnak nekünk. A megjelenésük és a szükséges kódjuk a táblázatban látható. egy.
| Kilátás | Stílus |
|---|---|
| határ: 20px szilárd átlátszó; Border-Top: 20px Szilárd zöld; | |
| határ: 20px szilárd átlátszó; Border-Right: 20px szilárd zöld; | |
| határ: 20px szilárd átlátszó; Határ alsó: 20px Szilárd zöld; | |
| határ: 20px szilárd átlátszó; Border-Bal: 20px Szilárd zöld; | |
| határ: 20px szilárd átlátszó; Border-Top: 20px Szilárd zöld; Border-Right: 20px szilárd zöld; | |
| határ: 20px szilárd átlátszó; Border-Right: 20px szilárd zöld; Határ alsó: 20px Szilárd zöld; | |
| határ: 20px szilárd átlátszó; Határ alsó: 20px Szilárd zöld; Border-Bal: 20px Szilárd zöld; | |
| határ: 20px szilárd átlátszó; Border-Bal: 20px Szilárd zöld; Border-Top: 20px Szilárd zöld; |
Az asztalról látható, hogy láthatatlan határok foglalnak helyet, fontolja meg, ha az elemek elhelyezése. Style, továbbá meg kell adni a nulla szélességű és magasságú, vagy használja a pozíció tulajdonság, ahogy ez az 1. példában.
A háromszöget egy másik formában lehet elvégezni, ha a határok különböző vastagságát állíthatja be. Tehát az 1. ábrán bemutatott blokk létrehozásának kódja. A 4. példa 2. példa van megadva.
Ábra. 4. Akut háromszög
2. példa éles háromszög
A határon szilárd színű háromszögeket kapunk, hogy létrehozzuk az 1. ábrán látható keret létrehozását. 5 meg kell mennie a ravaszságba, és egy elemet egy másik elmozdulással kell elhelyezni. Ismét a pszeudo-elemek segítenek nekünk: előtt és: után (3. példa).
Ábra. 5. Keret a sarokban
3. példa overlay háromszögek
Ennek köszönhetően, hogy egy másik elemet alkalmazunk egy másik tetején, ez a módszer csak monoton töltőanyagokra alkalmas, és nem alkalmas gradiensekre vagy háttérképekre.
Az átalakítás használata
Az átalakulás segítségével 45 ° -kal elforgathatjuk a négyzet elemet, és rhombust kaphatunk tőle. Ez nem olyan háromszög, mint ilyen, ezért el kell hagynunk a kiálló részünket, és a többi elrejtés másik elem után (4. példa).
3. példa Átalakítás
A példa eredményét az 1. ábrán mutatjuk be. 6.
Ábra. 6. Háromszög árnyékkal
Online CSS3 generátor, hogy meredek grafikus hatásokat hozzon létre, és megkapja a CSS-kódot. Külön megváltoztathatja a különböző állapotok stílusait, például: lebeg, aktív, stb. A kezek egy interfészt kapnak komplex árnyékok, gradiensek, 3D effektek létrehozásához, a szöveggel és még sok másra. A projekt saját galéria hatásai, amelyekből elkezdheti a fejlesztést. A projekt megkülönböztető jellemzője az, hogy stílusokat kaphat különálló elemPéldául egy árnyékolásra vagy gradiensre.
Amikor először adja meg a helyszínen kínálunk számunkra, hogy hozzon létre egy üres beviteli mező, gomb, blokk, vagy válasszon egy kész mintát a projekt galériában. Kezdjük valami egyszerűen, például a geometriai alakok galériájából. Válasszon a Galéria jele Yin-Yang, és kattintson a jobb felső sarokban:
A jelenlegi fejlesztéshez készen áll a CSS-re, valamint példa a HTML-re Kód. A projekt galéria még több mint 20 üres a különböző CSS-számokhoz, és természetesen létrehozhatja sajátját.
A galéria szakaszában a gombokat látjuk, szövegmezők, Közvetlenül a szöveghez, a fent említett számokhoz és a gradiensek készleteihez. A szöveg hatásaival játszunk:
site - Wow It 3D!
Meg kell jegyeznünk, hogy a generált CSS meglepően nagyon tiszta és olvasható, ami nagyon elégedett. Nézzünk egyfajta aranyos gombot:
helyszíni hűvös gomb.
További funkciók közé tartozik az állapot mentése a localStorage böngészőben. Ha véletlenül lezárta a lapot, akkor a következő alkalommal, amikor a webhelyre megy, az összes módosításod továbbra is veled marad.
Ha nem szabványos betűtípusokat használ Google betűtípusok. Az Enjoycss automatikusan hozzáadja őket a HTML példájaként. Az én esetemben a szöveg és a gombok így néz ki:
A végső CSS meglehetősen terjedelmes, ezért csak a cikk végén hozom létre:
Yin Yang (
Balra lebeg;
Szélesség: 96px;
Magasság: 48px;
Pozíció: relatív;
Határ: 2PX Solid # F81;
Határ alsó szélesség: 50px;
-Webkit-határ-sugár: 100%;
Border-sugara: 100%;
Szín: RGBA (0,0,1);
-O-Text-túlcsordulás: klip;
Text-túlcsordulás: klip;
-Webkit-transzformáció: rotatez (-45deg) scalex (1) skála (1) skála (1);
Átalakítás: Rotatez (-45deg) Scalex (1) SCALEY (1) SCREELZ (1);
Átalakítás eredet: 50% 50% 0;
Yin-Yang :: korábban (
Szélesség: 12px;
Magasság: 12px;
Pozíció: abszolút;
Tartalom: "";
Top: 50%;
Bal: 0;
Határ: 18px szilárd # F81;
-Webkit-határ-sugár: 100%;
Border-sugara: 100%;
Font: Normál normál normál 100% / normál Arial, Helvetica, Sans-Serif;
Szín: RGBA (0,0,1);
-O-Text-túlcsordulás: klip;
Text-túlcsordulás: klip;
Háttér: RGBA (255,255,255,1);
Szöveg-árnyék: Nincs;
-Webkit-transzformáció eredet: 50% 50% 0;
Átalakítás eredet: 50% 50% 0;
}
Yin-Yang :: után (
Szélesség: 12px;
Magasság: 12px;
Pozíció: abszolút;
Tartalom: "";
Top: 50%;
Bal: 50%;
Határ: 18PX Solid RGBA (255,255,25,1);
-Webkit-határ-sugár: 100%;
Border-sugara: 100%;
Font: Normál normál normál 100% / normál Arial, Helvetica, Sans-Serif;
Szín: RGBA (0,0,1);
-O-Text-túlcsordulás: klip;
Text-túlcsordulás: klip;
Háttér: # F81;
Szöveg-árnyék: Nincs;
-Webkit-transzformáció: Scalex (1) SCALY (1) SCREELZ (1);
Átalakítás: Scalex (1) skála (1) skála (1);
-Webkit-transzformáció eredet: 50% 50% 0;
Átalakítás eredet: 50% 50% 0;
}
Élvezze a CSS-3DText (
Kurzor: mutató;
Border: Nincs;
Betűtípus: Normál Normál Normál 72px / Normál "Passero One", Helvetica, Sans-Serif;
Szín: RGBA (255,255,255,1);
Text-Align: Center;
-O-Text-túlcsordulás: klip;
Text-túlcsordulás: klip;
Szöveges árnyék: 0 1PX 0 RGB (204.204444), 0 2PX 0 RGB (201, 20101,201), 0 3PX 0 RGB, 0 4PX 0 RGB (185,185,185), 0 5PX 0 RGB (170,170,170), 0 6PX 1PX RGBA (0 0,0,0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1PX 3PX RGBA (0,0,0,0,298039), 0 3px 5px RGBA (0,0,0,0, 0,2), 0 5px 10px RGBA (0.0.0.0.247059), 0 10PX 10PX RGBA (0.0.0.0.2), 0 20PX 20PX RGBA (0.0.0.0.14902);
-Webkit-átmenet: Minden 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-Moz-átmenet: Minden 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-O-átmenet: minden 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
Átmenet: minden 300ms Cubic-Bezier (0,42, 0, 0,58, 1);
-Webkit-transzformáció: Scalex (1) SCALY (1) SCREELZ (1);
Átalakítás: Scalex (1) skála (1) skála (1);
-Webkit-transzformáció eredet: 50% 50% 0;
Átalakítás eredet: 50% 50% 0;
}
Élvezze a CSS-3DText: Hover (
Szín: RGBA (169,214,169,1);
Szöveges árnyék: 0 1PX 0 RGBA (255,255,25,1,1), 0 2PX 0 RGBA (255,255,25,1,1), 0 3px 0 RGBA (255,255,25,1,1,25,2,25 , 2,1,25,25,25,1,2,1,25,1), 0 5PX 0 RGBA (255,255,255, 1), 0 6PX 1PX RGBA (0,0,0,0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1PX 3PX RGBA (0,0,0,0,98039), 0 3px 5px RGBA (0,0,0,0,0,2), 0 - 5PX 10PX RGBA (0,0,0,0,247059), 0 -7px 10px RGBA (0,0,0,0,2), 0 -15px 20px RGBA (0,0, 0.0.14902);
-Webkit-átmenet: Összes 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
-Moz-átmenet: Összes 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
-O-átmenet: Összes 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
Átmenet: Összes 200 ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
}
Visszajelzés gomb (
Kijelző: inline-blokk;
Balra lebeg;
Pozíció: relatív;
Kurzor: mutató;
Margó: 0 2% 0 0;
Padding: 12px 22px;
Túlcsordulás: rejtett;
Border: Nincs;
Betűtípus: Normál Normál Bold 1.6em / Normál "Syncopate", Helvetica, Sans-Serif;
Szín: # ECF0F1;
-O-Text-túlcsordulás: klip;
Text-túlcsordulás: klip;
-Webkit-
Háttér eredet: Padding-Box;
Háttér-klip: Border Box;
Háttérkép: Auto Auto;
-Webkit-Box-Shadow: 0 10px 0 0 RGBA (178,49,49,1);
Doboz-árnyék: 0 10px 0 0 RGBA (178,49,49,1);
Szöveg árnyék: 0 0 0 RGB (196,80,78), 1px 1px 0 RGB (196,80,78), 2px 2px 0 RGB (196,80,78), 3px 3px 0 RGB (196,80,78) ), 4px 4px 0 RGB (196,80,78), 5px 5px 0 RGB (196,80,78), 6px 6px 0 RGB (196,80,78), 7px 7px 0 RGB (196,80,78), 8px 8px 0 RGB (196,80,78), 9px 9px 0 RGB (196,80,78), 10px 10px 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 RGB (196,80,78), 14px 14px 0 RGB (196,80,78), 15px 15px 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19px 19px 0 RGB (196,80,78), 20px 20px 0 RGB (196 80,78), 21PX 21PX 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23px 23px 0 RGB (196,80,78), 24px 24px 0 RGB (196.80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29px 0 RGB (196.80.78), 30px 30px 0 RGB (196,80,78), 31px 31px 0 RGB (196,80,78), 32px 32px 0 RGB (196,80,78), 33px 33px 0 RGB ( 196,80,78), 34px 34px 0 RGB (196,80,78 ), 35px 35px 0 RGB (196,80,78), 36px 36px 0 RGB (196,80,78), 37px 37px 0 RGB (196,80,78), 38px 38px 0 RGB (196,80,78), 39PX 39PX 0 RGB (196,80,78), 40px 40px 0 RGB (196,80,78), 41px 41px 0 RGB (196,80,78), 42px 42px 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 RGB (196,80,78), 45px 45px 0 RGB (196,80,78), 46px 46px 0 RGB (196,80,78), 47px 47px 0 RGB (196.80.78), 48px 48px 0 RGB (196,80,78), 1px 1px 0 RGBA (196.80,78,0,980392), 2PX 2PX 0 RGBA (196.80,78,0,0,960784), 3px 3px 0 RGBA (196.80,78,0,941176), 4px 4px 0 RGBA (196.80,78,0,921569), 5px 5px 0 RGBA (196.80,78,0,901961), 6px 6px 0 RGBA (196.80.78 0.882353), 7px 7px 0 RGBA (196.80,78,0,862745), 8px 8px 0 RGBA (196.80,78,0,78,43137), 9px 9px 0 RGBA (196.80,78,0,0,819608), 10px 10px 0 RGBA (196.80,78, 0,8), 11px 11px 0 RGBA (196.80,78,0,780392), 12px 12px 0 RGBA (196.80,78,0,760784), 13px 13px 0 RGBA (196,80,78,0,0,0, 0,0,741,11,80,78,0,0,064,176), 14px 14px 0 RGBA (196.80,78,0,721569), 15px 15px 0 RGBA (196.80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78,0 .682353), 17px 17px 0 RGBA (196,80,78,0,0658824), 18px 18px 0 RGBA (196,80,78,0,0639216), 19px 19px 0 RGBA (196,80,78,0,0619608) ), 20px 20px 0 RGBA (196,80,78,0,6), 21PX 21PX 0 RGBA (196.80,78,580392), 22px 22px 0 RGBA (196.80,78,0,78,0784), 23px 23px 0 RGBA (196.80,78,0,541176), 24px 24px 0 RGBA (196.80,78,521569), 25px 25px 0 RGBA (196.80,78,0498039), 26px 26px 0 RGBA (196.80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196.80,78,0,939216), 29px 29px 0 RGBA (196.80,78.0. 419608), 30px 30px 0 RGBA (196.80,78,0,4), 31px 31px 0 RGBA (196,80,78.0.380392), 32px 32px 0 RGBA (196.80,78,0360784), 33px 33px 0 RGBA (196,80, 78,0.341176), 34px 34px 0 RGBA (196,80,78,0317647), 35px 35px 0 RGBA (196.80,78,0,98039), 36px 36px 0 RGBA (196.80,78,0,278431) 37px 37px 0 RGBA (196.80,78,0,258824), 38px 38px 0 RGBA (196,80,78,239216), 39PX 39PX 0 RGBA (196.80,78,219608), 40px 40px 0 RGBA (196, 80,78,0,2), 41px 41px 0 RGBA (196.80,78,0,080392), 42px 42px 0 RGBA (196,80,78,0,15683), 43px 43px 0 RGBA (196.80,78,0,7255), 44px 44px 0 RGBA (196,80,78 , 017647), 45px 45px 0 RGBA (196.80,78,0,980392), 46px 46px 0 RGBA (196.80,78,0784314), 47px 47px 0 RGBA (196.80, 78,0788235), 48px 48px 0 RGBA (196.80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78,0);
-Webkit-transzformáció: Scalex (1) SCALY (1) SCREELZ (1);
Átalakítás: Scalex (1) skála (1) skála (1);
-Webkit-transzformáció eredet: 50% 50% 0;
Átalakítás eredet: 50% 50% 0;
}
Visszajelzés gomb: Hover (
Text-Align: Center;
Háttér: -webkit-lineáris gradiens (-90deg, # CE6161 0, # EF6664 100%);
Háttér: -Moz-lineáris gradiens (180deg, # CE6161 0, # EF6664 100%);
Háttér: lineáris gradiens (180deg, # CE6161 0, # EF6664 100%);
Háttérhelyzet: 50% 50%;
Háttér eredet: Padding-Box;
-Webkit-background-Clip: Border-Box;
Háttér-klip: Border Box;
-Webkit-háttér méret: Auto Auto;
Háttérkép: Auto Auto;
}
Visszajelzés gomb: aktív (
Top: 5px;
Háttér: -webkit-lineáris gradiens (-90deg, # FF8583 0, # FF5350 100%);
Háttér: -Moz-lineáris gradiens (180deg, # FF8583 0, # FF5350 100%);
Háttér: Lineáris-gradiens (180deg, # FF8583 0, # FF5350 100%);
Háttérhelyzet: 50% 50%;
-Webkit-háttér eredetű: padding-box;
Háttér eredet: Padding-Box;
-Webkit-background-Clip: Border-Box;
Háttér-klip: Border Box;
-Webkit-háttér méret: Auto Auto;
Háttérkép: Auto Auto;
-Webkit-box-árnyék: 0 5PX 0 0 RGBA (178,49,49,1);
Doboz-árnyék: 0 5px 0 0 RGBA (178,49,49,1);
