Беспрефиксные градиенты CSS3

В этой статье рассматриваются различия между старым и новым синтаксисом и поведением объектов, а также дается общее описание сути изменений.

Ключевые изменения

Если вы решите упростить свои CSS, перейдя с градиентов версии CSS3 с префиксом поставщика на беспрефиксные градиенты CSS3, вам следует знать о некоторых важных изменениях в синтаксисе. Многие генераторы градиентов поддерживают разметку для разных браузеров, включая разметку беспрефиксных градиентов. Во многих случаях беспрефиксная разметка больше не действует в соответствии с положениями статуса кандидата к рекомендации (Candidate Recommendation) W3C в отношении значений изображений в CSS , которые касаются градиентов. Вот инструмент для создания градиентов CSS3 , а вот изменения, о которых следует знать.

Линейные и повторяющиеся линейные градиенты

Рабочий черновик Candidate Recommendation
Ключевые слова, связанные с направлением Направление линии градиента определяется ключевыми словами top, bottom, left и right от начальной точки. Направление линии градиента определяется ключевыми словами top, bottom, leftи right, предваряемыми предлогом «to», от конечной точки.
Пример -ms-linear-gradient(top, orange, black); linear-gradient(to bottom, orange, black);
Пример линейного градиента, меняющегося от оранжевого наверху до черного внизу. Пример линейного градиента, меняющегося от оранжевого наверху до черного внизу.
Вычисление углов Ключевые слова для углового градиента задают отрисовку линии градиента из этого угла к противоположному. Ключевые слова для углового градиента, предваряемые предлогом «to», указывают, что линия градиента должна начинаться в указанном квадранте и заканчиваться в противоположном квадранте. Центральная точка этой линии градиента пересекается линией, проходящей между остальными двумя углами.
Пример -ms-linear-gradient(top left, fuchsia, yellow); linear-gradient(to bottom right, fuchsia, yellow);
На этой схеме показано, как вычислялся угол для углового градиента в соответствии с прежним рабочим черновиком. На этой схеме показано, как вычисляется угол, связанный с угловым градиентом, в соответствии с новыми положениями для кандидатов к рекомендации.
Направление угла 0deg — линия градиента, направленная вправо. Угол растет в направлении против часовой стрелки. 0deg — линия градиента, направленная вверх. Угол растет в направлении по часовой стрелке. Прежние углы можно пересчитать в новые по формуле new = abs(old−450) mod 360
На этой схеме показаны углы в соответствии с прежним рабочим черновиком с нулевым углом на 3:00 и ростом угла против часовой стрелки. На этой диаграмме показаны углы в соответствии с новыми положениями для кандидатов к рекомендации с нулевым углом на 12:00 и ростом угла по часовой стрелке.
Пример -ms-linear-gradient(200deg, lime, magenta); linear-gradient(250deg, lime, magenta);
Пример углового градиента от пурпурного в нижнем левом до травяного в верхнем правом углу. Пример углового градиента от пурпурного в нижнем левом до травяного в верхнем правом углу.

Радиальные градиенты и повторяющиеся радиальные градиенты

Рабочий черновик Candidate Recommendation
Расположение Расположение центра градиента определяется ключевыми словами, связанными с позицией (длина). Расположение центра градиента определяется ключевыми словами позиции (длина), которые предваряются предлогом «at». В этом случае позиция указывается после формы и размера градиента, при их наличии.
Пример -ms-radial-gradient(center, aqua, black); radial-gradient(at center, aqua, black);
Пример радиального градиента с голубым цветом в центре и черным по углам. Пример радиального градиента с голубым цветом в центре и черным по углам.
Ключевые слова, связанные с размером Размер градиента определяется одним из шести ключевых слов: farthest-corner, farthest-side, closest-corner, closest-side, contain и cover. Размер градиента определяется одним из четырех ключевых слов: farthest-corner, farthest-side, closest-corner и closest-side. Ключевые слова contain и cover больше не действуют и отнесены к ключевым словам «closest-side» и «farthest-corner», соответственно.
Пример -ms-radial-gradient(circle cover, lime, black); radial-gradient(circle farthest-corner, lime, black);
Пример кругообразного радиального градиента с травяным цветом в центре и черным по углам, диаметр которого соответствует более длинной стороне. Пример кругообразного радиального градиента с травяным цветом в центре и черным по углам, диаметр которого соответствует более длинной стороне.
Синтаксис для размера и формы Для радиальных градиентов, определяемых длиной, необходимо задать радиус и по горизонтали, и по вертикали. Для кругов радиальные градиенты могут задаваться только одним радиусом.
Пример -ms-radial-gradient(center, 50px 50px, red, black); radial-gradient(circle 50px at center, red, black);
Пример радиального градиента в форме круга радиусом в 50 пикселей с красным цветом в центре, переходящим в черный цвет по краям. Круг расположен в центре вмещающего его прямоугольника. Пример радиального градиента в форме круга радиусом в 50 пикселей с красным цветом в центре, переходящим в черный цвет по краям. Круг расположен в центре вмещающего его прямоугольника.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>