Верстка \ CSS 3

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

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

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

Верстка \ CSS 3

Соотношение сторон для элементов сетки в CSS

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

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

Верстка \ CSS 3

Знакомство с CSS Math Functions Level 4

От автора: функциональные обозначения являются частью CSS Values and Units Module спецификации, где также описаны полезные математические функции типа calc(), а в рамках level 4 функции min() и max(). Эти мощные функции открывают верстальщикам возможности, связанные с логикой в CSS. В этой статье мы обсудим CSS Math Functions calc(), min() и max(), а также как эти три функции можно использовать в работе. Поехали!

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

Верстка \ CSS 3

Как использовать CSS градиенты в вебе

От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.

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

Верстка \ CSS 3

Сглаженные углы с помощью CSS Houdini

От автора: в этой статье речь пойдет про углы CSS, а точнее, про их сглаживание. Недавно я поделился в Twitter статьей об оптических эффектах пользовательского интерфейса. Мне нравятся различные оптические эффекты, но для меня это новая сфера: преобразованный круг может выглядеть круче, чем обычная геометрическая фигура! Это справедливо и для прямоугольников со сглаженными углами. Удивительно, но я также обнаружил, что Apple использует этот прием для всех иконок в iOS7. В математике он известен, как кривая Ламе или суперэллипс.

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

Верстка \ CSS 3

Практическое использование в CSS медиа-запросов aspect-ratio

От автора: сегодня мы поговорим про медиа запросы CSS. Еще в 2016 году, во время моей первой пресс-конференции (хотя это было больше похоже на своего рода экспересс-интервью) на CSSConf.Asia 2016, я сказал, что «мне просто нравится CSS». Я не лгал, CSS — это действительно мое увлечение. И в течение большей части 2017 года я «собирал» интересные макеты, с которыми сталкивался, и пытался реализовать их для Веб.

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

Верстка \ CSS 3

Области сетки CSS и элементы, которые для них назначены, не обязательно должны быть одного размера

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

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

Верстка \ CSS 3

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

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

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

Верстка \ CSS 3

CSS font-display: будущее рендера шрифтов в вебе

От автора: если шрифт отсутствует на мобильном устройстве, его необходимо скачать. Это один из минусов веб-шрифтов. Пока шрифт не станет доступным, браузеру нужно решить, как отобразить блок текста с этим шрифтом. И сделать это нужно так, чтобы смена шрифтов несильно повлияла на UX и восприятие производительности.

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

Верстка \ CSS 3

Итак, можем ли мы уже использовать переменные CSS?

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

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