CSS Математика - это новый подход в адаптивной верстке?

В последнее время обойма CSS пополнилась новыми математическими функциями. На первый взгляд функции - это просто новый способ задания стилей, но все не так просто. Возможно эти новинки помогут нам изменить устоявшийся подход в адаптивной верстке!

0:00 Пролог
00:35 Вспоминаем ветерана CSS: функцию calc()
04:51 Встречайте, функция min()
06:33 Встречайте, функция max()
07:19 min() и max() на практике
10:57 Вишенка на торте - clamp()
14:20 В чем истинная ценность новых функций?
15:32 Браузерная поддержка
16:00 Резюме

______________________________

Один из моих самых любимых каналов о Фронтенде в telegram:
______________________________

Тайга UI

_______________________________

Примеры calc()
1) Вертикальное выравнивание

2) Сетка на коленке

Примеры min(), max()
1) Вертикальные отступы

2) Общие стили ссылок

3) Фоновая картинка

Примеры clamp()
1) Адаптивная карточка

2) Адаптивная Grid сетка

3) Адаптивная рамка

_____________________
Для видео я использовал материалы из этих статей:

Спасибо авторам, хоть они и никогда не посмотрят эти видосы из-за языкового барьера)

#css #html #frontend

[it]

Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити
за 99 рублей:

Какие тренажеры бывают:

Подписывайтесь:


Тайга UI



Примеры calc()
1) Вертикальное выравнивание

2) Сетка на коленке

Примеры min(), max()
1) Вертикальные отступы

2) Общие стили ссылок

3) Фоновая картинка

Примеры clamp()
1) Адаптивная карточка

2) Адаптивная Grid сетка

3) Адаптивная рамка



Для видео я использовал материалы из этих статей:

Спасибо авторам, хоть они и никогда не посмотрят эти видосы из-за языкового барьера)

[TheEZIC]

Просто алмаз среди IT каналов. Очень доволен что наткнулся на него по рекомендациям ютуба. Даже я как ветеран верстки подчерпнул для себя кучу новых фишек.

[lompasol]

Наконец-то кто-то додумался до нормальной подачи IT контента. А то подустал от 3х часовых занудных скринкастов. Автору респект. Подключай патреон

[Kavrizhka]

Ааааа, почему так смешно 🤣🤣🤣 И одновременно очень полезно! Спасибо👍)))

[Jdjdjjjxhzh]

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

[mamkinproger]

годнейший контент. как начинающий вротендер - много нового узнаю от тебя!

[Kappy]

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

[difficultdo]

Шикарная подача информации, сжато, наглядно, понятно и приятно. Без вашего юмора и полезных подсказок было бы бесконечно нудно идти в ИТ...

[IT-Svyatoslav]

Благодарю 🙏! Всегда публикуешь очень полезные, интересные плюшки

[studyingturtle]

Смотрю видосики даже на нг, ахахах. Дали тестовое с таксками в css, а не шарю, думала уже забить и послать решение на костылях. Твоё видео спасло ситуацию! Спасибо)

[hxqiswq]

Супер) Наконец-то качественное объяснение) Спасибо

[YarkiiYa]

Блин, как же нравится подача!! Респект

[rncwxsx]

Просто шикарно! Спасибо! С новым годом!!!

[ovxkcne]

Отличное видео! Бью в колокол большим пальцем)

[aaffbdefdfab]

3:57 по моему можно написать так:

.full-width-block-name {
margin: 0 -16px;
}

[hqrzqxe]

Красава! Я останавливался, перематывал назад, пробовал. Ни разу не повысил скорость произведения видео

[Kot_off]

Даешь видео со своей сеткой! Как раз сейчас учусь и потребуется для адаптивной верстки)))

[Krasnoe]

даже не знал про эти функции, кроме calc, очень практично

[funnyenglish]

Когда по зову сердца смотришь новое видео!)

[arsenmanasuev]

на реальных проектах используем rem/em в зависимости от проекта и используем для масштабирования по формуле calc(100vw / width * 10) и это помогает нам масштабировать верстку на любом брейк поинте просто подставляя вместо width нашу ширину до которой хотим масштабировать. тут нужно бы скинуть пример но мне лень )