HTML:

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

 
<link href="https://use.fontawesome.com/releases/v5.15.4/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>

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

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

Вам потребовалось разместить на сайте видео и сделать его с автоматическим запуском? В 2024 году нет ничего проще... казалось бы.

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

Каждый пункт списка (<li>) будет выделен так:

Уже есть небольшая памятка о том как стилизовать checkbox спрайтами, но я решил продемонстрировать вариант, когда поле ввода находиться внутри "этикетки" (тега label).

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

Красивая анимация зачеркивая пунктов чеклиста на css и javascript

и темная тема:

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

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

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

Сайт с хорошими паками / сетами иконок, есть как довольно стандартные, так и весьма интересные:

Получить иконку можно в разных форматах:

Также присутствует поиск по ключевым словам.

Ссылка на проект: IconDuck.