columns

Разработчики привыкли во всех случаях в верстке использовать flex и grid.

Но в CSS есть не менее мощное свойство columns и иногда даже удобнее воспользоваться им вместо привычных способов. 

Например, можно сверстать трех-колоночную структуру и сразу адаптивно без медиа-запросов. Полезно знать о таких возможностях.

Наглядный пример показан в статье!

Ссылка

#css

3D слайдер

CSS способен на многое без помощи JavaScript!

И доказательство тому cоздание 3D анимированного слайдера в виде куба на чистом CSS.

Демо можно глянуть в статье, а также там рассказывается, как создать подобный.

Ссылка

#css

CSS Layout Generator - это инструмент для создания верстки страниц или отдельных компонентов.

С помощью него можно строить разнообразные сетки. Нужно выбрать за основу один из шаблонов и настроить его под свои нужды. На выходе готовый HTML и CSS!

Ссылка

#html #css

pure.css

Yahoo! является создателем библиотеки pure.css.

Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов.

- Библиотека мало весит и быстро загружается; 
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства; 

Подробнее о ней читайте в статье!

Ссылка

#css

Анимация высоты

Свойство height со значением auto невозможно плавно анимировать. 

Но теперь высоту элемента можно анимировать с помощью grid свойств!

Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.

Пример и подробности в статье.

Ссылка

#css

border

Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.

Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.

По ссылке представлены примеры создания границ с помощью background-image.

Ссылка

#css