От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы […]
От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до […]
От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также […]
От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: […]
От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно. Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, […]
От автора: несколько дней назад я разговаривал с другом о самых популярных библиотеках CSS для интеграции в проект простых анимаций. После небольшого исследования появились эти названия, в том числе самые популярные Animate.css и AnimeJS. Список популярных библиотек CSS для интеграции в проект простых анимаций: animate.css animejs magic animations hover anijs Больше всего меня поразило то, […]
От автора: я пишу в новой книге главу «Блочная модель» и подошел к тому моменту, когда мне пришлось рассматривать отрицательные поля. К моему удивлению, я обнаружил, что нигде нет систематизированного описания отрицательных полей. Поэтому я должен был понять это для себя. Ниже мой первоначальный проект раздела «Отрицательные поля». Последняя спецификация говорит только: «Отрицательные значения для […]
От автора: типографика в Интернете прошла долгий путь со времен Scalable Inman Flash Replacement (sIFR) и более поздних версий cufón. Это были тяжелые времена для веб-разработчиков. Раньше я боялся получить PSD-файл с каким-то экзотическим шрифтом, использованным в дизайне, так как знал, что впереди еще много часов кросс-браузерной настройки. К счастью, в современном Интернете у нас […]
От автора: Проблема: вы нажимаете ссылку перехода, например, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совершенно нормально, пока в верхней части страницы не появится заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти! Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы размещаете ссылку. Раньше для решения этой […]
От автора: макеты с диагональными сечениями довольно популярны уже несколько лет. Это не новый горячий материал, и вы, вероятно, не найдете его в статьях под названием «Тенденции дизайна в 2020 году». Но я думаю, что это они все еще очень актуальны. Это тот инструмент, который дизайнеры могут использовать, чтобы придать динамику всем прямоугольным блокам со […]
От автора: удивительно, но недавно я обнаружила, что большинство людей даже не знают, что двойная позиция для градиентных переходов — это то, что действительно существует в спецификации, поэтому я решила написать об этом. Согласно спецификации: Задание двух местоположений облегчает создание однотонных «полос» в градиенте, без необходимости повторять цвет дважды. Я полностью согласна, это было первое, […]
От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов. Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте […]
От автора: свойства object-fit и object-position используется, чтобы указать размер и положение внешних медиа, встроенных в HTML, в основном изображений внутри тега img, но также и содержимого элементов video, iframe или embed. Свойства не поддерживаются Internet Explorer, поэтому они более полезны для проектов, где это не так важно. object-fit и object-position могут рассматриваться как параллельные […]
От автора: в этой статье вы узнаете о свойстве CSS line-height и о том, как его использовать для создания приятного визуально, читаемого текста. Возможно, вы уже раньше видели, как использовать высоту строки: [crayon-5e61fbb30d87f965508193/] Но как это работает и какую роль играет в CSS? Типографские корни в CSS Многие идеи в CSS были взяты из типографики. […]
От автора: добавление поддержки «темного режима» на веб-сайта или в приложение становится все более популярным среди разработчиков. Предоставление пользователям возможности выбора темной темы может быть полезным для доступности, так как некоторые люди испытывают головные боли или визуальные затруднения из-за слишком ярких экранов, или же испытывают затруднения при длительном чтении на светлом фоне. Медиа-запросы Благодаря спецификации […]
От автора: идею текущего урока вы могли, скорее всего, неоднократно видеть на различных сайтах. Суть ее проста: видео встраивается в какое-либо изображение, например, это может быть телевизор, ноутбук или смартфон. В экраны этих устройств позиционируется проигрываемый ролик и смотрится все это достаточно оригинально. В данном видео эта идея будет развита и на выходе получится некоторый […]
От автора: в наши дни вполне возможно создавать собственные чек-боксы, переключатели и радио-кнопки, сохраняя при этом семантичность и доступность. Нам даже не нужна ни одна строка JavaScript или дополнительные элементы HTML! На самом деле в последнее время это стало проще, чем когда либо. Давайте рассмотрим, как это делается. Вот, что мы получим в конечном итоге: […]
От автора: в этом уроке вы найдете идею для организации видеослайдера для ваших сайтов. Полученный видеослайдер можно использовать, к примеру, в шапке сайта или же в какой-либо из его секций. Выглядит такое решение очень оригинально и симпатично. Как результат, на фоне секции будет проигрываться первое видео слайдера, а также пользователю будет предоставлена возможность выбора прочих […]
От автора: в CSS нет max-font-size, поэтому, если нам нужно что-то, что делает то же самое, мы должны прибегнуть к хитрости. Зачем это вообще нужно? Ну, сам font-size может быть установлен динамически. Например, font-size: 10vw;. Это использует «единицы окна просмотра» для определения размера шрифта, который будет увеличиваться и уменьшаться в зависимости от размера окна браузера. […]
От автора: возможность анимировать свойства CSS width и height была бы очень полезна. К сожалению, на данный момент это верный способ заставить ваш браузер биться в агонии. В этом 5-минутном руководстве мы рассмотрим использование свойства transform для имитации анимации ширины элемента. Не анимируйте свойства width и height Браузерам не нравится, когда им приходится вычислять позиции […]
От автора: новый подход к адаптивности контент-зависимых компонентов — модификаторы. Планирование адаптивного поведения компонента может быть непростой задачей, особенно когда его содержание сильно влияет на компоновку компонента. Например, давайте рассмотрим компонент таблицы. Вы можете решить использовать две различные схемы: одна — оптимизированная для небольших экранов (макет state-a), другая — для больших экранов (макет state-b). Затем […]
От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset. Есть большая вероятность того, что, хотя большинство веб-разработчиков сталкивались с ними, многие из них, даже самые опытные, не до конца их понимают. Долгое время я знал об этих […]
От автора: селектор псевдо-класса CSS :root используется для выбора родителя самого высокого уровня данной спецификации. В спецификации HTML, :root по сути, эквивалентен селектору html. В сниппете CSS ниже стили :root и html будут делать то же самое: [crayon-5e4b8e328e5e4114059316/] Если вы заметили, я сказал, что :root по сути эквивалентно селектору html. На самом деле, селектор :root […]
От автора: недавно я запустил в Твиттере опрос, в котором попросил перечислить все атрибуты CSS, предлагая дополнительные бонусные баллы за перечисление в алфавитном порядке. Через некоторое время Tejas создал инструмент, который позволяет перечислить все свойства CSS в терминале (если вам когда-нибудь понадобится сделать это по какой-то причине). По-видимому, есть некоторые свойства CSS, о которых я […]
От автора: браузеры становятся все лучше. Похоже, мы находимся в золотом веке, когда для пользователей, получающих доступ к странице, добавляются нескончаемые потоки новых функций, и действительно отличные инструменты для тех, кто создает страницу. Впрочем, так было не всегда. Более ранние версии современных браузеров имели ограниченные возможности, и мы должны были подумать о том, как работать […]
От автора: многие популярные дизайны резюме максимально используют доступное пространство страницы, разделы в них размещаются в виде сетки. Давайте используем CSS Grid для создания макета, который будет отлично выглядеть при печати и на экранах разных размеров. Таким образом, у нас будет возможность использовать резюме онлайн и оффлайн, что может пригодиться в новом году! Сначала мы […]
От автора: свойство CSS contain дает возможность объяснить макет браузеру, чтобы можно было оптимизировать производительность. Тем не менее, это связано с некоторыми побочными эффектами с точки зрения макета. В этой статье я собираюсь представить Спецификацию CSS, которая только что стала Рекомендацией W3C. CSS Containment Specification определяет одно свойство — contain, и оно может помочь вам […]
От автора: в последнее время я экспериментировал с идеей создания облегченной системы сетки на основе CSS Grid. У нас в CodyFrame есть система сетки, и она основана на Flexbox. Однако CSS Grid имеет так много мощных функций, которых нет во Flexbox, что я в итоге создал Flash Grid. Я собираюсь рассказать обо всем процессе создания […]
От автора: мы можем определить на веб-сайтах кривые ослабления для переходов и анимации, чтобы придать им более естественный и аккуратный вид. Но не только к анимации можно применять кривые. Каждый раз, когда происходит переход между двумя состояниями, кривая ослабления делает его более естественным и менее резким. Для анимации и переходов эти кривые ослабления встроены в […]
От автора: в этой статье вы узнаете, как использовать свойство CSS z-index… Единственный способ проникнуть в 3-е измерение с помощью CSS! В большинстве случаев, когда вы стилизуете вещи с помощью CSS, это происходит в 2D плоскости. Элементы HTML размещаются на странице горизонтально / вертикально, как стекируемые блоки в тетрисе. z-index изменяет эту парадигму и дает […]
Свежие комментарии