Небольшая памятка о том, как используя 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

Иногда, особенно при адаптивной верстке, нужно разделить одну линию блоков, с 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

pic1

Один из тех случаев ,в которых лучше один раз увидеть, чем много раз услышать.

По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes


Категории: Web, CSS
Пометки: css Neon Glowing Text

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

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

pic1


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

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

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


Категории: Web, CSS, Сторонние сервисы
Пометки: css палетка цветов
Яндекс.Метрика