5 крутых CSS трюков для сайта

5 CSS трюков CSS
Многим кажется, что CSS нужен только для описания цветов элементов, их позиционирования и тому подобных вещей. Эти 5 CSS трюков помогут доказать - это не так

Всем привет! Бывает такое, что, делая какой-либо сайт, для себя или же на заказ, возникает желание (а иногда и постановка задачи такая) сделать на сайте какую-то фишку (ну или просто хочется CSS трюков). Или же просто добавить некую “изюминку” в сайт. А иногда, даже если ишку никакую добавлять не нужно, то хочется знать о некоторых трюках для более быстрой и чистой вёрстки сайта.

Стань автором и делись своими знаниями и уменями с другими! Пиши статьи, набирай необходимое количество и рейтинг, чтобы перейти в штат и зарабатывать!

За подробностями пиши на почту: new@hack-life.ru

Как раз для этого мы и собрали несколько интересных и крутых CSS трюков. Многим кажется, что CSS нужен только для описания цветов элементов, их позиционирования и тому подобных вещей. Однако, придётся вас огорчить. На самом деле с помощью CSS можно создавать анимации и многое другое. Об этом и статья, давайте со всем разберёмся.

Не совсем CSS трюк – Flexbox

Кто-то модет сказать, что Flexbox вовсе не трюк, а уже полноценная и неотъемлемая часть CSS кода. И тот, кто это скажет будет прав. Да, Flexbox уже довольно продолжительное время облегчает вёрстку практически всем, кто так или иначе занимается вёрсткой сайтов. А теперь для тех, кто не в курсе. Flexbox или Flexible Box Layout Model – это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS.

Для более наглядного отображения возможностей Flexbox взгляните на пример вертикального выравнивания при помощи всего пары строчек кода.

Более подробно про Flexbox можно узнать в нашей статье “Что такое Flexbox и как он упрощает вёрстку?”

Режимы наложения слоёв

При помощи CSS можно делать много интересных вещей, в частности, применять режимы наложения слоев. Дли применения режимов наложения есть два свойства: mix-blend-mode (определяет смешивание элементов, находящихся друг за другом) и background-blend-mode (определяет смешивание фоновых изображений). Давайте посмотрим, как это работает:

Придание элементу непрямоугольной формы (shape outside)

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

Самое крутое в этом свойстве то, что для его применения нужна всего лишь одна несложная строчка. И всё, вау-ля, Вы супер-ниндзя вёрстки. Вот пример с CodePen, как всё это выглядит:

Обрезка изображения свойством clip-path

Свойство clip-path в коллаборации с предыдущим может дать очень классный эффект. Например, в предыдущем пункте был пример придания тексту округлой формы слева. Теперь же обрежем изображение по кругу и получается красота:

Высота и ширина по размеру зоны просмотра

Допустим, необходимо, чтобы сайт подгонялся под размер зоны просмотра. В таком случае помогут единицы измерения (вроде px, em и тд.), а именно vh и vw. Vh означает 100% высоты зоны просмотра, а vw — 100% ширины зоны просмотра. На примере из CodePen наглядно видно то, как работают данные единицы измерения:

Немного про clip-path и shape-outside

Давайте немного пробежимся по новым для многих свойствах clip-path и shape-outside.

clip-path

Cоздаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область – это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG, либо как фигура, такая как круг.

Значения clip-path:

/* Keyword values */
clip-path: none;

/* Image values */
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

shape-outside

Cоздает форму внутри элемента, вокруг которой будет происходить обтекание. Свойство работает только для float элементов.

Пример прямоугольника, со значениями x и y, определяющими позицию формы, width и height – ширину и высоту, а rx и ry – радиус углов.

rectangle(x, y, width, height, [rx, ry]);

С помощью примеров, описанных выше, можно создавать красивые и крутые сайты, а также упрощать самому себе процесс вёрстки. В 2021 году всё больше и больше людей желают учиться и развиваться в современных профессиях. К счастью, для этого не всегда обязательно иметь при себе много денег на это самое обучение. Ведь есть Hack Life😎

С нами ты можешь учиться и осваивать новую профессию, а также делиться своими знаниями с другими! Пиши на нашу почту: new@hack-life.ru и узнай, как стать автором!

Оцените статью
( Пока оценок нет )
Hack Life - веб для всех
Добавить комментарий