Топ 5 трюков CSS, которые сделают из вас ниндзя верстки

1) flex + margin:

Современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto:

Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:

2) flex + gap:

Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):

3) inline-flex:

Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть:

HTML

CSS

Результат

4) drop-shadow:

Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается.

HTML

CSS

Результат( было)

Результат (стало после клика)

5)text-overflow:

Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.

CSS

Если статья была полезной и познавательной, ставьте лайки и комментируйте

Может у тебя тоже есть свои козыри в рукаве?)

Пиши в комментарии!