Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Градиенты CSS

Доброго времени суток дорогие друзья и приступим. С появлением возможности реализации градиентов в CSS3 мы можем в значительной мере сократить использование картинок для фона. Здесь мы можем реализовать два вида градиентов линейный и радиальный. Рассмотрим подробнее:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Градиенты в css</title>
</head>
<body>
<style>
    div{
        height:200px;
    }
    .linear{
        background-image:linear-gradient(red,blue);
    }
</style>
    <div class="linear"></div>
</body>
</html>

Что мы здесь видим? У нас есть некий блок div высотой 200px, которому мы в качестве фонового изображения задали линейный градиент. Как видите значением свойства background-image(фоновое изображение) является функция linear-gradient, аргументами которой являются два цвета красный и синий, расположенных сверху вниз.

В перечислении цветов в градиенте мы не ограничены:

background-image:linear-gradient(red,orange,yellow,green,blue,pink);

в этом примере мы с помощью градиента реализовали подобие радуги.

Мы можем также менять направление и угол градиента:

background-image:linear-gradient(to right
,red,orange,yellow,green,blue,pink);

слева на направо.

background-image:linear-gradient(to left
,red,orange,yellow,green,blue,pink);

справо налево

background-image:linear-gradient(to top,red,orange,yellow,green,blue,pink);

снизу вверх

background-image:linear-gradient(45deg,red,orange,yellow,green,blue,pink);

под углом 45 градусов.

Более того мы также можем указывать позицию с которой заканчивается или начинается переход к новому цвету:

background-image:linear-gradient(red,blue  50%);

здесь у нас переход к синему цвету заканчивается на 50% высоты блока. Сам переход мы также можем сократить:

background-image:linear-gradient(red 40%,blue  50%);

здесь мы указали у красного цвета, что его переход начинается на отметке в 40%. В результате чего переход составляет 10% чистая математика(50% - 40%).

И как вы наверное уже догадались если мы укажем:

background-image:linear-gradient(red 50%,blue  50%);

то у нас получится эффект глянца, жесткого резкого переходя от одного цвета к другому.

background-image:linear-gradient(white 33%,blue  33% ,blue  66%,red 66%);

флаг Российской Федерации с помощью градиента CSS.

С линейными градиентами мы более или менее разобрались, да кстати цвет мы можем указывать в любом удобном для нас формате(black, #000, rgb(0,0,0), rgba(0,0,0,1)).

Теперь рассмотрим радиальные градиенты. Чтобы вам все сразу стало понятно, изобразим наш флаг с помощью радиального градиента:

background-image:radial-gradient(white 33%,blue  33% ,blue  66%,red 66%);

как видите эффект довольно необычный. Для того чтобы изобразить радиальный градиент мы воспользовались функцией radial-gradient(). В радиальном градиенты мы уже не можем задавать угол и направление, в плане всего остального они идентичны с линейным градиентом. Если у нас блок которому задается радиальный градиент представляет собой прямоугольник с разной шириной и высотой, то сам градиент представляет собой овальные области.

Поэтому если мы хотим область представлять в виде круга, то нам необходимо указать дополнительный параметр circle:

background-image:radial-gradient(circle, white 33%,blue  33% ,blue  66%,red 66%);

Помимо всего выше перечисленного мы можем менять позицию радиального градиента:

background-image:radial-gradient(circle farthest-side at 95% 25%,yellow  ,blue 5% );

здесь мы указали дополнительный параметр farthest-side at и перечислили в процентах позицию по x и y. ,обратите внимание что между параметрами circle и farthest-side at нет запятой.

И напоследок давайте рассмотрим повторяющиеся градиенты.

Для того чтобы наш градиент дублировался мы можем записать так:

background-image:repeating-radial-gradient(circle farthest-side at 95% 25%,yellow  ,blue 5% );

здесь как видите произошло дублирование нашего радиального градиента в результате чего у нас получился эффект волны.

Тоже самое мы можем делать и с линейным градиентом:

background-image:repeating-linear-gradient(45deg,red ,red 10px,blue 10px,red 20px);

заметьте для того чтобы у нас градиенты стали дублировались мы воспользовались функциями repeating-radial-gradient - дублирование радиального градиента и repeating-linear-gradient - дублирование линейного градиента.

А на этом дорогие друзья данная статья подошла к концу. Надеюсь что она была для вас интересная и познавательная.

Желаю вам успехов и удачи!

Оцените статью

Еще статьи

repeat javaScript

JS filereader

Маски css

tkinter python рисование

кодирование строк php

selection javascript

константы php 7

css zoom

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке