Css-gradiens Lineáris színátmenetek • a CSS
CSS-színátmenetek: Lineáris színátmenetek
CSS-színátmenetek teszi, hogy a háttérben a két vagy több szín, egyenletes átmenet az egyik a másikra. Ők már velünk egy hosszú idő, és van egy nagyon jó támogatást böngészők. A legtöbb modern böngésző érti őket anélkül prefixumokat IE9 és idősebb Gradiens szűrő. is IE9 használhatja SVG.
Színátmenetek lehet alkalmazni, ahol képeket használnak: a hátterek, a felsorolás, akkor be lehet állítani a tartalom, vagy a határ-képet.
Lineáris gradiens
Lineáris színátmenetek nagyon egyszerű a használata. Megfelelően kérni a legalapvetőbb gradiens kezdetén és végén színek:
Színek bármilyen szám lehet nagyobb, mint kettő. Az is lehetséges, hogy ellenőrizzék a irányát és gradiens határok (stop pont) színekben.
Az irány lehet állítani fokozatot vagy kulcsszó.
Fokban 0-tól 360, például 270deg.
Kulcsszavak: Fel = 0deg; jobbra = 90deg; A végére = 180 fokkal - az alapértelmezett értéket; balra = 270deg.
Címkék lehet kombinálni egymással, hogy egy átlós gradiens, például a bal felső felé.
Alább látható, hogy a különböző irányokba a szakaszon lila sárga:
Itt a kód az első négyzet, például:
Emlékeztetni kell arra, hogy a jobb felső nem ugyanaz, mint a 45 °.
gradiens színes vonalak merőlegesek a gradiens irány. Ha a jobb felső sarokba vonal megy bal alsó és a jobb felső, a 45 ° - található szigorúan ez a szög függetlenül a forma méretei.
A különbség a viselkedés jól látható a téglalap alakú számok:
Az is lehetséges, hogy állítsa be a megállási pont a gradiens színű értékeket meghatározott egységek vagy százalékos, és nagyobb lehet, mint 100%, és kevesebb, mint 0%.
Példák referenciaértékeket%. em és az értékeket, amelyek túlmutatnak az elemek:
Minél közelebb van megállási pont a szomszédos színek, annál tisztább lesz a határ közöttük. Így könnyen lehet, hogy csíkos háttérrel:
Így lehetséges, hogy például az oldalsáv háttér, amely átfogja az egész magassága a szülő elem:
Csíkok a háttérben a oldalsáv (bocs, nem tudott ellenállni) - egy másik gradiens, amely egy váltakozó teljes átláthatóság és fehér, átláthatóságát 30%. Színátmenetek áttetsző színek kényelmes, hogy lehet egymásra a háttérben bármilyen színű.
A gradiens az adott példában komplex hosszú kód, mert a csíkok kell elhelyezni éppen a háttérben, hogy a sidebar. Ha nem próbálja meg az összes háttérben egy blokk, lehetett megoldani a problémát segítségével ál. A korlátozások hiányát kód sokkal rövidebb lehet:
Az első sor beállítja a háttér színét a tárgy, a típus és irányt (szín, és el lehet hagyni), a második - határozza meg a színátmenet és a határ között, a harmadik - a helymeghatározás és a kapott kép felbontását. A legfontosabb része - a méret. Az alapértelmezett háttér megismételjük, így a kapott mintázat kitölti a háttér elem. Nagyon egyszerű és érthető. )
Az egész rekord lehet tenni egy sorba, de ez sokkal kényelmesebb, hogy írjon az olvashatóság néhány, különösen az összetett színátmenetek.
Azt is fontos tudni, hogy a kulcsszó átlátszó átlátszó jelenti fekete, nem átlátszó, fehér, ezért, ha használja a Firefox, akkor kap egy ilyen kellemetlen:
Ennek elkerülése érdekében, használja a teljesen átlátható színárnyalat kívánt, pl, fehér: RGBA (255, 255, 255, 0) vagy fekete RGBA (0, 0, 0, 0). Mintegy különböző módon lehet beállítani a színek itt olvasható.
Ha szeretné megtudni, RGB-jelölést egy adott szín, akkor CSS.coloratum. szerszám Lea Verou.
A szokásos lineáris-gradiens lehet ismétlődő-lineáris-gradiens - ismétlődő gradiens
Sajnos, ismétlődő színátmenetek viselkednek, szörnyű és csak az alkalmas minták, amelyek nem fontos a pontosság. Ha szüksége van a pontosság, használjon lineáris gradiens kombinálva a háttér méretét és background-repeat.
Színátmenetek ugyanolyan korlátozás, mint a box-árnyék. nem tudnak adni egy külön színt vagy irányban. Ez vezet a párhuzamos kód és a sürgető szükségességét, hogy preprocessors létrehozásakor komplex színátmenetek.
Egy másik korlát, hogy a gradiens nem animált, amely azonban lehet, hogy bizonyos mértékig kerülni.
Ahhoz, hogy gyorsan létre több böngészővel színátmenetek van egy nagyon praktikus eszköz: colorzilla.com/gradient-editor/. Amellett, hogy a kódot modern böngésző, akkor felajánlja a kódot az idősebb IE és az SVG a 9..
Kombinálva alapvető szabályozási háttér képek színátmenetek a legjobb lehetőségeket teremt háttérrel különböző nehézségi teljesen használata nélkül a képeket. Színátmenetek tehetünk bonyolult és érdekes minták, de ez egy másik téma.