Верстка \ CSS 3

Закругленные внутрь углы при помощи CSS

От автора: каждый из вас сможет сделать закругленные углы для блока. Для стандартного закругления углов достаточно прописать одну строку css кода. Но что делать если углы блока должны быть закруглены внутрь элемента? В данном уроке мы рассмотрим с вами одну из возможностей создания закругленных внутрь углов для элементов.

Продолжить чтение

Верстка \ CSS 3

Стратегическое руководство по использованию пользовательских свойств CSS

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

Продолжить чтение

Верстка \ CSS 3

Доступные индикаторы фокуса в CSS: Кое-что, что следует принимать во внимание

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

Продолжить чтение

Верстка \ CSS 3

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

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

Продолжить чтение

Верстка \ Адаптивная верстка

Размышления на тему: CSS Grid Layout  или CSS-фреймворки?

От автора: благодаря передовым технологиям CSS, таким как CSS Grid Layout и Flexbox, кодирование макета веб-страницы стало значительно проще. Если добавить к этому, что поддержка браузерами как Grid, так и Flexbox тоже очень хороша, тогда возникает вопрос: зачем изучать и использовать CSS фреймворки? В этой статье я рассмотрю Bootstrap, так как это, возможно, одна из самых популярных CSS библиотек пользовательского интерфейса.

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивные таблицы CSS, новый взгляд

От автора: многие люди работают с гибкими таблицами. Обычно идея заключается в том, чтобы превратить таблицу в пары ключ-значение, чтобы ячейки становились строками. Тогда у нас было бы всего 2 столбца, которые вписываются в любой экран. Это и есть адаптивная таблица CSS. Однако это означает, что заголовки таблиц теперь должны повторяться для каждой строки.

Продолжить чтение

Верстка \ CSS 3

Переопределение стилей кнопок по умолчанию

От автора: стили кнопок — это то, что нередко вызывает вопросы. В HTML есть множество «кнопок». Как переопределить стили кнопок по умолчанию: примеры кода и инструмент тестирования — об этом в статье.

Продолжить чтение

Верстка \ CSS 3

Свойство CSS backdrop-filter

От автора: до вчерашнего дня я никогда не слышал о свойстве backdrop filter CSS, но через пару часов изучения я понял, что это не что иное, как магия. Это связано с тем, что оно добавляет фильтры (например, изменение оттенка, контраста или размытия) для фона элемента не затрагивая текст или другие элементы внутри него.

Продолжить чтение

Верстка \ CSS 3

Оформление строк текста с помощью box-decoration-break

От автора: девиз заведения, вступление автора, слоган компании, принцип сообщества, приветствие службы … все они имеют одну общую черту: это один краткий абзац, отображаемый на главной странице веб-сайта — или, по крайней мере, странице «О нас»!

Продолжить чтение