РЕГИСТРАЦИЯ
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