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

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

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

От автора: Z-index — это свойство CSS, которое позволяет размещать элементы в слоях друг над другом. Это супер полезно, и, честно говоря, очень важно знать, как использовать в CSS этот инструмент. К сожалению, z-index является одним из тех свойств, которые не всегда ведут себя интуитивно. Сначала это кажется простым — более высокий номер z-индекса означает, что элемент будет поверх элементов ...

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

О, так много способов создать строку ссылок в виде треугольных лент!

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

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

Использование миксинов, чтобы убрать математику из 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 — Контент размещается ...

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