Памятка с медиа запросами для основных типов экранов.


Категории: CSS
Пометки: Медиа запросы (media queries)

Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:

pic1


Категории: HTML, CSS, -Памятка-
Пометки: бэйдж со скидкой. Треугольник на css, акции, акция, баннер

Хорошая идея - сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.


Пометки: Отзывчивый / "резиновый" шрифта на CSS

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


Категории: Web, HTML, CSS

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


Категории: Web, HTML, CSS

Иногда требуется верстка, где страницы поделены на горизонтальные секции, каждая из которых занимает ровно размер экрана. При этом независимо от устройства / разрешения экрана. Понятно, что это можно сделать при помощи JavaScript, но есть способ лучше.


Категории: Web, HTML, CSS

Используя свойство object-fit удобно красиво выводить картинки товаров, особенно если они разных размеров.

Ниже несколько, для демонстрации вариантов отобрадения.


Категории: HTML, CSS
Пометки: Вписать изображение в блок

Для тех, кому надоел awesome font или, по какой-то причине, этот набор иконок не устраивает, в статье представлены несколько похожих иконочных шрифтов.


Категории: Web, CSS

Это краткая заметка про имена классов при использовании методологии БЭМ для верстки Html.


Категории: Web, CSS
Пометки: Металлогения BEM

Сервис позволяет генерировать css код для тени. Есть несколько настроек, включающих: прозрачность, размытие и т.д.


Пометки: HTML тени
Яндекс.Метрика