Верстка \ CSS 3

Переполнение контейнера в CSS

От автора: в CSS мы можем контролировать ситуацию, когда содержимое элемента слишком велико, чтобы уместиться в контейнер. Свойство для этого – overflow, это сокращение от свойств overflow-x и overflow-y. В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением.

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

Верстка \ CSS 3

4 свойства CSS Grid для большинства ваших потребностей

От автора: CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks предоставляет полный обзор свойств Grid с примерами макетов. В этой статье мы используем обратный подход, мы покажем наименьший возможный набор свойств сетки, который вы должны знать, чтобы он удовлетворял большинство ваших потребностей.

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

Верстка \ CSS 3

Flexbox и абсолютное позиционирование

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

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

Верстка \ CSS 3

Почему миру нужны CSS-разработчики

От автора: за последние десять лет CSS значительно расширился, в него добавляются все новые и новые функции. Таким образом, он постепенно становится все более сложным. CSS наших дней очень отличается от CSS десятилетия 2001–2010.

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

Верстка \ CSS 3

Как сделать размытие фона в CSS с помощью одной строки кода

От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.

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

Верстка \ CSS 3

Как создать липкий футер с помощью flexbox

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

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

Верстка \ CSS 3

CSS Import

От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу.

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

Верстка \ CSS 3

Пересечение текста линией в CSS

От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно.

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