Интересный проект Animista, сразу можно посмотреть как будет вырядить CSS эффект, покрутить его, "примерит" и получить код для использования.
CSS:
Css анимация на все случаи жизни
Наборы иконок на прозрачном фоне
Довольно красочная подборка иконок (whatsapp, telegram, vk, twitter, facebook и многие другие) на прозрачном фоне.
Можно или вырезать или использовать как спрайты.
Переделка HTML таблицы во flexbox
Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.
Тут есть простое решение - превратить таблицу в flexbox
При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.
Ниже пример выравнивания текста по вертикали в flexbox
Динамический бэкграунд (частицы/кривые)
Интересная библиотека, например, для интерактивного бэкграунда.
Сайт разработчика VincentGarreau/particles.js
Живое Demo
Выравнивание картинки по центру блока.
Нужно было разместить картинку по центру блока, размер самого изображения может быть разным.
Как изменить цвет SVG картинки в CSS
Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.
Использование нестандартного шрифта на сайте
Интересный шрифт
Интересный шрифт, в рукописной стилистике.
/* cyrillic */ @font-face { font-family: 'Neucha'; font-style: normal; font-weight: 400; src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/kfCpWUYjzqqtPFESHGr73_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Neucha'; font-style: normal; font-weight: 400; src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/irvP3TB0tsoy_UMHmCQlTw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
Нашел на сайте
Красивый вывод картинок разного размера
Вечная проблема: картинки разного размера, но должны выглядеть одинаково.
Вот примерный вид результата: