Небольшая памятка о том, как используя css grid можно разместить несколько элементов по центру родительского блока.
CSS:
Как отцентровать блоки используя css grid
19.11.2020
Периодически нужен блок, который на больших экранах выглядит как таблица с несколькими колонками, а на экранах с маленьким разрешением как одна колонка.
Ниже будет пример того, как такое можно сделать с использованием css grid.
Обзорная статья по CSS Grid
15.08.2020
Перечень основных терминов и сборник примеров по технологии css grid.
Бывает нужен блок, который на больших экранах выглядит как таблица с несколькими колонками, а на экранах с маленьким разрешением как одна вертикальная полоса.
Ниже будет пример того, как это можно сделать с использованием css свойств flexbox.
Адаптивный шрифт
12.05.2020
Хорошая идея - сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.
Иногда, особенно при адаптивной верстке, нужно разделить одну линию блоков, с display: flex;, на несколько рядов.
После выхода 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
27.12.2018
Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. "под рукой нет простого и понятного примера замены".
Поэтому ниже простая демонстрация замены таблицы на flexbox.
Как не странно, но у галереи на Тильда нет функции скачать фотографию.
Сделал небольшой JS скрпит для добавления кнопки, единственный момент она не созраняет ,а открывает в новом окне фото, но там его сохранить просто.
Вам потребовалось разместить на сайте видео и сделать его с автоматическим запуском? В 2024 году нет ничего проще... казалось бы.