Главная » Архив меток: CSS

Архив меток: CSS

Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают ...

Читать далее »

Обработка короткого и длинного контента в CSS

От автора: при создании макета в CSS важно учитывать и тестировать краткий и длинный текстовый контент. Четкое представление о том, что делать, если текст различается по длине, может предотвратить множество нежелательных проблем. Есть много ситуаций, когда добавление или удаление одного слова может изменить внешний вид дизайна или, что еще хуже, сломать его и сделать недоступным. В первое время изучения CSS ...

Читать далее »

Отдельные свойства преобразования CSS

От автора: CSS-трансформации в интернете появились вместе с CSS-анимациями и CSS-переходами для добавления визуальных эффектов и движения в Интернете. Эти технологии были основным продуктом веб-платформы и инструментария веб-разработчиков более десяти лет. Фактически, свойство CSS transform впервые появилось в Safari еще в июле 2008 года, когда появилась iPhone OS 2.0. Вы можете найти некоторые архивные публикации о начальной поддержке в WebKit ...

Читать далее »

Как получить совместимые липкие элементы на всю ширину

От автора: на днях у меня было уникальное задание: создать макет с элементами на всю ширину, при этом один элемент должен оставаться наверху. Это оказалось довольно сложно осуществить, поэтому я документирую данный случай, если кому-то понадобится воссоздать тот же эффект. Часть хитрости была связана с логическим позиционированием на маленьких экранах. Идея состоит в том, чтобы отображать основной призыв к действию ...

Читать далее »

Динамические размеры липкой боковой панели с HTML и CSS

От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями. Но липкое позиционирование может быть немного сложным, особенно ...

Читать далее »

Переменные Sass, CSS, а также переменные семантической темы

От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности». Добавление соответствующей «Темной темы» в приложение некоторое время ожидало своей очереди, и, увидев в моем графике немного свободного ...

Читать далее »

Дизайн с адаптивной высотой

От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам уменьшать высоту окна браузера? Да, ...

Читать далее »

Привлекайте внимание пользователя с помощью селектора CSS :focus-within

От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента. Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже: Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже. Селектор :focus-within + псевдоэлементы ::before + абсолютное позиционирование Все в одном блоке ...

Читать далее »

Сравнение и объяснение всех единиц измерения CSS

От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть. Теперь, несмотря на то, что CSS не является языком программирования (разберитесь с этим), его все еще так характеризуют. Особенно в последние годы я ...

Читать далее »

Убираем сдвиги в верстке наложением в CSS Grid

Перевод статьи Prevent layout shifts with CSS grid stacks с сайта www.hsablonniere.com для css-live.ru, автор — Юбер Саблоньер Люди используют CSS Grid по двум причинам: CSS — это потрясающе! Факт, как ни крути. Гриды — отличный инструмент для создания сложных двумерных макетов. У меня иногда бывает третья причина использовать CSS Grid: предотвратить сдвиги в верстке. Я пытался придумать для этого ...

Читать далее »