Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 17 из 53 · 8 мин
box-shadow, filter, backdrop-filter и mix-blend-mode.
Карточкам — мягкую тень, шапке — эффект матового стекла.
Всё это я рисую сам, без картинок. Только не переборщи — тени тоже стоят мне работы.
box-shadowсмещение-x смещение-y размытие растяжение цвет, inset — внутрь, несколько через запятую.<style>
.card { box-shadow: 0 8px 24px rgb(107 62 38 / 18%); padding: 16px; border-radius: 12px; }
</style>
<div class="card">Мягкая тень</div>filterblur(), grayscale(), brightness(), drop-shadow().<style>
img { filter: grayscale(1); }
</style>
<img src="https://picsum.photos/id/431/160/90" alt="Пенал" width="160" height="90">backdrop-filter<style>
.wrap { background: url(https://picsum.photos/id/431/300/120) center/cover; padding: 20px; } .glass { backdrop-filter: blur(6px); background: rgb(255 255 255 / 40%); padding: 8px; }
</style>
<div class="wrap"><div class="glass">Матовое стекло</div></div>mix-blend-modemultiply, screen…<style>
.wrap { background: #c8763a; padding: 12px; } img { mix-blend-mode: multiply; }
</style>
<div class="wrap"><img src="https://picsum.photos/id/431/160/90" alt="" width="160" height="90"></div>Тень — мягкая и полупрозрачная. Резкая чёрная тень выглядит дёшево.
Дай .card тень 0 8px 24px rgb(107 62 38 / 18%), а фото закончившегося товара .sold img — filter: grayscale(1).
Выберите один ответ.
Какое свойство размывает фон ПОД элементом?
Выберите один ответ.
Как сделать тень внутри блока?
Проверяем состояние обучения…