Иногда, особенно при адаптивной верстке, нужно разделить одну линию блоков, с display: flex;, на несколько рядов.


Категории: CSS
Пометки: flex перенос строки, css flex новая строка

После выхода Font Awesome 5'ой версии, появление PRO, kit и т.д. стало сложно найти прямую ссылку на CDN шрифта. Оставлю тут памятку:

 
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">

Проверка:

 
<i class="fas fa-check"></i>


Также SVG версия:

 
<script defer src="https://use.fontawesome.com/releases/v5.10.2/js/all.js"></script>


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

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

Поэтому ниже простая демонстрация замены таблицы на flexbox.


Категории: HTML, CSS
Пометки: flexbox table

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


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

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


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

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


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

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


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

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

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


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

Аналоги awesome font

18.03.2020 23:10:51

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


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

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


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