СSS и Тильда, работаем правильно

Содержание

Я не буду вдаваться здесь в подробности что такое CSS и зачем он нужен. В статье хочу сконцентрироваться на нюансах синтаксиса и логике взаимодействия с Тильдой. Почему? Потому что есть определенные нюансы использования в связи с тем, что работаем с онлайн — конструктором сайтов.

Как находить объекты

В CSS есть несколько вариантов как обращаться через селектор к определенным элементам на странице. К примеру возьмем такой зеро блок (zero block) и рассмотрим его HTML блок

В связи с тем, что внутри нулевого блока вы можете перетаскивать все элементы руками, рендер блока происходит с инкапсулированием вашего элемента в контейнер. Поэтому 2 объекта: картинка и кнопка «строительство» будут выглядеть вот так:

Картинка:

<div class="t396__elem tn-elem border_css_image1 tn-elem__7228855581710839441992" data-elem-id="1710839441992" data-elem-type="shape".....>

<a class="tn-atom" href="https://kpscompany.ru/stroyka/" style="background-image:url('https://static.tildacdn.com/tild6263-3439-4036-b432-333662383039/2.jpg');"></a>
</div>

Кнопка:

<div class="t396__elem tn-elem border_css_button1 tn-elem__7228855581710839674457" data-elem-id="1710839674457" data-elem-type="button".....>
<a class="tn-atom" href="https://kpscompany.ru/stroyka/">Строительство →</a>
</div>

Многоточие здесь для сокращения того, что не нужно для рассмотрения. Сам нулевой блок имеет id rec722885558

Итак, чтобы обратиться к картинке мы можем использовать следующие комбинации

#rec722885558 div[data-elem-id="1710839441992"] a

Здесь мы обращаемся сначала к самому zeroblock по его id (символ # означает id) rec722885558. Далее просим найти внутри данного зероблока элемент div, который имеет в своём html коде data-elem-id=»1710839441992″, а уже внутри данного элемента надо найти объект с тегом a

Теперь второй вариант поиска:

#rec722885558 div[data-elem-id="1710839441992"] > a

Результат будет тот же, однако, символ > означает, что мы ищем внутри div[data-elem-id=»1710839441992″] элемент a который находится на 1 уровень вложенности ниже.

Если бы у нас была другая структура, например:

<div class="t396__elem tn-elem border_css_image1 tn-elem__7228855581710839441992" data-elem-id="1710839441992" data-elem-type="shape".....>

<div>
<a class="tn-atom" href="https://kpscompany.ru/stroyka/" style="background-image:url('https://static.tildacdn.com/tild6263-3439-4036-b432-333662383039/2.jpg');"></a>
</div>

</div>

То тогда второй вариант поиска элемента a не сработал бы, так как сам тег a обернут в дополнительный контейнер div и по факту начал находиться не на 1 уровне вложенности, а на втором и тогда вторым вариантом нужно было бы обращаться к a таким образом:

#rec722885558 div[data-elem-id="1710839441992"] > div > a

А первым вариантом поиска все бы сработало, но второй метод более точный.

Все выше перечисленное актуально, но часто мы вешаем собственные классы на элементы, чтобы уж точно применить CSS стиль для нужных нам элементов. Например в моем примере я использовал для картинки свой класс border_css_image1 а для кнопки border_css_button1. Обратите внимание, что класс применился не к самому объекту, а к его div контейнеру. Учитывая данный факт, обращение к a элементу картинки будет таким:

#rec722885558 .border_css_image1 a

Символ точка перед border_css_image1 означает, что мы обращаемся к классу. В данном примере:

<div class="t396__elem tn-elem border_css_image1 tn-elem__7228855581710839441992" data-elem-id="1710839441992" data-elem-type="shape".....>

<a class="tn-atom" href="https://kpscompany.ru/stroyka/" style="background-image:url('https://static.tildacdn.com/tild6263-3439-4036-b432-333662383039/2.jpg');"></a>
</div>

Так как элемент a находиться на первом уровне вложенности внутри div, мы можем обратиться к a и таким образом:

#rec722885558 .border_css_image1 > a

И стили будут работать.

Структура написания CSS в Тильда

Как писать простые стили

Для тех кто в танке, я очень не рекомендую размещать CSS стили на самих страницах. В настройках проекта есть отдельное размещение CSS кода в HEAD сайта. Если вам не в моготу и все равно хотите использовать стиль для конкретной страницы, то используйте тогда id страницы при обращении. Каждая страница на сайте имеет свой id, на примере вот этой странички мы обратимся к картинке из раздела выше по тексту:

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 > a

Вот таким образом можно делить стили для конкретных страниц и при этом скорость загрузки у вас сильно не пострадает. Ладно. Идем к синтаксису.

Стилевые правки обрамляются <style></style> на самих страницах. А в настройках проекта CSS в HEAD пишутся без данных тегов. Просто обращаемся к элементу и пишем стили.

Чтобы прописать стиль к элементу, нужно поставить фигурные скобки и уже между ними можем писать все что нам надо.

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 > a{

}

Давайте, к примеру, уберем скругление картинки:

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 > a{
border-radius:0px!important;
}

border-radius означает скругление границы, 0px означает величину скругления, !important значит что данный стиль должен перебить все остальные, можно конечно и без !important но в данном примере он не будет работать, так как радиус скругления задан уже в самом элементе на 50px, поэтому его надо перебить.

Таким нехитрым образом можно применять свои правки на любой элемент. Все свойства можно найти вот здесь https://www.w3schools.com/cssref/index.php. Их очень много, каждый вы можете протестить в браузере на своих страничках через инструменты веб-разработчика.

Как писать условные стили

Очень часто нужно применять стиль внутри зероблока на один элемент при каких-то действиях на другом. Например. При наведении на кнопку «Строительство», картинка должна становиться черно — белой.

div[data-tilda-page-id="45634523"] #rec722885558:has(.border_css_button1:hover) .border_css_image1 a{
filter: grayscale(100%);
}

А теперь поясню на русском, #rec722885558:has означает что внутри zeroblock с id rec722885558 должен присутствовать элемент с классом border_css_button1 который находится в состоянии наведения на него курсора или долгого тача :hover и если это правда, то ищем элемент с классом border_css_image1 и внутри него на объект с тегом a применяем стиль filter: grayscale(100%)

Получается здесь использовалось два условия. Данная конструкция позволяет применять стиль на один элемент при действии на другом. Однако это работает только внутри зероблока. Если вы хотите применять стили между элементами двух разных зероблоков. например кнопка в одном, картинка в другом, то такое работать не будет. Ограничения движка Тильды, тут уже надо использовать JavaScript.

Можно сделать и простое условие, например при наведении на картинку она становится черно — белой

div[data-tilda-page-id="45634523"] .border_css_image1 a:hover{
filter: grayscale(100%);
}

Здесь все гораздо проще, так как отслеживается только наведение на картинку и сразу же на неё накладывается стиль. Кстати, можно не только менят цвет, но и добавлять границы, менять размер, яркость, скруглять углы и многое другое, даже zoom, было бы желание.

Псевдоклассы before и after

Довольно популярные псевдоклассы, часто используются для украшательств и костылей. Для костылей даже чаще. Например при помощи них можно создать рамку при наведении на картинку, либо наложить анимацию, либо сделать декоративный скос для прямоугольной кнопки. Да много всего, тут уже все в ваших руках.

Итак, в примере ниже активируем псевдокласс before

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 a::before{
content:'';
}

a::before значит что мы задали псевдокласс before для элемента с тегом a, причем данный псевдокласс ничего не содержит content:»

А теперь как это выглядит в html:

На данный псевдокласс можем применять любые стили какие нужно для оформления. Аналогично и для ::after Рассматривайте их как такие же элементы на странице как остальные. В них нет ничего особенного, просто еще один инструмент, который при правильном использовании позволит улучшить дизайн.

Позиционирование глобальное

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

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1{
position: fixed;
z-index: 999;
}

positin:fixed означает что контейнер с картинкой всегда зафиксирован на одном и том же месте вашего экрана, получается при скролле он всегд будет на одном и том же месте.

z-index: 999 чтобы наглядно показать, сделал данный контейнер выше всех по слоям (своего рода на первый план вывел)

На той же позиции:

Немного проскроллил вниз:

Получается он находится всегда на одной и той же высоте от краев экрана. Данную высоту можно регулировать при помощи left, top, right, bottom

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1{
position: fixed;
z-index: 999;
top:10px;
}

Теперь высота отступа сверху будет всегда равна 10px, не важно на каком устройстве. Обратите внимание, что когда ставим позиционирование fixed, то данный контейнер и элемент внутри становятся вне структуры страницы и не обрезаются при перпеполнении контейнером родительского зероблока. Однако если глянуть в html код, то там все так и остается, как и было ранее.

Теперь, еще один тип позиционирования absolute. Чаще всего его применяют на всякие подменю, псевдоклассы, иконки — вобщем везде где нужно выравние относительно родительского элемента. Но тут даже и пример не нужен, так как все элементы внутри зероблока выравнены через postion absolute относительно самого родительского контейнера зероблока, в моем примере это #rec722885558. За счет этого мы и можем перетаскивать и позиционировать элементы своими красивыми дизайнерскими ручками и не думать о всяких padding, margin и flex боксах. Удобно.

Медиазапросы

Звучит красиво и работает красиво. В наше время дофига всяких видов устройств и у каждого разная ширина экрана в пикселях. Поэтому часто нужно адаптировать свои кастомные элементы в Тильде под разные экраны. Для этого есть следующая конструкция:

@media (max-width: 310px){

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 a{
filter: grayscale(100%);
}

}

@media (max-width: 310px) {…..} значит, что для устройства шириной 310px мы применяем следующие стили. Обратите внимание на скобочки. Все стили прописываются уже внутри фигурных скобок.

Я привел базовый медиазапрос, их на самом деле много разных, но благодаря тому, что внтури зероблок мы можем адаптировать блоки под разные экраны руками, часто простых медиа достаточно.

Если нам нужно адаптировать на ещё большее количество вариантов экранов, то пишем все виды экранов одним под другим — от большого к меньшему

@media (max-width: 410px){

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 a{
filter: grayscale(80%);
}

}

@media (max-width: 310px){

div[data-tilda-page-id="45634523"] #rec722885558 .border_css_image1 a{
filter: grayscale(100%);
}

}

Стили можно задавать разные, надеюсь это понятно. В примере просто привел обесцвечивание картинки. Кстати, данные медиусловия писать надо в самом конце и обязательно не забывать про скобки, иначе можно поломать логику работу

Как со мной связаться

Если хотите, чтобы я разобрал ещё какие — либо вопросы или конкретную тематику, то вы можете написать мне https://t.me/vbalakin буду рад разобрать ваш вопрос. А так же, в качестве поддержки буду благодарен каждому вашему лайку на ютубе https://www.youtube.com/@webvova 🙂