CSS isn't magic
Відкрити в Telegram
Развлекательный контент для разработчиков с опытом, показывающий, что CSS — это не магия ✨ 🕒 Каждую среду с 17:30 до 18:00 🎅 Автор: @melnik909
Показати більше185
Підписники
Немає даних24 години
-687 днів
-5630 днів
Триває завантаження даних...
Схожі канали
Хмара тегів
Вхідні та вихідні згадування
---
---
---
---
---
---
Залучення підписників
серпень '26серп '26
серпень '26
+5
в 0 каналах
липень '260
в 0 каналах
Get PRO
червень '260
в 0 каналах
Get PRO
травень '260
в 0 каналах
Get PRO
квітень '260
в 0 каналах
Get PRO
березень '260
в 0 каналах
Get PRO
лютий '26
+26
в 0 каналах
Get PRO
січень '26
+9
в 0 каналах
Get PRO
грудень '25
+7
в 0 каналах
Get PRO
листопад '25
+33
в 0 каналах
Get PRO
жовтень '25
+28
в 0 каналах
Get PRO
вересень '25
+17
в 0 каналах
Get PRO
серпень '250
в 0 каналах
Get PRO
липень '25
+11
в 0 каналах
Get PRO
червень '25
+2
в 0 каналах
Get PRO
травень '250
в 0 каналах
Get PRO
квітень '250
в 0 каналах
Get PRO
березень '25
+4
в 0 каналах
Get PRO
лютий '25
+127
в 0 каналах
Get PRO
січень '250
в 0 каналах
Get PRO
грудень '24
+35
в 0 каналах
Get PRO
листопад '24
+144
в 1 каналах
Get PRO
жовтень '24
+36
в 1 каналах
Get PRO
вересень '24
+182
в 0 каналах
Get PRO
серпень '240
в 1 каналах
Get PRO
липень '24
+130
в 0 каналах
Дописи каналу
Пишем код, реагирующий на изменение направления текста
Кто-то сделал так
.container {
box-sizing: border-box;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}.container {
box-sizing: border-box;
max-inline-size: 75rem;
margin-inline: auto;
padding-inline: 1rem;
}| 2 | Применяли ли вы техники из этого канала на работе? | 0 |
| 3 | Как вам такой CSS? | 0 |
| 4 | @layer reset {
.uia-control {
display: inline-flex;
/* оставшиеся стили */
}
a.uia-control {
text-decoration: none;
}
button.uia-control {
border: none;
}
}
.uia-control {
border: 2px solid lightblue; /* правило применится ко всем элементам! */
} | 0 |
| 5 | В последние дни пришло много новеньких. Спасибо, что вы здесь!
В среду каждую неделю публикую посты. Стабильно бешу опросами. Зарабатываю рекламой своих услуг. Ее много. Все по классике. Поскольку я ненормальненкий, могу отписать в любой момент. Кто помогает мне деньгами имеет иммунитет.
Фидбек, критику, похвалу, вопросы и предложения можно писать мне @melnik909. Всех жду! | 0 |
| 6 | background-color не подходит для кастомных радиокнопок
Кто-то сделал так
.toggle[type="radio"]::before {
content: "";
width: 0.5rem;
height: 0.5rem;
background-color: #242424;
/* оставшиеся CSS */
}
Я предлагаю делать так
.toggle[type="radio"]::before {
content: "";
border: 0.25rem solid #242424;
/* оставшиеся CSS */
}
Делаете кастомные радиокнопки? Учтите, что в режиме высокой контрастности background-color не отображается. А вот с border будет все хорошо! | 0 |
| 7 | Ловите https://habr.com/ru/companies/ruvds/articles/883284/ | 0 |
| 8 | Здорово, что есть продукты, которые можно попробовать без оплаты. Осмотреться. Понять, подходит ли.
Только, как я заметил, у них есть одна особенность. Происходит магия, и они исчезают. Исчезает та ценность, которую они несли.
Вот и CSS isn't magic может однажды пропасть из вашей телеги. Если вы не хотите, чтобы CSS стал магией, напишите мне @melnik909. Я расскажу, как можно помочь. | 0 |
| 9 | Это пример кейса из моего чеклиста "HTML и CSS техники для улучшения UI/UX".
Я собрал 10 кейсов, помогающие пользователям меньше страдать. Техники можно применять на любом стеке и с любым опытом. Я специально не замудривал.
В общем, если вы хотите улучшить UI/UX ваших интерфейсов, напишите мне @melnik909. Отправлю вам чеклист взамен на ваши деньги. | 0 |
| 10 | Добавьте background-color, если используется фоновое изображение
Кто-то сделал так
.page {
color: #fefefe;
}
.page__some-way {
background-repeat: no-repeat;
background-size: cover;
background-image: url("profile-bg.svg");
}
Проблема: Пока фоновое изображение не загрузилось, контент элемента может сливаться с фоном страницы и быть незаметным. Вы увидите белый текст на белом фоне.
Я предлагаю делать так
.page {
color: #fefefe;
}
.page__some-way {
background-repeat: no-repeat;
background-size: cover;
background-image: url("profile-bg.svg");
background-color: #222;
}
Решение: Я добавил контрастный цвет к фону с помощью свойства background-color. Теперь контент не может слиться с фоном страницы.
Демо: https://codepen.io/ (тут будет ссылка на демо) | 0 |
| 11 | Посадите медиа-запросы на диету
Кто-то сделал так
.intro__heading {
font-size: 2rem;
}
.intro__description {
font-size: 0.75rem;
}
@media (min-width: 641px) {
.intro__heading {
font-size: 3rem;
}
.intro__description {
font-size: 1.25rem;
}
}
@media (min-width: 1025px) {
.intro__heading {
font-size: 3.5rem;
}
.intro__description {
font-size: 1.5rem;
}
}
Я предлагаю делать так
.intro__heading {
font-size: var(--_heading-font-size, 2rem);
}
.intro__description {
font-size: var(--_hint-font-size, 0.75rem);
}
@media (min-width: 641px) {
.intro {
--_heading-font-size: 3rem;
--_hint-font-size: 1.25rem;
}
}
@media (min-width: 1025px) {
.intro {
--_heading-font-size: 3.5rem;
--_hint-font-size: 1.5rem;
}
}
Медиа-запросы очень быстро раздувают код. В результате дофига правил, в которых легко запутаться. Пользовательские свойства позволяют сократить их. | 0 |
| 12 | В последние дни пришло много новеньких. Спасибо, что вы здесь! В среду каждую неделю публикую посты. Стабильно бешу опросами. Зарабатываю рекламой своих услуг. Ее много. Все по классике.
Фидбек, критику, похвалу, вопросы и предложения можно писать мне @melnik909. Всех жду! | 0 |
| 13 | Что за :nth-child(n of S)?
/*
В чем разница между селекторами?
*/
.highlight:nth-child(n+2) {
color: green;
}
:nth-child(2 of .highlight) {
color: red;
}
Псевдо-класс :nth-child учитывает номер элемента в документе. 'of' убирает эту особенность и позволяет выбрать элемент с любым номером. | 0 |
| 14 | Это пример кейса из моего чеклиста "HTML и CSS техники для улучшения UI/UX".
Я собрал 10 кейсов, помогающие пользователям меньше страдать. Техники можно применять на любом стеке и с любым опытом. Я специально не замудривал.
В общем, если вы хотите улучшить UI/UX ваших интерфейсов,, напишите мне @melnik909. | 0 |
| 15 | Добавьте background-color, если используется фоновое изображение
Кто-то сделал так
.page {
color: #fefefe;
}
.page__some-way {
background-repeat: no-repeat;
background-size: cover;
background-image: url("profile-bg.svg");
}
Проблема: Пока фоновое изображение не загрузилось, контент элемента может сливаться с фоном страницы и быть незаметным. Вы увидите белый текст на белом фоне.
Я предлагаю делать так
.page {
color: #fefefe;
}
.page__some-way {
background-repeat: no-repeat;
background-size: cover;
background-image: url("profile-bg.svg");
background-color: #222;
}
Решение: Я добавил контрастный цвет к фону с помощью свойства background-color. Теперь контент не может слиться с фоном страницы.
Демо: https://codepen.io/ (тут будет ссылка на демо) | 0 |
| 16 | Делать? | 0 |
| 17 | Делать вам чеклист с лайфхаками по улучшению UI/UX с помощью HTML и CSS? Продавать буду в районе 1800р - 3000р. Проголосуйте, пожалуйста | 0 |
| 18 | Можно купить доступ ко всем моим "советам" из этого канала.
Нужно написать мне @melnik909 и перевести 2999р. Затем я вас добавлю в закрытый канал, где опубликованы только мои советы. Все 54шт. Платить нужно 1 раз.
P.S. Если у вас доход не в рублях, то для вас тоже есть вариант. Тоже пишите. | 0 |
| 19 | Меняйте значение только в одном месте
Кто-то сделал так
.banner {
height: 2rem;
position: fixed;
}
.content {
padding-top: 2rem;
}
Я предлагаю делать так
:root {
--page-banner-height: 2rem;
}
.banner {
height: var(--page-banner-height);
position: fixed;
}
.content {
padding-top: var(--page-banner-height);
}
При рефакторинге сложно найти все точки, где значение одного свойства зависит от свойств установленных у других элементов. Давайте проще. Пользовательские свойства нам помогут. | 0 |
| 20 | Как вы думаете, я работаю фронтендером (пишу каждый день код)? | 0 |
