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

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

Использование миксинов, чтобы убрать математику из Responsive Font Size

От автора: Responsive Font Size (RFS) представляет собой движок, который автоматически вычисляет и обновляет свойство font-size для элементов на основе размеров окна просмотра браузера. Если вы чувствуете, что это звучит знакомо, то это потому, что есть множество инструментов, которые предлагают различные подходы для гибкой типографии. Фактически, совсем недавно Крис собрал кучу подобных инструментов. Ознакомьтесь с этой подборкой, потому что всегда ...

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

Адаптивный дизайн и пользовательские свойства CSS: определение переменных и контрольных точек

От автора: пользовательские свойства CSS (или переменные CSS) становятся все более и более популярными. Они наконец достигли достойной поддержки браузерами и постепенно пробиваются в различные производственные среды. Популярность пользовательских свойств не должна вызывать удивления, поскольку они могут быть очень полезны во многих случаях, включая управление цветовой палитрой, настройку компонентов и создание тем. Но переменные также могут быть очень полезны, когда ...

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

Как работает @supports в CSS

От автора: CSS имеет удобную функцию, которая позволяет нам проверять, поддерживает ли браузер определенное свойство или сочетание свойство: значение перед тем, как применять блок стилей — подобно тому, как обрабатывается @media-запрос, например, когда ширина окна браузера уже некоторого заданного размера, вступает в силу CSS внутри него. В том же духе CSS внутри этой функции вступит в силу, когда проверяемая пара ...

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

Проблемы с position: sticky CSS и способ их решить

От автора: в этой статье я хочу рассмотреть недостатки position: sticky; — в частности, как мы можем придумать креативную технику при работе с переполнениями, что вызывает разочарование при работе с нативным решением. Липкие элементы или фиксированные панели часто используются в программах — особенно в приложениях на основе строк / столбцов, таких как Microsoft Excel. CSS position: sticky также широко используется ...

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

CSS Hyphenation — перенос слов в 2019 году

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

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

Липкое позиционирование блоков (position sticky)

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

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

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него. Возможно, так: Если вам не нравится идея элемента-оболочки, вы можете использовать псевдо-элемент, если отрицательное значение ...

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

Трюки с CSS writing-mode

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна. Основы Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали. writing-mode: horizontal-tb; Допустимые значения: horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию. vertical-rl — Контент размещается ...

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

Разница между currentColor и пользовательскими свойствами

От автора: есть несколько интересных различий между тем, как работают current Color и пользовательские свойства. Оба являются примерами динамических свойств в CSS, но способы их реализации различаются некоторыми очень важными деталями. Недавно я натолкнулся на пример этого, который заставил меня немного почесать голову. Моя подруга пыталась установить тему для контейнера и применить цвет к границе заголовка и телу тексту. Что-то ...

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

Позиционирование элементов в CSS Grid: отрицательные линии сетки

От автора: знаете ли вы, что вы можете использовать отрицательные номера линий, чтобы позиционировать в CSS Grid элементы сетки? Я не делал этого до недавнего времени — точнее, я не думал об этом, так как никогда не чувствовал, что мне это нужно. Но после того, как я написал статью об относительном позиционировании элементов сетки, у меня в голове застряло, что ...

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