Полезное __ 01 мая, 2021

Топ 5 декоративных CSS свойств для модификации сайтов на Тильде

Перед вами мой личный топ интересных CSS свойств для несложных модификаций для сайтов на Тильде и краткие инструкции по их использованию.

Есть несколько простых CSS свойств, которые могут сильно преобразить внешний вид вашего сайта на Тильде, а может даже и стать основой всего дизайна. В этой статье я поделюсь теми из них, которые на мой взгляд обладают самыми необычными эффектами.

1. filter

CSS свойство filter позволяет вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.

MDN Web Docs

Приведу пример использования этого свойства со значением grayscale. Со всеми остальными значениями вы можете ознакомиться по ссылке выше.


filter: grayscale(100%);

— конвертирует изображение в ч/б гамму. Чем больше процент указан, тем больше доля конверсии. 100% делает изображение полностью черно-белым, 0% — оставляет картинку неизменной. Отлично смотрится в сочетании с hover эффектом.

Например:

Эта картинка при наведении станет цветной

Эта картинка при наведении станет черно-белой

Код из примера:


<style>

    /*Из ч/б в цветную картинку*/
    #rec310925760 .t196__img {
        filter: grayscale(100%);
        transition: all 0.5s;
    }
    #rec310925760 .t196__img:hover {
        filter: grayscale(0%);
    }

    /*Из цветной в ч/б картинку*/
    #rec310926221 .t196__img {
        transition: all 0.5s;
    }
    #rec310926221 .t196__img:hover {
        filter: grayscale(100%);
    }
    
</style>

2. backdrop-filter

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

MDN Web Docs

Это свойство похоже на предыдущее своими эффектами, но отличие от него в том, что backdrop-filter применяется не на сам элемент, а на все, что находится под ним. Из всех значений этого свойства самым популярным, пожалуй, сейчас является blur — глассморфизм снова вернулся в тренды дизайна.


backdrop-filter: blur(10px);

— применяет к фону эффект размытия по Гауссу. Чем больше значение, тем сильнее размытие. Значение 0 оставляет картинку неизменной.

Пример:

Good design is obvious.
Great design is transparent.

Код из примера:


<style>
    
    .t476__content {
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
    }

</style>

3. mix-blend-mode

CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

MDN Web Docs

Данное свойство похоже по своей механике с backdrop-filter, но для того, чтобы увидеть эффект mix-blend-mode не нужно уменьшать прозрачность элемента.

У mix-blend-mode много значений, и все они перекликаются с эффектами наложения из Photoshop или Figma, но я бы хотела подробнее рассказать только об одном из них.


mix-blend-mode: difference;

— цвет элемента смешивается с фоном в режиме "разница". Если базовый цвет элемента белый (#ffffff), то разница между цветами элемента и фона будет максимальная. Чем темнее цвет элемента, тем меньше разница будет между ним и фоном. Элемент черного цвета (#000000) станет "невидимым".

Пример:

Black & White

CONTRAST

Код из примера:


<style>
    
    .t476__content {
        mix-blend-mode: difference;
    }

</style>

Модификация на основе свойства mix-blend-mode: difference; отлично подойдет к черно-белым сайтам, например, для создания всегда контрастного к фону меню.

4. background-clip

Свойство CSS background-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

MDN Web Docs

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


background-clip: text;

(данное свойство работает только с префиксом -webkit-)

Пример:

HELLO WORLD

Код из примера:


<style>
    .clip_bg {

        color: transparent; /*Задайте прозрачный цвет текста*/

        background-image: url(https://static.tildacdn.com/tild3733-3235-4534-a533-373266626461/1534016699_tumblr_pa.gif);
        background-position: center;
        background-size: cover;
        -webkit-background-clip: text;
    }
</style>

Примечания:
1. обязательно задайте тексту прозрачный цвет, чтобы увидеть картинку внутри текста;
2. текст и фоновая картинка — элементы одного тэга, свойство background-clip не работает на родительский тэг

5. scrollbar

::-webkit-scrollbar — группа этих свойств позволяет стилизовать полосу прокрутки на всем сайте или на его отдельных элементах.

MDN Web Docs

::-webkit-scrollbar — это псевдоэлемент, пишется с префиксом -webkit-, что означает, что это экспериментальная технология, которая будет работать только в браузерах на основе движка WebKit (Chrome, Safari, более новые версии Opera, почти все браузеры iOS, включая Firefox для iOS).

Для настройки различных элементов полосы прокрутки используйте следующие псевдоэлементы:
::-webkit-scrollbar — вся полоса прокрутки
::-webkit-scrollbar-thumb — подвижная часть скроллбара (ползунок)
::-webkit-scrollbar-track — дорожка полосы прокрутки

Пример кастомного скроллбара:

Разнообразный и богатый опыт говорит нам, что базовый вектор развития влечет за собой процесс внедрения и модернизации экономической целесообразности принимаемых решений. С учётом сложившейся международной обстановки, высокое качество позиционных исследований требует определения и уточнения стандартных подходов. В своём стремлении повысить качество жизни, они забывают, что высококачественный прототип будущего проекта обеспечивает широкому кругу (специалистов) участие в формировании распределения внутренних резервов и ресурсов. Для современного мира синтетическое тестирование обеспечивает актуальность системы обучения кадров, соответствующей насущным потребностям. Задача организации, в особенности же курс на социально-ориентированный национальный проект выявляет срочную потребность своевременного выполнения сверхзадачи. Идейные соображения высшего порядка, а также укрепление и развитие внутренней структуры способствует подготовке и реализации стандартных подходов. Противоположная точка зрения подразумевает, что сделанные на базе интернет-аналитики выводы, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут объективно рассмотрены соответствующими инстанциями. В рамках спецификации современных стандартов, акционеры крупнейших компаний неоднозначны и будут функционально разнесены на независимые элементы. Высокий уровень вовлечения представителей целевой аудитории является четким доказательством простого факта: повышение уровня гражданского сознания создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса существующих финансовых и административных условий.

Код из примера:


<style>
    .scrollable_block {
        height: 240px;
        overflow-y: scroll;
    }
    .scrollable_block::-webkit-scrollbar {
        width: 6px; /*Ширина скроллбара*/
    }
    .scrollable_block::-webkit-scrollbar-track {
        background: #000000; /*Цвет фона полосы прокрутки*/
    }
    .scrollable_block::-webkit-scrollbar-thumb {
        background-color: #FF002A; /*Цвет ползунка*/
        border-radius: 3px; /*Радиус скругления ползунка*/
    }
</style>

Еще один пример:

Как уже неоднократно упомянуто, некоторые особенности внутренней политики освещают чрезвычайно интересные особенности картины в целом, однако конкретные выводы, разумеется, подвергнуты целой серии независимых исследований. Но постоянный количественный рост и сфера нашей активности обеспечивает актуальность глубокомысленных рассуждений. Как уже неоднократно упомянуто, реплицированные с зарубежных источников, современные исследования будут рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. Противоположная точка зрения подразумевает, что сделанные на базе интернет-аналитики выводы формируют глобальную экономическую сеть и при этом - преданы социально-демократической анафеме. С учётом сложившейся международной обстановки, граница обучения кадров играет важную роль в формировании переосмысления внешнеэкономических политик. Идейные соображения высшего порядка, а также укрепление и развитие внутренней структуры способствует подготовке и реализации стандартных подходов. Противоположная точка зрения подразумевает, что сделанные на базе интернет-аналитики выводы, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут объективно рассмотрены соответствующими инстанциями. В рамках спецификации современных стандартов, акционеры крупнейших компаний неоднозначны и будут функционально разнесены на независимые элементы. Высокий уровень вовлечения представителей целевой аудитории является четким доказательством простого факта: повышение уровня гражданского сознания создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса существующих финансовых и административных условий.

Код из примера:


<style>
    .scrollable_block_2 {
        height: 240px;
        overflow-y: scroll;
    }
    .scrollable_block_2::-webkit-scrollbar {
       width: 16px; /*Ширина скроллбара*/
    }
    .scrollable_block_2::-webkit-scrollbar-track {
        background: #E7EAF3; /*Цвет фона полосы прокрутки*/
    }
    .scrollable_block_2::-webkit-scrollbar-thumb {
        background-color: #0033FF; /*Цвет ползунка*/
        border-radius: 20px; /*Радиус скругления ползунка*/
        border: 5px solid #E7EAF3; /*Граница ползунка в цвет фона*/
    }
</style>

Пример более необычной стилизации скроллбара:

Как уже неоднократно упомянуто, некоторые особенности внутренней политики освещают чрезвычайно интересные особенности картины в целом, однако конкретные выводы, разумеется, подвергнуты целой серии независимых исследований. Но постоянный количественный рост и сфера нашей активности обеспечивает актуальность глубокомысленных рассуждений. Как уже неоднократно упомянуто, реплицированные с зарубежных источников, современные исследования будут рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. Противоположная точка зрения подразумевает, что сделанные на базе интернет-аналитики выводы формируют глобальную экономическую сеть и при этом - преданы социально-демократической анафеме. С учётом сложившейся международной обстановки, граница обучения кадров играет важную роль в формировании переосмысления внешнеэкономических политик. Идейные соображения высшего порядка, а также укрепление и развитие внутренней структуры способствует подготовке и реализации стандартных подходов. Противоположная точка зрения подразумевает, что сделанные на базе интернет-аналитики выводы, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут объективно рассмотрены соответствующими инстанциями. В рамках спецификации современных стандартов, акционеры крупнейших компаний неоднозначны и будут функционально разнесены на независимые элементы. Высокий уровень вовлечения представителей целевой аудитории является четким доказательством простого факта: повышение уровня гражданского сознания создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса существующих финансовых и административных условий.

Код из примера:


<style>
    .scrollable_block_3 {
        height: 240px;
        overflow-y: scroll;
    }
    .scrollable_block_3::-webkit-scrollbar {
       width: 36px; /*Ширина скроллбара*/
    }
    .scrollable_block_3::-webkit-scrollbar-track {
        background: #f7f8fa; /*Цвет фона полосы прокрутки*/
    }
    .scrollable_block_3::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #AAFF00 0.01%, #00FFFF 100%); /*Цвет ползунка*/
        border-radius: 20px; /*Радиус скругления ползунка*/
        border: 8px solid #ffffff; /*Обводка ползунка*/
        box-shadow: 0px 4px 4px rgba(2, 0, 77, 0.1); /*Тень у ползунка*/
    }
</style>

Заключение

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

Понравилась статья?

Для статьи использованы материалы