Главная » Архив меток: CSS

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

Почему миру нужны CSS-разработчики

От автора: за последние десять лет CSS значительно расширился, в него добавляются все новые и новые функции. Таким образом, он постепенно становится все более сложным. CSS наших дней очень отличается от CSS десятилетия 2001–2010. Прежде чем я начну объяснять, почему миру нужны разработчики CSS, мы должны вернуться назад и рассмотреть историю CSS. История CSS В предыдущем десятилетии, когда Интернет завоевывал ...

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

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

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

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

CSS Import

От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также можно использовать в сочетании с ...

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

4 способа анимировать цвет текстовой ссылки при наведении

От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: text — это экспериментальная функция, ...

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

Пересечение текста линией в CSS

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

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

Отрицательные поля в CSS

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

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

Когда 255 × 0 не равно нулю

Перевод статьи When 255 × 0 does not Equal Zero с сайта danielcwilson.com для css-live.ru, автор — Дэниел Уилсон Прежде всего, важная оговорка: я не эксперт в работе с цветами и в цветовых профилях мониторов. И я понимаю лишь самые очевидные различия между дефолтным цветовым пространством для веба — sRGB — и другими более новыми моделями. Мы обсудим оба случая, я объясню то, что знаю сам, и оставлю другим возможность (и ссылки) подключиться к разговору и объяснить лучше. Ладно… с этим разобрались, ...

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

Улучшение воспринимаемой производительности с помощью свойства CSS font-display

От автора: типографика в Интернете прошла долгий путь со времен Scalable Inman Flash Replacement (sIFR) и более поздних версий cufón. Это были тяжелые времена для веб-разработчиков. Раньше я боялся получить PSD-файл с каким-то экзотическим шрифтом, использованным в дизайне, так как знал, что впереди еще много часов кросс-браузерной настройки. К счастью, в современном Интернете у нас есть правило CSS @font-face, которое ...

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

Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top

От автора: Проблема: вы нажимаете ссылку перехода, например, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совершенно нормально, пока в верхней части страницы не появится заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти! Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы размещаете ссылку. Раньше для решения этой проблемы использовались всевозможные хаки. На ...

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

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

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

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