Памятка с медиа запросами для основных типов экранов.
CSS:
CSS Медиа запросы для основных типов экранов
Красивый лэйбл о скидке на css
Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:
Адаптивный шрифт
Хорошая идея - сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.
Иногда, из-за содержимого страницы, на мобильных устройствах появляются пустоты справа в шапке и подвале сайта.
Несколько слов о meta viewport
Мета тег viewport, предназначен для указания, как на мобильных устройствах должна отображаться "область просмотра". Далее будет несколько примеров.
Блок выстой с экран на CSS
Иногда требуется верстка, где страницы поделены на горизонтальные секции, каждая из которых занимает ровно размер экрана. При этом независимо от устройства / разрешения экрана. Понятно, что это можно сделать при помощи JavaScript, но есть способ лучше.
Интересное css свойство object-fit
Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.
Ниже несколько, для демонстрации вариантов отобрадения.
Аналоги awesome font
Для тех, кому надоел awesome font или, по какой-то причине, этот набор иконок не устраивает, в статье представлены несколько похожих иконочных шрифтов.
Это краткая заметка про имена классов при использовании методологии БЭМ для верстки Html.
Хороший инструмент для подбора CSS тени
Сервис позволяет генерировать css код для тени. Есть несколько настроек, включающих: прозрачность, размытие и т.д.