21:T553,## Aspect ratio ```css .card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; } ``` ```css .avatar { width: 80px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .product-image { aspect-ratio: 4 / 3; } .product-image img { object-fit: contain; } ``` Типові співвідношення: `16:9`, `4:3`, `1:1`, `3:2`. --- ## SVG basics Векторна графіка - не пікселізується. ```html

``` Inline: ```html ``` Елементи: `circle`, `rect`, `line`, `path`, `polygon`, `text`. `viewBox="0 0 100 100"` - внутрішня система координат для масштабування. --- ## Icons **SVG-файл** - просто, складніше стилізувати. **Inline SVG** - колір через CSS: ```html ``` ```css .icon-button { color: #333; } .icon-button:hover { color: blue; } ``` `stroke: currentColor` і `fill: currentColor` - іконка бере `color` з CSS. 23:T57a,## Masks Зображення або SVG як маска: ```css .icon { width: 40px; height: 40px; background: red; -webkit-mask-image: url("/icons/heart.svg"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("/icons/heart.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } ``` Колір через `background`, форма через mask. --- ## Filters ```css filter: blur(5px); filter: brightness(120%); filter: contrast(150%); filter: grayscale(100%); filter: sepia(100%); filter: saturate(200%); filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); ``` ```css .card img { filter: grayscale(100%); transition: filter 0.3s ease; } .card:hover img { filter: grayscale(0%); } ``` `backdrop-filter: blur(12px)` - blur позаду елемента (glassmorphism). --- ## Blend modes ### mix-blend-mode Елемент змішується з тим, що позаду: ```css .hero h1 { color: white; mix-blend-mode: difference; } ``` ```css mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; ``` ### background-blend-mode Кілька background-шарів одного елемента: ```css .hero { background-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), ur

Images & Media

Images & Media