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

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

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

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

  • 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 при наведении
SALE
Dining Chair by esteban+moreno
With a new design approach for flexible use: from a dinner for two, to a big celebration
79
р.
200
р.
Learn more
Buy now
Underwater wearable watches
A piece of furniture for all occasions. A piece of furniture for all occasions
90
р.
Learn more
Sac Marin Yellow
Marinetmarine store backpack. The Sac Marin can be worn as a backpack or as a bag over one shoulder.
108
р.
Learn more
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
Let's go!
Read more

<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