Различия

Показаны различия между двумя версиями страницы.

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