CodeWeave | C#, JS, HTML, CSS
148 subscribers
89 photos
1 file
24 links
Сообщество для обмена знаниями и ресурсами по программированию на HTML, CSS, SCSS, JavaScript, jQuery, C#, SQL

Admin - @WesternMikhailCat
Download Telegram
👩‍💻 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 CSS Blend Modes

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

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


@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 CSS Filters

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

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


@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Выравнивание чисел с помощью CSS свойства font-variant-numeric

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Псевдоэлемент ::marker в CSS позволяет настраивать стиль маркеров, используемых в списках

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как обрезать текст и добавить в конце многоточие?

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Эффект матового стекла CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Шпаргалка по CSS свойству transform

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Просто синтаксис медиа-запросов в CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Эффект вдавленного текста на CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Градиентная обводка текста

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Grid сетка CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Простой способ изменения числового представления упорядоченного списка в CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Полукруг на CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Определяем пустой HTML элемент с помощью CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 2 способа прижать footer к низу

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Градиентная рамка с закруглёнными краями на CSS

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 em 🆚 rem

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Подсказка по Flex css

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Шпаргалка по брейкпоинтам адаптации (для Mobile-first)

@codeWeaveChannel | #css
Please open Telegram to view this post
VIEW IN TELEGRAM