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

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


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

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


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

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


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

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

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


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

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


Пометки: HTML тени

В данной заметке опишу самые часто используемые возможности SCSS.


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

Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?


Категории: Web, HTML, CSS
Пометки: web шрифт со знаком рубля, знак рубля шрифтом

Emmet

29.10.2019

Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.


Категории: Web, HTML, CSS
Пометки: автокомплит, ctrl+e в codelobster

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

Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.


Категории: Web, HTML, CSS
Пометки: Адаптивные картинки, Адаптивные изображения используя srcset

Интересный проект Animista, сразу можно посмотреть как будет вырядить CSS эффект, покрутить его, "примерит" и получить код для использования.


Категории: CSS, Сторонние сервисы
Пометки: анимация, animation
Яндекс.Метрика