Верстка \ CSS 3

Создание диагонального макета в 2020 году

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

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

Верстка \ CSS 3

Пока вы искали в другом месте, CSS-градиенты стали лучше

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

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

Верстка \ CSS 3

Как создать более читаемый CSS

От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов.

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

Верстка \ CSS 3

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

От автора: свойства object-fit и object-position используется, чтобы указать размер и положение внешних медиа, встроенных в HTML, в основном изображений внутри тега img, но также и содержимого элементов video, iframe или embed.

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

Верстка \ CSS 3

Быстрый и легкий темный режим с пользовательскими свойствами CSS

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

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

Верстка \ CSS 3

Видеоплеер для сайта

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

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

Верстка \ CSS 3

Пользовательские стили полей ввода с современным CSS

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

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

Верстка \ CSS 3

Видеослайдер для сайта

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

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

Верстка \ Адаптивная верстка

ResizeObserver - новый мощный инструмент для адаптивного Веб

От автора: слово «адаптивный» — это то, что мы часто даже не упоминаем, потому что в наши дни это уже стандарт в веб-разработке. Существует огромное количество различных экранов, и их число постоянно растет. Мы хотим иметь возможность поддерживать все возможные размеры и при этом сохранять хороший пользовательский опыт. И медиа-запросы CSS — отличное решение данной проблемы. Но как насчет адаптивных компонентов?

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