Graphic

Фон елемента background

background-image, background-color

background-color: колір Задає колір фону елемента

background-image: url('адреса'); Задає фонове зображення

Властивість background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat

Властивість background-position

Управляє положенням фонового зображення щодо меж елемента, використовуючи дві координати - x за горизонталлю та y за вертикаллю

• background-position: 50% 50%; по центру
• background-position: center; по центру
• background-position: 100px 200px;
• background-position: right bottom;
• backrgound-position: right 30px bottom 20px;

Властивість background-size

background-size: auto | значення | cover | contain

За замовчуванням браузер не змінює розмір фонового зображення. Якщо зображення буде більшим або меншим за розмір елемента, буде порожній простір, не зайнятий фоном або навпаки, фон буде видно тільки частково.

Ця властивість дозволяє підкоригувати розміри зображення, вказавши необхідну ширину і висоту. Якщо не вказати висоту, вона буде вирахувана автоматично, зберігаючи пропорції.

• background-size: auto auto; значення за замовчуванням
• background-size: 200px; висота буде пропорційна
• background-size: 200px 300px;
• background-size: cover; Повністю покриває
• background-size: contain; покриває до однієї вісі

Властивість background-attachment

background-attachment: scroll | fixed | inherit

За замовчуванням фонове зображення прокручується разом із вмістом елемента. З допомогою властивості background-attachment можна зафіксувати фон на місці і заборонити прокручуватися зі скролом

Багатошаровий фон

Елементу можна задати кілька фонових зображень одночасно. Достатньо перелічити їх у властивості background-image через кому. Для кожного зображення також можна задати значення інших властивостей фону, теж через кому в кожній властивості.

• background-image: url('зображення-1'), url('зображення-2');
• background-size: 100px, cover;
• background-position: top right, center;
• background-repeat: repeat-x, no-repeat;

Властивість background

Збірна властивість для одночасного встановлення значень всіх розглянутих властивостей.

background: background-color background-image background-repeat background-position background-attachment

Якщо якийсь компонент не вказаний, буде взято його значення за замовчуванням.

Властивості "IMG"

Властивості object-fit

Властивість object-fit обрізає, розтягує або масштабує контентне зображення. Це схоже на background-size, але для контентних зображень.

object-fit: fill | contain | cover | scale-down | none

• fill - зображення масштабується без збереження пропорцій, щоб повністю заповнити контейнер
• contain - зображення масштабується зі збереженням пропорцій, щоб максимально заповнити контейнер.
• cover - зображення масштабується зі збереженням пропорцій, щоб повністю заповнити контейнер
• scale-down - буде вибрано значення none або contain, щоб зображення було найменшого розміру
• none - зберігаються вихідні розміри зображення, задана висота і ширина не мають ефекту.

Для того щоб ця техніка працювала, необхідні два обов'язкових кроки.

• Перший - у контейнера (тумби) повинна бути явно вказана фіксована висота.
• Другий - зображення необхідно «вмістити» в контейнер, задавши висоту і ширину 100%.
• Після цього до зображення можна застосовувати властивість object-fit

    
code
    img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
                

Властивості object-position

Дозволяє задати положення зображення в контейнері по осях X і Y. Це схоже на background-position, але для контентних зображень.

object-position: position | initial | inherit

Значенням властивості можуть бути зарезервовані слова, абсолютні або відносні одиниці вимірювання. За замовчуванням значення 50% 50%, тобто вертикально і горизонтально по центру.

• object-fit: fill | object-position: 50px 50px
• object-fit: contain |object-position: left bottom
• object-fit: cover | object-position: 20% 30px
• object-fit: scale-down | object-position: right top

Псевдоелементи ::before і ::after

Псевдоелементи ::before і ::after використовуються для додавання декоративних ефектів (іконок, плашок, оверлеїв) без необхідності створення додаткових порожніх тегів в розмітці

• обов'язкова властивість content: "";
• .list-link::before,
.list-link::after {
content: '';
display: inline-block
width: 24px;
height: 24px; }

hover = .box:hover::before {}

• Home
• Portfolio
• Team
• About

Градієнт

Лінійний градієнт linear-gradient(напрямок, колір-1, колір-2, колір-3, ...)

• background-image: linear-gradient(to top left, blue, red );
• background-image: linear-gradient(75deg, blue, red );

Колорстоп (color-stop)

background-image: linear-gradient( to right, #f44336 15%, #09792b 40%, #00b9ff 65%, #ffb800 );

Rainbow

background-image: linear-gradient( to right, #c64f4f 25%, #09792b 25%, #09792b 50%, #00b9ff 50%, #00b9ff 75%, #ffb800 75% );

Радіальний градієнт

background-image: linear-gradient( to right, #c64f4f 25%, #09792b 25%, #09792b 50%, #00b9ff 50%, #00b9ff 75%, #ffb800 75% );

Повторюваний градієнт

background-image: repeating-linear-gradient( to right, red, red 20px, yellow 20px, yellow 40px );

Тінь елемента

Shedow

box-shadow: 10px 10px 8px 2px rgba(0, 0, 0, 0.3);

Insert shedow

box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.3);

Векторна графіка

Як самостійно створити SVG

• SVG Container

• SVG - Rect

• SVG - Double Rect

• SVG - Circle

• SVG - Ellipse

• SVG - Line

• SVG - polygon

• SVG - polygon-Parallelogram

• SVG - path

  Mалюються у спеціальних редакторах, які під час експорту заповнюють path

• Viev box

  Тобто це «вікно», через яке можна переглядати певну частину SVG-документа. браузер намалює полотно 300x150 пікселів,

  Якщо співвідношення значень атрибутів width і height до їх аналогів у viewBox дорівнює 1:1, зображення буде намальоване в оригінальному розмірі

  У разі співвідношення 2:1, оригінальне зображення буде збільшено в масштабі рівно у два рази, але розміри елемента залишаться попередніми - 400x200

  У разі співвідношення 1:2, оригінальне зображення буде зменшено в масштабі рівно у два рази, але розміри елемента залишаться попередніми - 400x200

• Використання:

  • Як img

    

  • Як фон елемента background-image

  • Вбудований SVG - можна додати ховер.

    Але від дуже незручний в управлінні

  • SVG-спрайт

    • Один файл для всіх SVG-іконок веб-сайту
    • Файл спрайту кешується браузером і не буде завантажений під час повторних візитів.
    • Іконкам в спрайті можна змінювати колір та інші характеристики через CSS.
    • Створення SVG-спрайту, використовуючи сервіс icomoon.io, розглядається у відео-лекції.

• SVG-спрайт

• Оптимвзація спрайту

  Це можна зробити через сайт svgomg