Найти в Дзене
Вёрстка HTML, CSS

Вёрстка HTML, CSS

Материалы по вёрстке сайтов
подборка · 37 материалов
frontend | ежица-разработчица
frontend | ежица-разработчица
2 года назад
Текст с тенями
И с градиентом! Как сделать на css обводку текста? ➡️ Итак, один из способов: задать тень (text-shadow), причем тени задаем с каждой стороны text-shadow: 1px 0 1px #000,     0 1px 1px #000,    -1px 0 1px #000,    0 -1px 1px #000; Удобно, если у текста несколько обводок, например: text-shadow:   -2px 0 red,   0 2px violet,   2px 0 red,   0 -2px blue; ❗️Однако, если нужно, чтобы текст при этом был прозрачным, то color: transparent; при наличии text-shadow...
frontend | ежица-разработчица
2 года назад
Основные способы центрирования в css
Инструкция по центрированию в CSS: 1) flex-контейнер: display: flex; justify-content: center; align-items: center; Вместо центровки контейнера можно блоку задать align-self: center; или margin: auto; 2) Если контейнер имеет фикс ширины или она в процентах, то блок центрируем по горизонтально: margin: 0 auto; 3) Можно использовать позиционирование, например: .container {   border: 1px solid black;   position: relative;   width: 100%;   height: 100%; } .block {   border:...
frontend | ежица-разработчица
2 года назад
Как оценивать доступность сайта? Нашла хорошую статью об этом: https://habr.com/ru/articles/530404/ 1️⃣ инспектор доступности сайта 2️⃣ эмулятор плохого зрения - опять-таки для Вашего сайта из dev tools 3️⃣ какие проблемы находит Lighthouse 4️⃣ контрастность 5️⃣ как при включенном dev tools выводить информацию о доступности по наведению мыши на элемент Дополнительно: подбираю бесплатный скринридер. Использую NVDA пока что. Если найду что-то получше - напишу. #доступность_сайта
frontend | ежица-разработчица
2 года назад
Гайд по webpack
Написала инструкцию по базовым настройкам от пустой папки Сборка проекта webpack 5, sass Привет! Я написала гайд о том, как с нуля собрать проект с препроцессором sass, используя сборщик webpack 5. Самые базовые настройки: ✔️сборка от пустой папки проекта ✔️ добавляем папку node_modules в ...