Category: CSS

21
Окт
2019

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

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

17
Окт
2019

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

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

16
Окт
2019

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

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

16
Окт
2019

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

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

16
Окт
2019

Необходимый минимум для фронтенд-разработчика

На днях я подготовила README для одного проекта, который, надеюсь, будет интересен и поучителен для других разработчиков. Так вот, когда я его писала, я поняла, что несколько лет назад испугалась бы до смерти, если бы наткнулась на нечто подобное, со всякими упоминаниями о Node и его пакетном менеджере, системах Homebrew и Git, всевозможных тестах, тестовых и финальных сборках.

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: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или […]

23
Сен
2019

CSS-эффекты для лендинга

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

16
Сен
2019

Фиксированный заголовок с выделенными разделами при прокрутке

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

10
Сен
2019

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

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

09
Сен
2019

Специализация Frontend Web Developer

Научитесь всему, что должен знать начинающий фронтендер, от специалистов из Microsoft, Intel и W3C. Можно пройти целиком или выбрать, что нравится.
— Читать дальше «Специализация Frontend Web Developer»

09
Сен
2019

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

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

02
Сен
2019

CSS-эффект для текста

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

30
Авг
2019

Субпиксельный рендеринг и обводки

От автора: я был невероятно счастлив, что смог недавно выступить на первом Talk.CSS в Мельбурне, и после этого у меня был хороший разговор с одним из участников о проблемах субпиксельного рендеринга для тонких обводок CSS в разных браузерах. Во время своего выступления я очень кратко затронул тему субпиксельного рендеринга при освещении свертывания полей. Если у […]

20
Авг
2019

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

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

19
Авг
2019

Работа с несколькими столбцами — CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим. Установка многостолбцового […]

16
Авг
2019

Естественно адаптивная сетка CSS с помощью minmax() и min()

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

15
Авг
2019

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

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

14
Авг
2019

Самый простой способ асинхронной загрузки CSS

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

13
Авг
2019

Как добавить резервный Flexbox вариант для CSS Grid

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