После выхода 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

Небольшая памятка о том как стилизовать checkbox, если никаких особых анимаций и элементов оформления не требуется.


Категории: Web, HTML, CSS
Пометки: Кастомный чекбокс, оформление checkbox, checkbox css, стилизировать checkbox

Основная идея метода в том, что сначала мы добавляем на страницу svg файл через тег с display: none;, а затем вызываем его через use xlink:href - где и сколько угодно раз.


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

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

Столкнулся с очень навороченным логотипом в формате svg, который никак не хотел адаптироваться. Изменение же width и hight, через сss, обрезало у него края.


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

Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.

pic1


Категории: Web, HTML, CSS, -Памятка-
Пометки: CSS Модальное окно, CSS диалоговое окно

Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.

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

pic1


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

Когда требуется разместить на сайте видео, можно можно использовать HTML 5 тег video. А добавив несколько css стилей, он будет адаптироваться под разные экраны.


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

Просто памятка с примерном волны в формате SVG.


Пометки: Волна, Кривая линия svg

Сейчас все чаще надо размещать на сайтах изображения в формате svg.

Существует много способов, ниже приведу самый удобный из поддерживаемых.


Категории: HTML
Яндекс.Метрика