От автора: важным элементом веб-страницы, особенно лендинга является CTA (call to action) – призыв к действию. CTA часто сразу пишут на кнопках «Оформить заказ», «Перезвоните мне», «Заказать расчет стоимости» и т.д. И чем лучше сделана кнопка, чем красивее эффект по наведению на такую кнопку, тем выше вероятность, что ее нажмут посетители сайта. В данном уроке […]
От автора: в CSS Grid помимо явной установки размеров колонок есть еще одна из мощнейших функций – в Grid можно повторять колонки для заполнения контейнера и автоматически размещать в них элементы. В частности, мы можем указать количество столбцов в сетке, а затем браузер будет управлять адаптивностью этих колонок за нас. На маленьких экранах будет показываться […]
От автора: мне одному кажется, что большую часть времени изучение новых возможностей CSS приводит к изучению не только принципа работы одного конкретного свойства, а набора свойств и того, как они работают вместе? А порой и изучения всей спецификации. Нет, я не жалуюсь: понятное дело, что свойства нужно рассматривать как часть экосистемы. Но признаюсь, я обожаю, […]
От автора: мне одному кажется, что большую часть времени изучение новых возможностей CSS приводит к изучению не только принципа работы одного конкретного свойства, а набора свойств и того, как они работают вместе? А порой и изучения всей спецификации. Нет, я не жалуюсь: понятное дело, что свойства нужно рассматривать как часть экосистемы. Но признаюсь, я обожаю, […]
От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. […]
От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. […]
От автора: при работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье. На экранах поменьше разделитель должен становиться горизонтальным: Давайте рассмотрим HTML. [crayon-6281ed853cd22516874048/] У нас есть секция с двумя дочерними элементами, между которых нам необходим разделитель. Для этого я воспользуюсь flexbox. [crayon-6281ed853cd29822032679/] Элементы должны […]
От автора: мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром. Требования: Пользователь определяет максимальное число колонок. Это будет «естественное» состояние нашей автозаполняемой сетки Если ячейка сетки становится уже заданной пользователем ширины, сетка перестраивается и уменьшает количество колонок Ячейки сетки всегда должны растягиваться на всю […]
От автора: CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта. Мы говорим про :hover. Однако бывают случаи (не всегда), когда лучше добавить также :focus, так как не всегда для взаимодействия используется […]
От автора: по умолчанию неоформленные ссылки на странице выглядят скучно. Они никак не реагируют на наведение. В CSS для изменения такого поведения есть псевдокласс :hover, благодаря которому можно оживить ссылки на сайте, сделав их более динамичными. В предлагаемом уроке вы найдете 5 интересных эффектов наведения ссылок на CSS и без JavaScript. Читайте нас в Telegram, […]
От автора: это будет небольшой урок для начинающих верстальщиков, в котором я бы хотел собрать несколько способов решения такой задачи: как прижать футер к низу страницы. Эта задача актуальна для страниц с небольшим объемом контента, где футер, не прижатый к низу страницы, «висит» в воздухе и смотрится это не очень хорошо. В уроке вы найдете […]
От автора: Вы когда-нибудь сталкивались с красиво анимированным компонентом на веб-сайте и думали про себя: «Вау! Как красиво — я бы хотел, чтобы я мог так сделать», но быстро отказывались от этой мысли, потому что предполагали, что это либо выше ваших навыков, либо достижимо только с использованием какой-то библиотеки анимации? Вы будете удивлены, узнав, что […]
От автора: как веб-разработчик, написание кода CSS является одной из основных задач, которые вы выполняете ежедневно. CSS — это замечательный язык таблиц стилей, который позволяет нам стилизовать веб-страницы и делать их интерактивными на всех пользовательских устройствах. Просто представьте веб-страницу без кода CSS. С этим удивительным языком таблиц стилей мы можем многое сделать. Однако иногда написание […]
От автора: как веб-разработчик, написание кода CSS является одной из основных задач, которые вы выполняете ежедневно. CSS — это замечательный язык таблиц стилей, который позволяет нам стилизовать веб-страницы и делать их интерактивными на всех пользовательских устройствах. Просто представьте веб-страницу без кода CSS. С этим удивительным языком таблиц стилей мы можем многое сделать. Однако иногда написание […]
От автора: уделите две минуты своего времени и рассмотрите текущий проект в браузере. Используя клавишу Tab, вы можете перемещаться между интерактивными элементами, включая кнопки, ссылки и элементы формы. Вы сможете визуально следить за фокусом, когда он перескакивает между элементами в DOM. Но если вы не видите каких-либо визуальных изменений или видите лишь едва заметные визуальные […]
От автора: анимированные загрузчики страниц помогают пользователям быть терпеливыми с инструментом или веб-сайтом. Они дают пользователям понимание, что система работает, сообщают им, сколько времени потребуется для загрузки страницы, и удерживают внимание пользователей, предоставляя им что-то интересное, на что они могут посмотреть. С помощью некоторых базовых навыков веб-дизайна легко создавать анимации загрузки в CSS. В наши […]
От автора: бесконечная прокрутка изображений по-разному применяется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. Например, мы часто видим на веб-сайтах движущийся фон, как показано в примере ниже. В этом посте мы познакомимся с двумя способами создания эффекта бесконечной прокрутки используя фоновые изображения с базовой HTML-разметкой и CSS, в том числе: изображение с бесконечной […]
От автора: бесконечная прокрутка изображений по-разному применяется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. Например, мы часто видим на веб-сайтах движущийся фон, как показано в примере ниже. В этом посте мы познакомимся с двумя способами создания эффекта бесконечной прокрутки используя фоновые изображения с базовой HTML-разметкой и CSS, в том числе: изображение с бесконечной […]
От автора: Язык CSS — простой, мощный и декларативный. Мы можем легко достичь сложных вещей, таких, например, как темный/светлый режим. Однако существует множество заблуждений и неправильного его использования. Они могут превратить разметку CSS в сложный нечитаемый и немасштабируемый код. Как мы можем предотвратить это? Следуя лучшим практикам и избегая наиболее распространенных ошибок. В этой статье […]
От автора: в этой статье я просто резюмирую свой порядок изучения CSS. Надеюсь, это поможет вам улучшить понимание CSS. 1. Приоритет селектора CSS Приоритет селектора CSS разделен на несколько категорий, каждая из которых имеет свою специфичность. Мы можем вычислить фактический приоритет, суммируя специфичность всех селекторов. Фактически, если вы используете правило !important, оно переопределит ВСЕ предыдущие […]
От автора: полоса прокрутки — один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются на многих веб-сайтах для повышения удобства работы пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как та, которую вы видите сейчас, когда читаете эту статью. Полоса прокрутки […]
От автора: в данном уроке будет показана реализация красивой ленты (ribbon) на CSS. Чаще всего подобные ленты можно видеть, к примеру, на карточках товара, но также ее можно использовать при желании и для других элементов сайта. В уроке вы найдете реа…
От автора: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда хотел получить в обычном CSS, с того времени как цветовые функции Sass впервые появились на сцене ( darken(), lighten() и т. д.). Позвольте мне объяснить подробнее, почему это так важно для меня. Динамические цвета в CSS через прозрачность Я писал о создании оттенков […]
От автора: в наши дни, услышав «липкий футер», я думаю, что большинство людей имеют в виду position:sticky, когда footer фиксируется на экране в контексте прокрутки какого-либо родительского элемента. Я говорю не совсем об этом. Фиксированный футер был концепцией пользовательского интерфейса до того, как появились position:sticky, и он означает несколько иное. Идея состоит в том, что […]
От автора: вы когда-нибудь сталкивались со случаем, когда position:sticky не работает должным образом с дочерним элементом контейнера? Несколько дней назад я помогал другу решить именно эту проблему и хочу наконец написать об этом. На самом деле эта проблема не в чем-то глючном или неправильном. Фактически, это эффект поведения CSS по умолчанию. Почему и как? Посмотрим […]
От автора: эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github. Сегодня мы рассмотрим два способа получить эффект матового стекла с помощью чистого CSS. Метод первый Начнем с создания div: [crayon-61c01a51c86a4369245164/] […]
От автора: функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из инструментов, делающих создание веб-сайтов и приложений более динамичными и отзывчивыми. 1. Функция CSS min() Функция CSS min() позволяет вам установить наименьшее (самое отрицательное) значение из списка значений, разделенных запятыми. Она может принимать два параметра, а также — функцию […]
От автора: редизайн приложения никогда не бывает рутинным и простым. Через две недели после того, как меня приняли на работу в Polytomic, я начал реализовывать первый редизайн приложения с момента основания компании. Выбор технологии и способы ее реализации оставались за мной. Кодовая база нашего фронтенда — это одностраничное приложение на базе Create React App (CRA), […]
От автора: в наши дни очень важно сделать сайт адаптивным, чтобы он правильно отображался на всех устройствах. К сожалению, несмотря на все усилия, вы все равно можете получить неработающие макеты. Иногда макеты нарушаются из-за того, что некоторые слова слишком длинные, чтобы уместиться в контейнере. Переполнение контента может произойти, когда вы имеете дело с пользовательским контентом, […]
От автора: вы знаете о медиа-функции CSS prefers-reduced-motion? В двух словах, prefers-reduced-motion это параметр, который сообщает нам, установил ли пользователь системы удаление или минимизацию анимации и переходов. Вот пример использования: [crayon-61b05990c7705831548000/] Выполнение функции уменьшения анимации не обязательно означает полное ее удаление. Анимация может быть уменьшена или ускорена, в зависимости от того, что будет комфортно для […]
Свежие комментарии