Небольшая памятка о том, как используя css grid можно разместить несколько элементов по центру родительского блока.

pic1

pic1


Категории: CSS, -Памятка-

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

Ниже будет пример того, как такое можно сделать с использованием css grid.


Категории: Web, CSS
Пометки: Как сделать двухколончатую таблицу на css grid, css grid таблица

Перечень основных терминов и сборник примеров по технологии css grid.


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

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

Ниже будет пример того, как это можно сделать с использованием css свойств flexbox.


Категории: Web, CSS, -Памятка-
Пометки: Как сделать двухколончатую таблицу на css flex css flex таблица, css flexbox

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


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

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


Категории: CSS
Пометки: flex перенос строки, css 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>


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

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

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


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

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


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

Бывает, что нужно вставить на страницу сайта видео с YouTube, но если использовать обычный метод "embedded code":

pic1

то его обложка может быть не подходящей:

pic1

Есть разные способы, мне понравился разместит на старице любую картинку, наложить на нее кнопку "paly", а при нажатии открывать модальное окно. Единственный момент, что видео, описание и заголовок, у каждого виде свои.


Категории: Web, CSS, JQuery
Пометки: Как вывести YouTube виде во всплывающем окне со своем preview
Яндекс.Метрика