Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
rekomendaciji [2023/09/19 14:37] tro |
rekomendaciji [2023/10/05 18:13] (текущий) tro [CSS] |
||
|---|---|---|---|
| Строка 7: | Строка 7: | ||
| * графічні формати (які можуть) можна конвертувати у progresiv - тоді картинки будуть при поганому інтернеті хоть потрошку завантажуватись і відразу показуватись | * графічні формати (які можуть) можна конвертувати у progresiv - тоді картинки будуть при поганому інтернеті хоть потрошку завантажуватись і відразу показуватись | ||
| * Якщо при вказанні переходу по якрою # не писати далі куда а залишити просто # - то перейде до верху | * Якщо при вказанні переходу по якрою # не писати далі куда а залишити просто # - то перейде до верху | ||
| + | * Модальне вікно краще описувати внизу після футеру | ||
| ===== CSS ===== | ===== CSS ===== | ||
| * line-height = краще писати не абсолюними значеннями а рзраховувати line-height / font-size = 1.11 (два знаки після коми) (без em) | * line-height = краще писати не абсолюними значеннями а рзраховувати line-height / font-size = 1.11 (два знаки після коми) (без em) | ||
| Строка 15: | Строка 16: | ||
| * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. За умовчанням буде проміжок 4px — 1/4 розміру шрифту найближчого батьківського елемента. | * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. За умовчанням буде проміжок 4px — 1/4 розміру шрифту найближчого батьківського елемента. | ||
| * Щоб у зображенні придбати нижній і правий відступ - достатнього з нього зробити блоковим елемен | * Щоб у зображенні придбати нижній і правий відступ - достатнього з нього зробити блоковим елемен | ||
| + | * Усі секії (section) ідуть впритик, | ||
| + | * Краще робити контейнер <div> з запасом у 15px | ||
| + | * Щоб поставити кнопку по центру - зробити кнопку блочнойю (дисплей блок) и поставити мражин 0 авто | ||
| + | * Якщо розмір кнопки залежить від тексту - пишемо паддінг, | ||
| + | * 2D-трансформації - CSS-переходи, | ||
| + | * Модальне вікно краще описувати внизу після футеру | ||
| + | * Для хеадера краще ставити z-index 1000 щоб він завжди був зверху | ||
| + | * Для заголовків модалок краще використовувати <p> а не <h> | ||
| + | * Щоб позиціювання поставити одному елементк absolute - то батьківському елементу треб поставити position: | ||