Css-градиенти Линейни градиенти • за CSS
CSS-градиенти: Линейни градиенти
CSS-градиенти позволяват да се направи на фона на два или повече цвята, плавно преминаване от един към друг. Те са с нас за дълго време, и има доста добра подкрепа за браузъри. Повечето съвременни браузъри ги разбират без представки за IE9 и по-възрастните имат Gradient филтър. също така и за IE9 да използвате SVG.
Наклоните могат да се използват навсякъде, където са използвани снимки: в фоновете, тъй като списъците, те могат да бъдат настроени в съдържанието, или граничен изображение.
Линеен градиент
Линейни градиенти, които са доста прости за използване. За достатъчно да поиска най-основните стартови градиент и крайни цветове:
Цветовете могат да бъдат неограничен брой по-голям от две. Също така е възможно да се контролира посоката и наклон граници (стоп точки) цветове.
Посоката може да се настрои градуса или ключова дума.
В степени от 0 до 360, например 270deg.
Ключови думи: в началото = 0deg; надясно = 90deg; до долу = 180deg - стойността по подразбиране; наляво = 270deg.
Маркерите могат да се комбинират помежду си, за да получите диагонал градиент, например до горе вляво.
По-долу можете да видите как различните направления в отсечката от люляк към жълто:
Това е кодът на първия квадрат, например:
Трябва да се помни, че за горния десен не е едно и също нещо като 45deg.
градиент цвят линии са перпендикулярни на посоката на градиент. Когато в началото полето линия върви от долния ляв до горния десен, в 45deg - намира точно в този ъгъл независимо от размерите на формата.
Разликата в поведението е ясно видима на правоъгълни фигури:
Също така е възможно да се определи точката на спиране на градиент стойности на цвят са посочени в единици или процент, и може да бъде по-голяма от 100% и по-малко от 0%.
Примери референтни стойности в%. ги в и ценностите, които излизат извън рамките на елементи:
Колкото по-близо са точка на спиране съседни цветове, толкова по-ясно ще бъде на границата между тях. По този начин, можете лесно да правите шарени фонове:
Така че е възможно да се направи, например, под фона на лента, която се простира по цялата височина на майка елемент:
Ивици на фона на лента (грешка, не може да устои) - друг градиент, състоящ се от редуване на пълна прозрачност и бял с прозрачността на 30%. Наклоните с полупрозрачни цветове са удобни с това, че те могат да бъдат насложени на фона на който и да е цвят.
Градиентът в примера, даден комплекс дълъг код, тъй като лентите трябва да бъде поставен точно над фона на страничната лента. Ако не се опита да направи всичко на фона на един блок, може да се реши проблема с помощта на псевдо. При липса на ограничения код може да бъде много по-кратко:
Първият ред определя цвета на фона на елемента, вида и посока (посоката на цвят и може да се пропусне), а вторият - определяне на градиента на цветовете и границата между тях, третият - на позиционирането и резолюцията на полученото изображение. Най-важната част - от размера. фона по подразбиране се повтаря, така че в резултат на модела ще запълни фон елемент. Много лесен и разбираем. )
Целият запис може да се направи в един ред, но това е по-удобно да пиша за четимост в някои от тях, особено за сложни градиенти.
Също така е важно да се знае, че ключовата дума прозрачен прозрачен означава черен, а не прозрачен бял, така че когато го използвате в Firefox, можете да получите точно такова неудобство:
За да се избегне това, използването на напълно прозрачен цвят сянка е желателно, например, бял: RGBA (255, 255, 255, 0) или черен RGBA (0, 0, 0, 0). За различни начина да настроите цветовете могат да бъдат прочетени тук.
За да научите RGB-нотация на определен цвят, можете да използвате CSS.coloratum. инструмент от Lea Verou.
Освен обичайните линеен градиент може да се повтаря линеен градиент - повтаряне градиент
За съжаление, повтарящи се наклони се държат като ужасни и са подходящи само за проекти, които не са важни точност. Ако имате нужда от точност, използвайте линеен наклон в комбинация с фон-размер и фон-повторение.
Наклоните имат същото ограничение като кутия сянка. те не могат да посочите отделен цвят или посока. Това води до дублиране на код и спешната необходимост да се използва Препроцесори на сложност и наклони.
Друго ограничение е, че градиентите не са анимирани, които, обаче, може да бъде до известна степен се избягва.
За да създадете бързо различни браузъри градиенти има много удобен инструмент: colorzilla.com/gradient-editor/. В допълнение към код за съвременни браузъри, че ще предложи на кода за по-стар IE и SVG за 9-ти.
В комбинация с основни контрол фонови изображения градиенти предоставят най-добрите възможности за създаване на среди с различна трудност изцяло без използването на изображения. Наклоните могат да правят сложни и интересни модели, но това е друга тема.