![[Перевод] Погружаемся в CSS: как использовать :where ()](/uploads/habrahabr_logo.png){kind=logo}
Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования. Читать далее
Подробнее
Привет. В результате работы с начинающими веб-дизайнерами прослеживаются повторяющиеся ошибки — общие в не зависимости от среды разработки (опыт с figma и photoshop). Обсудим их. Эти советы очень простые и подойдут начинающим. Если вы опытный веб-дизайнер и знаете, например, что название рубрики заведомо ограничено в 8 символов, уже посылали шрифт, задумали ширину содержимого 1530px с пониманием дела, то вы большой молодец, а эта статья не для вас. Так как забраковать?
Подробнее
Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам. Читать далее
Подробнее
В новых AR/VR-играх часто заставляют меню как будто парить в воздухе. Воссоздадим основу этого эффекта, добавим адаптивную цветовую схему и учтём пользователей, предпочитающих поменьше анимации. Меню будет работать со скринридером, геймпадом, сенсорным вводом и не только. Подробностями делимся к старту курса по Frontend-разработке. Читать далее
Подробнее
Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще. Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS. Читать далее
Подробнее
Эта статья является продолжением моего «крестового похода» против ветряных мельниц убогих современных тенденций в разметке и оформлении веб-приложений (статья1, статья2). И, поверьте — солидная ее часть — это толерантная, такая, чтобы никоим образом не нарушить NDA, переработка реального доноса код-ревью кода важного боевого проекта для руководства одной из команд в которых мне приходилось участвовать. До этого момента я породил уже три достаточно злых, токсичных длиннопоста для сообщества,
Подробнее
Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы. Читать далее
Подробнее
Всегда ли обновление дизайна — это хорошо для сайта с точки зрения SEO? Нет, не всегда. Более того, часто редизайн влечет за собой ухудшение позиций. Так может, лучше не трогать то, что и так работает? Опыт показывает, что изменение и обновление дизайна сайта раз в несколько лет — решение в очень правильное. Оно помогает улучшить юзабилити, увеличить конверсии и поднять позиции. Но почему тогда многие владельцы сайтов сталкиваются с совершенно обратным эффектом? Читать далее
Подробнее
Приветствую всех жителей хабравиля! Сегодня я подготовил для вас основы по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали! Погнали!
Подробнее
К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются переменными, до редактора анимации прямо в браузере, а также средства масштабирования для отзывчивости в SVG и даже визуализатора специфичности CSS, который пригодится при анализе больших таблиц стилей. Мы структурировали и, где это было возможно, расширили оригинал, добавив информацию и примеры
Подробнее
В статье “Что должно быть в счёте на оплату, чего быть не должно и что дико бесит” мы разбирали содержимое счёта. По результатам той работы возникло желание оформить счёт стильно ибо стандартный вариант бухгалтерских программ вроде 1С какой-то страшный. В статье разберём плюсы генерации счетов в HTML-формате по сравнению с генерацией PDF и тюнинг версии для печати, добавим 5 копеек про ЭЦП (УКЭП). Итак, погнали...
Подробнее
В этом году я видел много шумихи вокруг популярного фреймворка CSS, Tailwind CSS. И подумал, что поделюсь некоторыми мыслями и опасениями по поводу этого фреймворка UI. Я приобрёл небольшой опыт написания CSS с подходом utility-first (полезность прежде всего), когда начал свою карьеру в разработке интерфейсов, несколько лет назад. К старту курса о Frontend-разработке делимся статьёй, автор которой решил, возможно, несколько изменить то, как воспринимается Tailwind, рассказать как о…
Подробнее
