Верстка \ CSS 3

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

От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно?

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

Верстка \ CSS 3

Круги в CSS

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

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

Верстка \ CSS 3

Создание слайд-шоу с помощью CSS Scroll Snappin

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

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

Верстка \ CSS 3

Создание макета настенного альбома с помощью CSS Grid

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

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

Верстка \ CSS 3

Интеллектуальные пользовательские свойства с новым API Houdini

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

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

Верстка \ CSS 3

CSS Grid меняет наше представление о структуре контента

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

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

Верстка \ CSS 3

Проблемы с закругленными кнопками

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

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

Верстка \ CSS 3

CSS Grid: Введение с примерами

От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как способ написания CSS, так и способ, которым мы пишем разметку. С помощью CSS Grid проще, чем когда-либо, создавать адаптивные, динамические и независимые от исходного формата макеты.

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

Верстка \ CSS 3

Липкое позиционирование без JavaScript (благодаря CSS position: sticky)

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

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