pure.css
Yahoo! является создателем библиотеки pure.css.
Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов.
- Библиотека мало весит и быстро загружается;
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства;
Подробнее о ней читайте в статье!
Ссылка
#css
Yahoo! является создателем библиотеки pure.css.
Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов.
- Библиотека мало весит и быстро загружается;
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства;
Подробнее о ней читайте в статье!
Ссылка
#css
Анимация высоты
Свойство height со значением auto невозможно плавно анимировать.
Но теперь высоту элемента можно анимировать с помощью grid свойств!
Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.
Пример и подробности в статье.
Ссылка
#css
Свойство height со значением auto невозможно плавно анимировать.
Но теперь высоту элемента можно анимировать с помощью grid свойств!
Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.
Пример и подробности в статье.
Ссылка
#css
border
Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.
Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.
По ссылке представлены примеры создания границ с помощью background-image.
Ссылка
#css
Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.
Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.
По ссылке представлены примеры создания границ с помощью background-image.
Ссылка
#css
CSS Nesting
CSS Nesting позволяет вкладывать одно правило стиля в другое, такую возможность раньше предоставляли только препроцессоры CSS. Но теперь это доступно и в самом CSS. Пока что выпущена только первая версия и поддерживается последними версиями браузеров Chrome и Safari .
Но очень радует, что такая возможность появилась! Подробнее о синтаксисе CSS Nesting читайте в статье.
Ссылка
#css
CSS Nesting позволяет вкладывать одно правило стиля в другое, такую возможность раньше предоставляли только препроцессоры CSS. Но теперь это доступно и в самом CSS. Пока что выпущена только первая версия и поддерживается последними версиями браузеров Chrome и Safari .
Но очень радует, что такая возможность появилась! Подробнее о синтаксисе CSS Nesting читайте в статье.
Ссылка
#css
@scope
Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей.
Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.
А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье!
Ссылка
#css
Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей.
Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.
А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье!
Ссылка
#css
Мы живем в эпоху своего рода CSS-ренессанса: новые возможности, техники, эксперименты и идеи сыплются на нас в таком количестве, какого мы не видели со времен CSS3.
В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.
Подробнее о способах упростить CSS читайте в статье.
Ссылка
#css
В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.
Подробнее о способах упростить CSS читайте в статье.
Ссылка
#css
Как писать более чистый CSS: дюжина советов от банальных до неочевидных
Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.
CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.
Ссылка
#css
Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.
CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.
Ссылка
#css
Заметка о полезных возможностях современного CSS
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS
Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно.
Ссылка
#css
Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно.
Ссылка
#css
Игра-тренажёр по CSS Grid
В Grid Garden вам предстоитследить за своим огородом управлять растениями в саду при помощи CSS Grid, Приятный нетипичный способ изучить важную технологию
👀 Начать тренировку
#css
В Grid Garden вам предстоит
#css
Please open Telegram to view this post
VIEW IN TELEGRAM
Игра-тренажёр по Flexbox
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
#css
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
#css
CodeBasics — портал с бесплатными курсами программирования
Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков
👀 Приступить к курсам
#js #css #html
Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков
#js #css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
CSS Diner 🍽️
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
👀 Посмотреть или поиграть
#css
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
#css
Please open Telegram to view this post
VIEW IN TELEGRAM
Игра-тренажёр по Flexbox
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
Coderoll | Frontend #css
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
Coderoll | Frontend #css