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

pic1


Категории: CSS, Сторонние сервисы
Пометки: тени, бордюр, border, shadow, box-shadow

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


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

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

pic1


Категории: HTML, 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

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

 
body.compensate-for-scrollbar {
    overflow: hidden;
}


Категории: CSS
Пометки: Как запрет на скрол, например, при открытом диалоговом окне
Яндекс.Метрика