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

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

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

Также важно! Если в целевом блоке уже есть тень, то ее следует убрать. Иначе она переписывает вашу кастомную тень.

We research
We can estimate your company opportunities, explore your economic status, analyze your vehicle access and foot traffic.
Marketing strategies
We develop the main conception of a company according to company target, develop strategies of competitive advantage.
Branding concepts
We develop strategy, conception, and ideology of the project, offer you a city-planning idea, create zones planning schemes.
Как сделать:

1. Создаем любой блок, где есть тени в настройках стандартного блока.
2. Копируем код и вставляем его в блок Т123.
3. В коде указываем класс элемента. Нужный тебе класс - только буквы и цифры вида t858__content или, например, t778__wrapper. Цифры 858 или 778 в имени класса являются уникальными для типа блока. У блока SV202 класс у карточек t858__wrap - это значит, что такой класс будет у всех карточек всех блоков SV202 на сайте. Чтобы добавить тень только в одном из блоков SV202, можно добавить перед " .t858__inner-col{" в коде айди целевого блока через пробел, например "#rec00000001 .t858__inner-col{".
Если тень меняется при наведении - не забудь указать класс во второй части кода.
4. В коде указываем также цвет в формате RGB, её непрозрачность (в процентах), а также:
- смещение по оси X (вправо - положительное значение, влево - отрицательное),
- смещение по оси Y (вниз положительное значение, вверх - отрицательное),
- размытость тени,
- увеличение тени,
- скорость анимации.

В коде этот блок выглядит так.
box-shadow: rgb(47 220 250 / 90%) 0px 0px 20px 0px!important;
transition: box-shadow .3s

Расшифровка по параметрам следующая
box-shadow: rgb(47 220 250 /*цвет*/
90% /*непрозрачность*/)
0px /*смещение по оси X*/
0px /*смещение по оси Y*/
20px /*размытие тени*/
0px /* увеличение тени*/ !important;
transition: box-shadow .5s; /* анимация*/

5. Не забудь поставить эти же значения для тени при наведении на неё.
6. Можно опубликовывать:)

<style> 
/* первоначальное значение тени: цвет/непрозрачность/смещение по оси Х/смещение по оси Y/размытие/увеличение*/
    .t858__inner-col{
        box-shadow: rgb(47 220 250 / 90%) 0px 0px 20px 0px!important;
        transition: box-shadow .3s; /*скорость анимации*/
    }

    /* значение тени при наведении: цвет/непрозрачность/смещение по оси Х/смещение по оси Y/размытие/увеличение*/
    .t858__inner-col:hover{
        box-shadow: rgb(47 220 250 / 90%) 0px 0px 35px 0px!important;
    }
</style>
Вариаций использования можно придумать очень много! Например, вот такой вариант с разным смещением тени по оси Х и Y при наведении
More products
<style>
/* первоначальное значение тени: цвет/непрозрачность/смещение по оси Х/смещение по оси Y/размытие/увеличение*/
    .t778__wrapper{
        box-shadow: rgb(0 0 0 /100%) -10px -10px 0px 0px!important;
        transition: box-shadow .5s;
    }
       /* значение тени при наведении: цвет/непрозрачность/смещение по оси Х/смещение по оси Y/размытие/увеличение*/
    .t778__wrapper:hover{
        box-shadow: rgb(0 0 0 /100%) 10px 10px 0px 0px!important;
    }
</style>
Теней может быть больше одной, и благодаря этому можно создать интересные эффекты. Например, вот так:
We research
We can estimate your company opportunities, explore your economic status, analyze your vehicle access and foot traffic.
Marketing strategies
We develop the main conception of a company according to company target, develop strategies of competitive advantage.
Для добавления нескольких теней, после скобок с цветом и непрозрачностью добавляются данные других теней. Дробное число в скобках - это непрозрачность тени. В этом коде она ставится таким образом, а не в процентах.  Для основы можешь использовать этот код:
<style>
/* rgb(красный (0-255) зеленый (0-255) синий (0-255) / прозрачность (0%-100%)) смещениеПоX смещениеПоY размытиеТени увеличениеТени*/
    .t859__inner-col{
        box-shadow: rgb(240 46 170 / 0.4) 5px 5px 15px, rgb(240 46 170 / 0.3) 5px 5px!important;
        transition: box-shadow .3s; /* плавное изменение тени */
    }
    
    .t859__inner-col:hover{
        box-shadow: rgb(240 46 170 / 0.4) 5px 5px, rgb(240 46 170 / 0.3) 10px 10px, rgba(240 46 170 / 0.2) 15px 15px, rgb(240 46 170 / 0.1) 20px 20px, rgb(240 46 170 / 0.05) 25px 25px!important; /* значение тени при наведении курсора */
    }
</style>
Вообще тени в тильде есть лишь в некоторых блоках, вокруг карточек и фотографий. Но с помощью можно сделать тень вокруг любого элемента.
Как сделать:

1. Создаем любой блок.
2. Копируем код и вставляем его в блок Т123.
3. В коде указываем класс элемента. Нужный тебе класс - только буквы и цифры вида t858. Если тень меняется при наведении - не забудь указать класс во второй части кода.
4. В коде указываем также цвет в формате RGB, её непрозрачность (в процентах), а также:
- смещение по оси X (вправо - положительное значение, влево - отрицательное),
- смещение по оси Y (вниз положительное значение, вверх - отрицательное),
- размытость тени,
- скорость анимации.

В коде этот блок выглядит так.
box-shadow: rgb(47 220 250 / 90%) 0px 0px 20px!important;
transition: box-shadow .3s

Расшифровка по параметрам следующая
box-shadow: rgb(47 220 250 /*цвет*/
90% /*непрозрачность*/)
0px /*смещение по оси X*/
0px /*смещение по оси Y*/
20px /*размытие тени*/!important;
transition: box-shadow .5s; /* анимация*/

5. Не забудь поставить эти же значения для тени при наведении на неё.
6. Можно опубликовывать:)
Elen Palmer
Creative director of Die Zeitung
<style>
    .t152__img{
        box-shadow: rgb(33 33 33 / 40%) 0px 0px 5px;
        transition: box-shadow .3s;
        
    }
    
    .t152__img:hover{
        box-shadow: rgb(33 33 33 / 40%) 0px 0px 15px;
    }
</style>
<style>
    .t142A .t-btn:first-child{
        box-shadow: rgb(25 156 104 / 70%) 0px 0px 10px;
        transition: box-shadow .3s;
        
    }
    
    .t142A .t-btn:first-child:hover{
        box-shadow: rgb(25 156 104 / 70%) 0px 0px 20px;
    }
</style>
Вот еще два интересных примера использования теней в стандартных блоках. Примеры кода ты можешь найти под примерами
Наведи на иконку
  • Any studio visiting
  • Thee days with personal trainer
  • Evening classes after 6 p.m.
Join now
<style>
    .t598__img_circle{
        transition: box-shadow .3s;
    }
    
    .t598__img_circle:hover{
        box-shadow: rgb(100 100 100) 50px 0px 0px -10px, 
                    rgb(150 150 150) 85px 0px 0px -20px,
                    rgb(200 200 200) 115px 0px 0px -30px,
                    rgb(100 100 100) -50px 0px 0px -10px,
                    rgb(150 150 150) -85px 0px 0px -20px,
                    rgb(200 200 200) -115px 0px 0px -30px;
    }
</style>

Наведи на картинку


Smoke is a collection of airborne solid and liquid particulates and gases emitted when a material undergoes combustion or pyrolysis, together with the quantity of air that is entrained or otherwise mixed into the mass.
It is commonly an unwanted by-product of fires (including stoves, candles, oil lamps, and fireplaces).
<style>
    .t195__img{
        box-shadow: rgb(0 0 0 / 80%) 0px 0px 0px 0px!important;
        transition: box-shadow .5s ease-out;
        padding: 0;
    }
    
    .t195__img:hover{
        box-shadow: rgb(0 0 0 / 80%) 150px 0px 10px 800px!important;
    }
В завершение

Тени - весьма простой и понятный эффект.
Тем не менее, в умелых руках, он может оказаться полезным инструментом.
Единственное ограничение - фантазия :)
Made on
Tilda