👩‍💻CSS Свойство display (Часть 2)

✔️ display: flex: Включает гибкую раскладку (Flexbox), что позволяет легко выравнивать и распределять пространство между элементами в контейнере.

✔️ display: grid: Включает сеточную раскладку (CSS Grid), что дает возможность создавать сложные макеты с использованием рядов и столбцов.

✔️ display: table: Элемент ведет себя как таблица, что полезно для макетов, требующих табличной структуры.

🔥 Пример использования различных значений display:

<div class="block">Я блочный элемент</div>
<span class="inline">Я строчный элемент</span>
<div class="inline-block">Я строчно-блочный элемент</div>
<div class="flex-container">
  <div>Я часть flex-контейнера</div>
</div>
<div class="grid-container">
  <div>Я часть grid-контейнера</div>
</div>

@codeWeaveChannel | #css

👩‍💻 Шпаргалка по позиционированию элементов с помощью Grid CSS

@codeWeaveChannel | #css

👩‍💻 CSS Shapes

📌 CSS Shapes позволяет создавать нестандартные формы для элементов, что улучшает дизайн и делает интерфейсы более привлекательными.

.circle {
    width: 100px;
    height: 100px;
    background-color: red;
    clip-path: circle(50%);
}

.polygon {
    width: 200px;
    height: 200px;
    background-color: green;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@codeWeaveChannel | #css

👩‍💻 CSS Grid Areas

📌 CSS Grid Areas позволяет именовать области в сетке и размещать элементы в этих областях. Это упрощает создание сложных макетов.

.container {
    display: grid;
    grid-template-areas:
        'header header'
        'sidebar content'
        'footer footer';
    grid-gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

@codeWeaveChannel | #css

👩‍💻 CSS Blend Modes

📌 CSS Blend Modes позволяют смешивать цвета элементов и фонов, создавая интересные визуальные эффекты.

.element {
    background: url('image.jpg');
    mix-blend-mode: multiply;
}

@codeWeaveChannel | #css

👩‍💻 CSS Filters

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

.element {
    filter: blur(5px) brightness(150%);
}

@codeWeaveChannel | #css

👩‍💻 Выравнивание чисел с помощью CSS свойства font-variant-numeric

@codeWeaveChannel | #css

👩‍💻 Псевдоэлемент ::marker в CSS позволяет настраивать стиль маркеров, используемых в списках

@codeWeaveChannel | #css

👩‍💻 Как обрезать текст и добавить в конце многоточие?

@codeWeaveChannel | #css

👩‍💻 Эффект матового стекла CSS

@codeWeaveChannel | #css

👩‍💻 Шпаргалка по CSS свойству transform

@codeWeaveChannel | #css

👩‍💻 Просто синтаксис медиа-запросов в CSS

@codeWeaveChannel | #css

👩‍💻 Эффект вдавленного текста на CSS

@codeWeaveChannel | #css

👩‍💻 Градиентная обводка текста

@codeWeaveChannel | #css

👩‍💻 Grid сетка CSS

@codeWeaveChannel | #css

👩‍💻 Простой способ изменения числового представления упорядоченного списка в CSS

@codeWeaveChannel | #css

👩‍💻 Полукруг на CSS

@codeWeaveChannel | #css

👩‍💻 Определяем пустой HTML элемент с помощью CSS

@codeWeaveChannel | #css