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

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

Адаптивный дизайн и пользовательские свойства 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 элементы сетки? Я не делал этого до недавнего времени — точнее, я не думал об этом, так как никогда не чувствовал, что мне это нужно. Но после того, как я написал статью об относительном позиционировании элементов сетки, у меня в голове застряло, что ...

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

Валидный CSS content

От автора: есть свойство CSS content, которое используется в тандеме с элементами ::before и ::after. Оно вводит контент в элемент. Вот пример: <div data-done="&#x2705;" class="email"> chriscoyier@gmail.com </div> .email::before { content: attr(data-done) " Email: "; /* Это вставляется перед адресом email */ } Свойство обычно принимает все, что вы туда вносите. Однако есть некоторые недопустимые значения, которые оно не примет. Я ...

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