Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Прекрасные градиенты на CSS3

Дата публикации:2014-05-19

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

Оранжевый градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#e74c3c, #f1c40f);
background: -o-linear-gradient(#e74c3c, #f1c40f);
background: -moz-linear-gradient(#e74c3c, #f1c40f);
background: linear-gradient(#e74c3c, #f1c40f);

Синий градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#01d9fe, #1558f3);
background: -o-linear-gradient(#01d9fe, #1558f3);
background: -moz-linear-gradient(#01d9fe, #1558f3);
background: linear-gradient(#01d9fe, #1558f3);

Зеленый градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#a4e786, #5ad427);
background: -o-linear-gradient(#a4e786, #5ad427);
background: -moz-linear-gradient(#a4e786, #5ad427);
background: linear-gradient(#a4e786, #5ad427);

Темно синий градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#3d68bf, #0d1423);
background: -o-linear-gradient(#3d68bf, #0d1423);
background: -moz-linear-gradient(#3d68bf, #0d1423);
background: linear-gradient(#3d68bf, #0d1423);

Серый градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#dadaef, #8e9198);
background: -o-linear-gradient(#dadaef, #8e9198);
background: -moz-linear-gradient(#dadaef, #8e9198);
background: linear-gradient(#dadaef, #8e9198);

Желтый градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#fedd45, #eebb0a);
background: -o-linear-gradient(#fedd45, #eebb0a);
background: -moz-linear-gradient(#fedd45, #eebb0a);
background: linear-gradient(#fedd45, #eebb0a);

Золотой градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#d8c786, #75662a);
background: -o-linear-gradient(#d8c786, #75662a);
background: -moz-linear-gradient(#d8c786, #75662a);
background: linear-gradient(#d8c786, #75662a);

Красный градиент на CSS

Код градиента:

background: -webkit-linear-gradient(#c65e57, #873630);
background: -o-linear-gradient(#c65e57, #873630);
background: -moz-linear-gradient(#c65e57, #873630);
background: linear-gradient(#c65e57, #873630);

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget