РЕГИСТРАЦИЯ
25 ФЕВРАЛЯ 2022

CSS-класс для блоков

В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.
Пример #1
Градиент на текстовом блоке
ABOUT US
Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Блок AB501

Как сделать
1 шаг
Добавьте блок с большим текстом, например, AB501.

2 шаг
  • Откройте настройки блока, нажмите Добавить CSS Class Name;
  • Задайте название класса, например, uc-about.

3 шаг
  • Добавьте блок T123 HTML-код;
  • Скопируйте код ниже и вставьте его в блок T123.

<style>
.uc-about .t-title {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}
</style>
→ Сохраните изменения и опубликуйте страницу

Готово!
Пример #2
Скруглённые фотографии
Some Words About Us
We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

Блок AB903

Как сделать
1 шаг
Добавьте блок с фотографией, например, AB903.

2 шаг
  • Откройте настройки блока, нажмите Добавить CSS Class Name;
  • Задайте название стиля, например, uc-about.

3 шаг
  • Добавьте блок T123 HTML-код;
  • Скопируйте код ниже и вставьте его в блок T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Сохраните изменения и опубликуйте страницу

Готово!
Пример #3
Анимация при наведении на кнопки
Пример #3
Анимация при наведении на кнопки
Только для десктопных версий
Наведите на кнопку
High Quality
We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We like what we do.
Learn more
Good Support
Our managers are always ready to answer your questions. You can call us during the weekends and at night. You can also visit our office for a personal consultation.
Learn more

Блок FR301

Как сделать
1 шаг
  • Добавьте блок с кнопкой, например, FR301.

2 шаг
  • Откройте настройки блока.
  • Задайте изначальный цвет для текста кнопки, для обводки и фона цвет указывать не нужно.
  • Нажмите Добавить CSS Class Name, задайте название стиля, например, uc-features.

3 шаг
  • Добавьте блок T123 HTML-код;
  • Скопируйте код ниже и вставьте его в блок T123.

<style> 
.uc-features .t-btn { 
    box-shadow: inset 0 0 0 2px #1f5bff; 
    position: relative; 
    transition: color 0.25s; 
    box-sizing: border-box; 
} 
 
.uc-features .t-btn::before, 
.uc-features .t-btn::after { 
    content: ''; 
    position: absolute; 
    border: 2px solid transparent; 
    width: 0; 
    height: 0; 
    top: 0; 
    left: 0; 
    box-sizing: inherit; 
} 
 
.uc-features .t-btn:hover { 
    color: #60daaa !important; 
} 
 
.uc-features .t-btn:hover::before, 
.uc-features .t-btn:hover::after { 
    width: 100%; 
    height: 100%; 
} 
 
.uc-features .t-btn:hover::before { 
    border-top-color: #60daaa; 
    border-right-color: #60daaa; 
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; 
} 
 
.uc-features .t-btn:hover::after { 
    border-bottom-color: #60daaa; 
    border-left-color: #60daaa; 
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s; 
} 
</style>
→ Сохраните изменения и опубликуйте страницу

Готово!
Модификации кодом используют пользователи, которые понимают CSS. Служба поддержки Тильды не консультирует по вопросам работы сторонних скриптов.
Made on
Tilda