Css-minták • a CSS
CSS-minták
Az a lehetőség, back-end gazdálkodási CSS segítségével tehát egy kombináció gradiens így hihetetlen lehetőségeket. Színátmenetek levonhatjuk szinte semmit az egyszerű sejtek kombiné és körök egy elég bonyolult mintákat. Ön tudja játszani a végtelenségig.
Az általános elv: létrehozni egy gradiens, amely meg akarja ismételni. Alapértelmezésben ez lesz az összes rendelkezésre álló helyet, de ha a méret a háttérben - kap egy képet a kívánt méretet, ami egy egész lapot a háttér elem. Ha a gradiens értéke százalékos eltérést vagy em. akkor könnyű lesz ellenőrizni a méret a minta szerkesztésével a betűméretet és / vagy háttér-méret.
Például lehet, hogy egyszerű csíkos:
Fehér csíkok váltakoztak az átláthatóság és tudunk bármilyen háttérrel. Szabályozásával közötti határvonal a szín és az átláthatóság állíthatja a sávok szélességét.
Ha megad egy áttetsző fehér vagy fekete, akkor kap egy univerzális minta, ami jól minden, hanem a háttérben fehér:
Két gradiens színes áttetsző vonalakat lehet kockás terítő:
Segítségével a színes csíkok, hogy kis díszítő elemek:
Ha szeretne egy csíkos háttér bonyolultabb, érdemes figyelni, hogy az elv a kabócák:
Az elv az, hogy több háttérrel, különböző méretekben. Ez azt jelenti, hogy ők is csatlakozott a különböző helyeken, így a háttérben nem lesz képes megtalálni az ismétlődő szakaszokat vagy rögzítési helyre. Véleményem egy zseniális ötlet.
A háttér egymásra a legnagyobb (felső) a legkisebb (legalján). Ennek eredményeként, az ízületek és a legkisebb ismétlődő blokkolni fogja fekvő rétegekbe.
Csináltam 4 csíkos háttér a különböző színű és arra kérte őket, különböző méretű:
Ez telíti, akkor ott vannak azok, akik nem osztoznak semmi más, mint maguk.
Mint a varázslat. )
Szintén csíkos színátmenetek könnyen előállítható, például füzet sorban:
Egyszerű vonalak, ez elég világos, de mi van, ha a minta ferde vonalak?
ismétlődő lineáris gradiens képesnek kell lennie arra, hogy segítsen, de a gyakorlatban a gradiens viselkedik, mint egy szörnyű (nyúlik a böngésző ablakban).
Próbáld meg egyszerű csíkok 45 ° -ban elfordítható.
A példa világosan mutatja, hogy a minta áll ismétlődő négyzetek gradiens megy bal alsó és a jobb felső, de az ellenkező sarkaiban semmit, és a szaggatott vonal kapunk.
Ahhoz, hogy lezárja a rést, adjunk hozzá egy másik gradiens:
Vettem egy szöglet világos kell tekinteni, ahol volt:
Festés a sarkot a kívánt színt, és kap egy szép ferde vonalak:
Azonban kellett igazítani egy kicsit, ami a színeket megáll az első gradiens (50% → 49,9%), de most nem látom egyáltalán ízületek.
Ha ahelyett, sarok irányát jelzik a legfontosabb szavakat, például a bal felső. meg fogja változtatni a szög a gradiens a méret megváltoztatása, mert ebben az esetben a gradiens mindig irányul egyik sarokból a másikba, függetlenül attól, hogy háttér-méret.
Az utolsó sor van beállítva gradiens téglalap alakú. Mivel a irányát és mértékét a megállók százalékos lehet, mint szükséges megváltoztatni a mérete - változtatni a dőlésszöget a vonalak, de a minta nem lesz bántódása:
Bizonyos esetekben a vonalak vált csipkézett élek, és válnak függővé a polgármester böngészők: Chrome kezeli jobban Firefox látható lépéseket. Ahhoz, hogy egy sima él, akkor lehetséges, hogy a közös a színek közötti nem egyértelmű, és a homályos szélessége 1-2%. Emellett tudatában kell lennie a probléma átlátszó színek Firefox - ez megoldható a szükséges árnyékot a teljes átláthatóságot.
Kísérletezés a vonalak kaphat más érdekes mintákat:
Én azonban lenyűgözött. Ez is érdekes lehet, hogy köze van a sugaras színátmenet. Például, a szokásos borsó:
Gradient a határ sima volt, fogak nélkül, az átláthatóság a határ, hogy egy kicsit több, mint a szín a stop pontot. Vebkity, mint mindig, jobban képes megbirkózni az anti-aliasing.
Az elv létrehozását minták ugyanaz, mint a lineáris színátmenetek. És összekapcsolja lineáris és radiális gradienseket lehet beszerezni egyszerű geometriai formák bonyolultabb:
Akkor nem elég bonyolult minták, akkor jobb használni a lehetőséget előfeldolgozó:
Hátrányai ilyen mintákat rendszerint hossza és összetettsége a kódot, valamint a támogatás hiánya a régebbi böngészők. A kép lehet szükség rájuk. Előnyök - színátmenetek mérjük semmit, nem kell kérni a szerver, és könnyen változtatni a szín és a mintázat méretét.
További minták látható inspiráló galéria Lea Verou: lea.verou.me/css3patterns/.