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

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

4 новые удивительные CSS функции в 2022

От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. Давайте поблагодарим их за тяжелый ...

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

Динамический разделитель строк через Flexbox

От автора: при работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье. На экранах поменьше разделитель должен становиться горизонтальным: Давайте рассмотрим HTML. <section class="section"> <div class="section__item section__item--start"> <!-- Content --> </div> <div class="section__item section__item--end"> <!-- Content --> </div> </section> У нас есть секция с двумя дочерними элементами, между которых ...

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

CSS Grid с автозаполнением и максимальным количеством столбцов минимального размера

От автора: мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром. Требования: Пользователь определяет максимальное число колонок. Это будет «естественное» состояние нашей автозаполняемой сетки Если ячейка сетки становится уже заданной пользователем ширины, сетка перестраивается и уменьшает количество колонок Ячейки сетки всегда должны растягиваться на всю ширину grid-контейнера независимо от количества ...

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

6 креативных идей CSS hover эффекта для ссылок

От автора: CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта. Мы говорим про :hover. Однако бывают случаи (не всегда), когда лучше добавить также :focus, так как не всегда для взаимодействия используется мышь. Иногда это может быть ...

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

5 эффектов наведения ссылок на CSS

От автора: по умолчанию неоформленные ссылки на странице выглядят скучно. Они никак не реагируют на наведение. В CSS для изменения такого поведения есть псевдокласс :hover, благодаря которому можно оживить ссылки на сайте, сделав их более динамичными. В предлагаемом уроке вы найдете 5 интересных эффектов наведения ссылок на CSS и без JavaScript. Читайте нас в Telegram, VK, Яндекс.Дзен

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

4 способа прижать футер к низу страницы

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

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

Как использовать CSS ::before и ::after для анимаций и переходов

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

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

9 потрясающих инструментов CSS

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

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

Стандартизация стилей фокуса с помощью пользовательских свойств CSS

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

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

Как в CSS создать анимированные загрузчики страниц

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

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