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

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

Стоит ли использовать CSS Grid и как убедить в этом свою команду

От автора: вы стремитесь перейти на CSS Grid Layout, но не можете убедить остальных членов команды (ваших коллег или менеджеров)? Кто-то недавно спросил меня, что я могу посоветовать скептически настроенной команде, чтобы они приняли CSS Grid в свой рабочий процесс. Хотя я сам не сталкивался с какими-либо серьезными препятствиями, эту историю я слышу слишком часто. Несмотря на то, что разочаровывает, ...

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

Как объединить функции цветов SASS и CSS-переменные

От автора: новый метод, поддерживаемый во всех браузерах, для сохранения в CSS-переменных цветов и изменения их с помощью функций SASS. Переменные CSS великолепны. Мы все это знаем. Значения цветов HSL лучшие. Согласна! Функции цветов SASS потрясающи. Да, естественно. Но как совместить все эти вещи и использовать их СЕГОДНЯ? Способ есть! Мы разработали новый метод для нашего фреймворка, который сочетает в ...

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

Адаптивный дизайн и пользовательские свойства CSS: определение переменных и контрольных точек

От автора: пользовательские свойства CSS (или переменные CSS) становятся все более и более популярными. Они наконец достигли достойной поддержки браузерами и постепенно пробиваются в различные производственные среды. Популярность пользовательских свойств не должна вызывать удивления, поскольку они могут быть очень полезны во многих случаях, включая управление цветовой палитрой, настройку компонентов и создание тем. Но переменные также могут быть очень полезны, когда ...

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

Никаких медиа-запросов! Верстка адаптивных макетов с CSS Grid

От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это то, что мы способны делать ...

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

Как работает @supports в CSS

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

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

Правильная верстка CSS Grid

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

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

Эффект анимации для лендинга

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

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

Построение явной и неявной сетки CSS

От автора: В этой статье объясняется разница между явными и неявными сетками в CSS Grid. CSS grid layout использует концепцию явной и неявной сетки. Построение сеток CSS без нее не обходится. Это ключевая концепция, которую вы должны знать, иначе вы можете получить кучу строк или столбцов, которых не ожидали! Явные и неявные сетки Явная сетка является сеткой, которую вы определяете ...

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

CSS-библиотека Imagehover

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

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

Создание адаптивной сетки CSS

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

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