Safari

Визуальные эфекты CSS

Используйте CSS для создания потрясающих визуальных эффектов- масок, градиентов, отражений, световых эффектов, анимации, переходов, 3D вращений, и многих других. Примените любой из них, или все эти эффекты интерактивно, как реакцию на события мыши или сенсорного события; сделайте HTML элементы более заметными, заставив их реагировать на действия пользователя, не требуя плагинов, графических библиотек, или разработки кода на JavaScript.

 

Использование градиентов

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

Создание линейных градиентов

Линейный градиент определяет изменение цвета вдоль заданной линии. Каждая точка на линии имеет определенный цвет. Ширина линии, перпендикулярна направлению линии и простирается к краям контейнера градиента. Можно использовать линейный градиент для заполнения любой двумерной формы. По умолчанию линейный градиент изменяет цвет сверху вниз. Например:

background: -webkit-linear-gradient(aqua, white)

Если указать промежуточные цвета между начальным цветом и конечным, градиент сочетает переходы от одного цвета к другому. Например:

background: -webkit-linear-gradient(red, yellow, orange, green, blue, black);

Изменение направления градиента

Вы можете определить линейный градиент с изменением цвета в любом направлении: от любого края или угла к противоположному краю или в углу или в любой заданный угол. Чтобы указать направление от края до края или от угла к углу, просто укажите край или в угол начала. Например:

background: -webkit-linear-gradient(left, black, white);

создает градиент слева направо:

background: -webkit-linear-gradient(bottom right, black, white);

создает диагональный градиент:

Вы можете также задать направление изменения цвета путем подстановки угла. Углы даны в градусах, с 0deg начинающегося прямо вверх и против часовой стрелки, для положительных значений, так что 90 градусов горизонтально влево и 180 градусов прямо вниз. Например:

-webkit-linear-gradient(45deg, black, white)

создает градиент под 45 градусов к верху слева:

Установка степени изменения

По умолчанию, скорость изменения цвета для градиента остается постоянной, если градиент имеет три цвета, смешивание начинается с первого цвета на 0% длины градиента, достигает второго цвета на 50% длины градиента, и достигает третьего цвета на 100% длины градиента. Другими словами, первая линия градиента начальный цвет, средняя линия является вторым цветом, и последняя линия является третьим цветом. Чтобы изменить это поведение, определите цвет остановок. Например, следующий фрагмент создает градиент, который постепенно меняется от белого до василькового на 90% длины градиента затем быстро переходит до черного в течение оставшихся 10%:

-webkit-linear-gradient(left, white, cornflowerblue 90%, black)

Цвет остановки может создать некоторые поразительные эффекты. Например, можно указать тот же цвет для двух последовательных остановок, чтобы создать переход из сплошного цвета или указать два разных цвета в одной и той же точке в процентах, чтобы создать резкое изменение в цвете.

background: -webkit-linear-gradient(left,black,yellow 10%,yellow 90%,black);
background: -webkit-linear-gradient(left,white,blue 50%,purple 50%,white);
 
 

Создание радиальных градиентов

Радиальный градиент заливки цветом перетекает из одного цвета в другой с изменением цвета радиально, образуя диск обрезанный по форме элемента. Диск может иметь форму круга или эллипса. Укажите начальный и конечный цвет, также можно задать промежуточные цвета. Начальный цвет начинается в центре диска, и изменение цвета происходит наружу, пока конечный цвет не будет достигнут, по умолчанию в самом дальнем углу элемента.

<div style="background: -webkit-radial-gradient(white,black);">

Для создания кругового градиента, примените circle параметр:

-webkit-radial-gradient(circle, white, black)

Перемещение центра

По умолчанию, отправной точкой радиального градиента является центр элемента, который вы заполняете. Изменить это можно, указав другую отправную точку, с помощью горизонтальных или вертикальных смещений от верхнего левого угла элемента. В следующем примере создается круговой элемент div (элемент в виде квадрата с 50% границами радиуса), а затем заполняется с радиальным градиентом, центр которого смещен вниз и вправо от левого верхнего угла элемента на 30%, что создает 3D эффект освещения.

<div style="width: 200px; height: 200px; border-radius: 50%;

background: -webkit-radial-gradient(30% 30%, white, black);">

Изменение расположения конечного цвета

По умолчанию градиент достигает своего конечного цвета на углу элемента удаленного от указанного центра градиента. Изменить это поведение можно, указав ближайший угол. Например:

-webkit-radial-gradient(30% 10%, closest-corner, white, black)

создает радиальный градиент, который начинается 30% правее и 10% ниже верхнего левого угла элемента и достигает своего конца цвета в ближайшем углу.

Если вы укажите оба свойства: circle и closest-corner, передайте их там же в разделенных запятыми параметрах, разделив пробелом:

-webkit-radial-gradient(30% 10%, circle closest-corner, white, black)

Примеры:

30% 30%, closest-corner, white, #00530% 30%, circle closest-corner, white, #005 30% 30%, white, #00530% 30%, circle, white, #005
 

Добавление цвета остановки

Для создания многоцветных радиальных градиентов, задайте промежуточные цвета между начальным цветом и конечным. Например, следующий фрагмент создает радиальный градиент, который перетекает от белого в центре до зеленого в середине и к черному на внешнем крае:

<div style="width: 200px; height: 200px; border-radius: 100px;
background: -webkit-radial-gradient(white, green, black);">
 

По умолчанию, интенсивность изменения цвета является постоянной, заполняя градиент в одинаковых пропорциях. Изменить это поведение можно путем предоставления остановки цвета, определяющей расстояние от центра градиента к краю для определенных цветов. Например, следующий фрагмент создает градиент, который заполняет от белого до красного всего на 20% от градиента, затем заполняет оставшиеся 80% до черного:

<div style="background: -webkit-radial-gradient(white, red 20%, black);">
 

Еще один пример:

-webkit-radial-gradient(white, red 20%, yellow 20%, black);
 
 

Создание повторяющихся градиентов

Создать повторяющийся градиент можно используя вышеперичисленную методику, указав повторяющиеся цвета, но гораздо проще, используя -webkit-repeating-linear-gradient и -webkit-repeating-radial-gradient.

Примеры:

-webkit-repeating-linear-gradient(yellow, blue 10%, yellow 20%)-webkit-repeating-radial-gradient(yellow, blue 10%, yellow 20%)
Внимание! Для поддержания кросс-браузерной совместимости, для mozilla необходимо добавить ту-же строку с градиентом, заменив -webkit на -moz, например:
 background: -webkit-radial-gradient(white, red 20%, yellow 20%, black);
 background: -moz-radial-gradient(white, red 20%, yellow 20%, black);
 

Использование масок

Маска является двумерной фигурой, которая действует в виде наложения на элемент и обрезает элемент визуально или делает участки элемента прозрачным или полупрозрачными. Маска состоит из изображения или градиента, который содержит альфа-канал, где альфа-значение маски равно 0. Используются только альфа величины маски, любые другие значения цвета игнорируются.

Использование изображения в качестве маски

Для начала необходимо создать изображение в формате .png или .svg с альфа каналом. Затем передать URL созданного изображения в качесте свойства -webkit-mask-image или -webkit-mask-box-image. Свойство -webkit-mask-image использует истинные размеры изображения, а -webkit-mask-box-image масштабирует маску по границам элемента.

Если изображение используется как маска состоящая из непрозрачной фигуры на прозрачном фоне, маска действует как «штамп», для обрезания элемента по форме маски.

Пример наложения маски:

<img src="/images/nature1.jpg" width="256" height="137" style="-webkit-mask-box-image: url(/apple-touch-icon.png);" />
МаскаэлементРезультат наложения
macbugnature

В данном примере специально использовано цветное изображение в качестве маски, чтобы показать, что для маски имеет значение только альфа канал. Реально-же следует использовать двухцветное изображение.

Также можно наложить маску на какой либо элемент HTML, например блок div:

<div style="width:200px; height:144px; font-size:10px; line-height:12px;
 -webkit-mask-box-image: url(/apple-touch-icon.png);">
Маска наложенная на элемент <code>div</code> и растянутая по границам элемента!
Маска наложенная на элемент <code>div</code> и растянутая по границам элемента!
Маска наложенная на элемент <code>div</code> и растянутая по границам элемента!
Маска наложенная на элемент <code>div</code> и растянутая по границам элемента!
Маска наложенная на элемент <code>div</code> и растянутая по границам элемента!
</div>
Маска наложенная на элемент div и растянутая по границам элемента! Маска наложенная на элемент div и растянутая по границам элемента! Маска наложенная на элемент div и растянутая по границам элемента! Маска наложенная на элемент div и растянутая по границам элемента! Маска наложенная на элемент div и растянутая по границам элемента!

Использование градиентной маски

Пример использования линейного градиента в качестве маски:

<img src="/images/nature1.jpg" width="256" height="137" style="-webkit-mask-box-image:-webkit-linear-gradient(black, transparent);">

Пример использования радиального градиента в качестве маски:

<img src="/images/nature1.jpg" width="256" height="137" style="-webkit-mask-box-image:-webkit-radial-gradient(black 30%, rgba(0,0,0,0.2) 70%, transparent);">
Внимание: -webkit-mask-image и -webkit-mask-box-image не имеют аналогов в mozilla, что необходимо учесть при кросс-браузерной совместимости.
 

Использование отражений

Отражения является зеркальным отражением, возможно с собственной маской. Вы можете добавить отражение к видимым элементам HTML. Отражения автоматически обновляются при изменении внешнего вида элемента. При наведении курсора на ссылку с отражением, вы видите эффект наведения в отражении. Если добавить отражение к элементу видео, видео также воспроизведится в отражении. Изменение размера элемента приволит к изменению размера отражения. Отражения не являются интерактивными элементами, поэтому щелчок или прикосновение к отражению не генерирует никаких событий.

Отражения не имеют никакого влияния на расположение других элементов, и похожи на тени в этом отношении. Другими словами, вы должны позиционировать элементы явно, чтобы было пространство для отражений.

Добавление отражения

Используйте -webkit-box-reflect с аргументом above, below, left или right для добавления отражения.

<h1 style="-webkit-box-reflect: below; line-height: 33px; margin-bottom:36px;">
Отражение заголовка
</h1>

Отражение заголовка

Отражения такое же по размеру, как видимый размер элемента. Границы и отступы элемента включены в отражении.

Регулировка положения отражения

Первый аргумент -webkit-box-reflect является направлением, в качестве второго можно указать смещение, например предидущий пример со смещением -15px:

<h1 style="-webkit-box-reflect: below -15px; line-height: 33px; margin-bottom:36px;">

Отражение заголовка

Наложение маски

Самым востребованным, наверное, будет наложение градиентной маски:

<img src = "/images/nature1.jpg"  width="256" height="137" style = "-webkit-box-reflect: below 0px
-webkit-linear-gradient(transparent, transparent 40%, white 90%); margin-bottom:137px;">

Также можно использовать в качестве маски изображение .png или .svg, применяя правила описанные в "Использование изображения в качестве маски".

Если в элемент входит несколько элементов, то отражаются все элементы.

Внимание! -webkit-box-reflect не имеет аналогов в mozilla, что необходимо учесть при кросс-браузерной совместимости.
 
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac