Главная » Архив меток: CSS 3 (страница 23)

Архив меток: CSS 3

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

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

Читать далее »

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

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

Читать далее »

Использование CSS-свойства line-height для улучшения читабельности текста

От автора: в этой статье вы узнаете о свойстве CSS line-height и о том, как его использовать для создания приятного визуально, читаемого текста. Возможно, вы уже раньше видели, как использовать высоту строки: p { font-size: 16px; line-height: 1.2; } Но как это работает и какую роль играет в CSS? Типографские корни в CSS Многие идеи в CSS были взяты из ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

Как вы делаете в CSS max-font-size?

От автора: в CSS нет max-font-size, поэтому, если нам нужно что-то, что делает то же самое, мы должны прибегнуть к хитрости. Зачем это вообще нужно? Ну, сам font-size может быть установлен динамически. Например, font-size: 10vw;. Это использует «единицы окна просмотра» для определения размера шрифта, который будет увеличиваться и уменьшаться в зависимости от размера окна браузера. Если бы мы имели max-font-size, ...

Читать далее »

Анимация CSS width и height без неприятного эффекта

От автора: возможность анимировать свойства CSS width и height была бы очень полезна. К сожалению, на данный момент это верный способ заставить ваш браузер биться в агонии. В этом 5-минутном руководстве мы рассмотрим использование свойства transform для имитации анимации ширины элемента. Не анимируйте свойства width и height Браузерам не нравится, когда им приходится вычислять позиции и размеры элементов на веб-странице. ...

Читать далее »

Ключевые слова CSS «Initial», «Inherit» и «Unset»

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

Читать далее »