Примеры CSS-кода для вашего сайта

Мы собрали для вас несколько интересных эффектов для картинок, секций и кнопок, которые легко сможет использовать даже новичок у себя на сайте. Как правильно размещать CSS-код в настройках редактора mottor можно посмотреть в видео ниже.

Сложность · Средняя

Где можно добавлять и редактировать свой CSS?

1. Открываем редактор сайта
Находим нужный блок или секцию, которым хотим добавить собственные стили. Жмем на иконку с 3 точками и "Настроить CSS":

Пример настройки dns-серверов для сайта на mottor

2. Редактируем код
Видим окно редактирования кода. Его можно разделить на 2 части — для полной версии сайта и для мобильной версии:

• Если вам нужно добавить код для всего блока, то добавлять его нужно внутри конструкции:

& {
/*ваш код*/
}

• Если вы обращаетесь к отдельным элементам по классу или применяете стили для каких-то конкретных блоков внутри родительского — код нужно добавлять отдельно ниже:

& {
}
/*ваш код*/

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

Посмотрите наши вебинары

Простыми словами рассказываем про основы работы с CSS.
Разбираем на примерах кода, которые есть на этой странице

CSS для блоков

Пример 1

Градиент для текста

ГРАДИЕНТНЫЙ ТЕКСТ

Настройки CSS

.blk-data {
background: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
-webkit-background-clip: text!important;
-webkit-text-fill-color: transparent!important;
}

Пример 2

Градиент для группы

Настройки CSS

Без анимации:

.blk_box_self {
background-image: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
}

С анимацией:

.blk_box_self {
background-image: linear-gradient(270deg, #ffcf6f, #e463d9)!important;
background-size: 400% 400%!important;

-webkit-animation: AnimationName 3s ease infinite!important;
-moz-animation: AnimationName 3s ease infinite!important;
-o-animation: AnimationName 3s ease infinite!important;
animation: AnimationName 3s ease infinite!important;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

Пример 3

Градиент для фигуры

Настройки CSS

Без анимации:

.shape {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
}

С анимацией:

.shape {
background: linear-gradient(45deg, #ffcf6f, #e463d9);
background-size: 400% 400%;

-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

Пример 4

Градиент для кнопки