Category: css3

10
Дек
2019

Многостолбцовый макет и column-span в Firefox 71

От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout. Многостолбцовый […]

15
Ноя
2019

CSS4 не будет… потому что он давно прошел. Встречайте CSS8!

Хотя мы свыклись с «вечнозеленой», безверсионной природой CSS, иногда хочется каких-то ориентиров. Всё-таки, как ни крути, CSS сегодня, когда во всех основных движках доступны гриды с CSS-переменными — совсем не то же самое, что CSS в каком-нибудь 2012-м, когда даже…
ДАЛЕЕ

11
Ноя
2019

Синтаксис свойства CSS Display с двумя значениями

От автора: если вам нравится читать примечания к релизам, то вы, возможно, заметили в примечаниях Firefox 70 строку, относящуюся к реализации синтаксиса с двумя значениями для свойства CSS display. Или, может быть, вы встретили упоминание о нем во вчерашнем обзоре Firefox 70. Сегодня я объясню, что это значит, и почему понимание этого синтаксиса важно, несмотря […]

08
Ноя
2019

7 единиц измерения CSS, о которых вы могли не знать

От автора: сегодня я собираюсь познакомить вас с некоторыми инструментами CSS, о которых вы, возможно, не знали раньше. Эти инструменты представляют собой единицы измерения, например, пиксели или em, но вполне возможно, что о некоторых вы никогда не слышали! Давайте начнем. Работая с методами CSS, которые мы хорошо знаем, можно застрять, когда появляются новые проблемы. Поскольку […]

07
Ноя
2019

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

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

01
Ноя
2019

Круги в CSS

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

30
Окт
2019

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

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

29
Окт
2019

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

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

16
Окт
2019

Советы front-end разработчику

Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.

16
Окт
2019

20 потрясающих CSS3 техник, библиотек и примеров

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

14
Окт
2019

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

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

07
Окт
2019

CSS Quickies: CSS-переменные — или как легко создать «светлую / темную» тему

От автора: что такое CSS Quickes? Я спросил в своем любимом сообществе в Instagram: «Какие свойства CSS сбивают вас с толку?» В «CSS Quickies» я подробно объясняю одно свойство CSS. Это свойства, которые просят пояснить члены. Давайте поговорим о Пользовательских свойствах, также известных как Переменные CSS. В заключение! Работали вы когда-нибудь с CSS и хотели […]

04
Окт
2019

Как удалить неиспользуемый CSS

От автора: я уже довольно давно ищу инструмент, который позволит удалить в CSS неиспользуемые стили. Есть особая причина, почему я искала такой инструмент. Она заключается в том, что в настоящее время почти каждый разработчик использует множество CSS-фреймворков и библиотек для быстрой и простой разработки интерфейсов, что делает неизбежным увеличение размера CSS-файлов. Но задумывались ли вы […]

02
Окт
2019

Призрачные кнопки с определением направления наведения в CSS

От автора: меня бы удивило, если бы вы никогда не сталкивались с призрачными кнопками. Вы знаете их: у них прозрачный фон, который при наведении заливается сплошным цветом. В данной статье мы создадим призрачную кнопку в CSS, но это будет просто. Забавная и хитрая часть — это анимировать заливку этой призрачной кнопки так, чтобы фон заливался […]

01
Окт
2019

Использование функции PostCSS для автоматизации рабочего процесса

От автора: некоторое время назад вы, возможно, столкнулись со статьей о продвинутых приемах CSS, в которой я описал, как можно использовать миксины для автоматизации адаптивных размеров шрифтов с помощью RFS. В своей последней версии v9, RFS способен перемасштабировать любое значение для любого свойства CSS в единицах px или rem, такого как margin, padding, border-radius или […]

30
Сен
2019

Изменение цвета изображений товаров с помощью CSS Blend Mode и SVG

От автора: простой способ добавления функции изменения цвета к изображениям товара, с помощью SVG и mix-blend-mode. Чтобы лучше пояснить это название, вот что мы собираемся изучить, и это проще, чем вы думаете. Попробуйте, измените цвет футболки с желтого на синий, используя палитру цветов в правом нижнем углу: Другой пример этого вы можете увидеть в демоверсии […]

25
Сен
2019

Стилизация: подчеркивание ссылок

От автора: перед тем, как прийти к вопросу как стилизовать подчеркивание ссылок, мы должны ответить на вопрос: нужно ли нам подчеркивание? В графическом дизайне подчеркивания обычно рассматриваются как примитивный элемент. Есть более красивые способы сделать акцент, установить иерархию и разграничить названия. «Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или […]

10
Сен
2019

Анимация переменных шрифтов с помощью CSS и Splitting JS

От автора: некоторое время назад я создал на Codepen демо-версию анимированного переменного шрифта. В этой статье я объясню, что такое переменные шрифты, как можно сделать их анимацию, и как я создал этот потрясающий эффект с помощью CSS и немного Javascript. See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen. Представляем переменные шрифты […]

09
Сен
2019

Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)

От автора: на днях у нас в офисе зашла дискуссия об усечении текста, и я с тех пор задался вопросом, зашел ли CSS достаточно далеко, чтобы можно было правильно сделать усеченный текст, например, с помощью checkbox. То есть поддерживает ли он следующее: Несколько строк Кнопку «Показать больше», которая отображает полный текст при нажатии text-overflow: ellipsis […]

20
Авг
2019

Почему вы обязательно должны научиться использовать CSS-in-JS

От автора: время от времени я слышу, что CSS-in-JS создает барьер для входа некоторым людям. Как и любая новая программная абстракция, CSS-in-JS предназначен для того чтобы убрать некоторые сложности из реализации более низкого уровня, в данном случае CSS.

29
Июл
2019

Добавление крутых эффектов с помощью режимов наложения CSS

От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер. […]

28
Май
2019

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

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

27
Май
2019

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

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

25
Апр
2019

Использование миксинов, чтобы убрать математику из Responsive Font Size

От автора: Responsive Font Size (RFS) представляет собой движок, который автоматически вычисляет и обновляет свойство font-size для элементов на основе размеров окна просмотра браузера. Если вы чувствуете, что это звучит знакомо, то это потому, что есть множество инструментов, которые предлагают различные подходы для гибкой типографии. Фактически, совсем недавно Крис собрал кучу подобных инструментов. Ознакомьтесь с […]

13
Мар
2019

Адаптивный дизайн и пользовательские свойства CSS: определение переменных и контрольных точек

От автора: пользовательские свойства CSS (или переменные CSS) становятся все более и более популярными. Они наконец достигли достойной поддержки браузерами и постепенно пробиваются в различные производственные среды. Популярность пользовательских свойств не должна вызывать удивления, поскольку они могут быть очень полезны во многих случаях, включая управление цветовой палитрой, настройку компонентов и создание тем. Но переменные также […]

11
Мар
2019

Как работает @supports в CSS

От автора: CSS имеет удобную функцию, которая позволяет нам проверять, поддерживает ли браузер определенное свойство или сочетание свойство: значение перед тем, как применять блок стилей — подобно тому, как обрабатывается @media-запрос, например, когда ширина окна браузера уже некоторого заданного размера, вступает в силу CSS внутри него. В том же духе CSS внутри этой функции вступит […]

26
Фев
2019

Проблемы с position: sticky CSS и способ их решить

От автора: в этой статье я хочу рассмотреть недостатки position: sticky; — в частности, как мы можем придумать креативную технику при работе с переполнениями, что вызывает разочарование при работе с нативным решением. Липкие элементы или фиксированные панели часто используются в программах — особенно в приложениях на основе строк / столбцов, таких как Microsoft Excel. CSS […]