Как на Тильде задать тень товару в карточке, элементу в шейпе — самому объекту, а не его контейнеру

Всем привет😘👋 Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳 С вами — Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео расскажу о том, как, используя всего CSS-свойство filter и его значение drop-shadow (не путать с box-shadow — в тайминге 07:46 ) присвоить тень самому элементу, а не его контейнеру — товару, а не карточке товара, элементу внутри шейпа, а не самому шейпу и т. д.💪🔥 🦊Желающим задонатить — к боту-помощнику 👉 ⏱Тайминг — для вашего удобства❤️: 00:00 — вступление 01:25 — смотрим стандартную настройку тени в зеро 02:20 — присваиваем тень самому объекту внутри контейнера — через CSS filter: drop-shadow(...): /*не забудьте открывающий (в начале) и закрывающий (в конце) теги style в угловых скобках, Youtube их здесь проставить не даёт*/ .класс_вашего_элемента { filter: drop-shadow(7px 7px 10px #999999); } — первое значение в скобках означает сдвиг по 0X; — второе — по 0Y; — третье — blur; — четвёртое — цвет тени (можно через #, rgb, словом (black, green, crimson и т. п.) 03:54 — проговорили ключевые моменты: картинка в пнг, красоту тени задать в css, прописать код 04:40 — формируем css тени в css генераторе (удобно), ссылка — в Полезных ссылках ниже 06:46 — посмотрели документацию по синтаксису на Developer Mozilla Org 07:46 — коротко — о box-shadow (это — тень контейнера (!)) 08:06 — присваиваем тень товару в каталоге товаров в Тильде 14:17 — завершение, приглашаю в чат Pro.дизайн и выражаю готовность отснять материал по вашим темам — предлагайте💋 ✔️Полезные ссылки: 📌 Документация, синтаксис и поиграться с drop-shadow 👉 📌 CSS drop-shadow generator (удобный генератор css-кодов красивых теней, один из генераторов) 👉 📌 удалить фон с картинки 👉 📌 плагин Image Downloader (позволяет качать используемые на сайте изображения), Chrome 👉 📹Хочешь предложить свою тему для видео или давай соберём эфир вместе — пиши в ТГ (никнейм: @chistyakova_website) или в комментах к этому видео🔥 Ещё раз напоминаю о том, что это и другие полезные видео выкладываю, в том числе, в рамках нашего дизайнерского душевного чата, в котором являюсь Админом — чат Pro.дизайн 👉 Вливайтесь для человеческого и профессионального общения, а также на случай, если давно хотели закинуть какую-нибудь интересную тему, но не решались😁 — мы периодически проводим эфиры, так что у вас есть реальный шанс стать приглашённым спикером-экспертом и поделиться своими знаниями, инсайтами и компетенциями с грамотной интеллигентной и просто клёвой аудиторией🔥✨☺️, а потом взять и выложить запись своего бенефиса в соцсетях😉 — отличный инфоповод💪 Если есть вопросы ко мне: ► дизайн; ► типографика и композиция на сайте; ► анимация любого сценария и уровня сложности; ► подбор креативных идей; ► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД); ► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий); ► любой вопрос за рамками поименованных — мои компетенции гораздо шире заявленных😉, — пишите в ЛС, разберёмся в любой ситуации🤝 Чат Pro.дизайн 👉 Сообщество в ВК🥰👉 Мой ТГ — ВК — Инст (продукт Meta, в РФ признана экстремистской организацией) — / DProfile — Приятного просмотра👀🔥 #тени #dropshadow #tilda #тильда
Back to Top