Breadcrumbs

CSS

30 полезных CSS-селекторов

Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.

CSS Grid

Игра: http://cssgridgarden.com/#ru 

CSS геометрические фигуры

Отличная подборка различных геометрических фигур на CSS.

CSS, JS прелоадер, кнопка лоадер

Прелоадер - показывается посетителю сайта до того как загрузятся изображения и  отрисуется вся страница .

CSS-селектор :not. Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

CSS3-анимация - @keyframes

CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем.

Анимация картинки при наведении и вообще...

Думал как лучше сделать анимацию при наведении. Нашел несколько подходов.

Выравнивание меню по ширине

Равномерное выравнивание пунктов меню по ширине при помощи CSS.

Компиляторы и ДЕкомпиляторы

Компиляторы:

http://closure-compiler.appspot.com/ 

Иногда требуется вернуть минимизированный (сжатый, без пробелов и переносов) в нормальный человеческий вид. Вот ссылка:

  • mrcoles.com/blog/css-unminify

Для JS: http://jsbeautifier.org 

Модальное окно по центру

Выровнять модальное окно четко по центру (по высоте), если габариты не заданы.

О Flexbox

Полная копия статьи с сайта: html5.by 

Любой верстальщик знает несколько путей выровнять что-либо по вертикали или сделать 3-х колоночный макет. Flexbox может кардинально изменить ситуацию в лучшую сторону.

Подсчитать элементы родителя. Количественные CSS селекторы.

Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?

Угловая стрелка на CSS (прозрачная)

Угловая стрелка на CSS (прозрачная)

Использовал для меню и для слайдера (правую часть)