CSS Функции calc(), min(), max(), clamp()

[@ВихроваИрина]

Ого, не знала, что min и max можно применять для любых свойств. А clamp для адаптивного размера шрифта -- вообще огонь!

[@Alex-y3n9s]

Канал - находка для начинающих 👍 Ждём практических видео

[@VitalBielik]

Класс, очень суперски рассказываешь. Очень здорово прописываешь сценарий текста, все четко и без воды !!)

[@LAMit]

Отлично!!! Теперь можно продолжить смотреть мастер-класс по верстке)

[@Ivanfwit]

Очень круто, спасибо!) дальше обязательно буду смотреть мастер классы)

[@ВячеславСтроков-х4з]

Ждём!

[@smotritelyoutube]

Лайк, пушка просто !!

[@ЭйсВентура-б8д]

Неплохо,неплохо. Давно искал подобного рода информацию. Спасибо за видео,отлично!!

[@Ruslan4ik_B]

Так почитай любую документацию, одинаково.

[@AleksanderLamkov]

@Ruslan4ik_B слово в слово? Обесценил так обесценил.

[@PavelChupryna]

Спасибо за работу!

[@Bit_Maximum]

Спасибо!

[@Anatoli-bq1pe]

Благодарю!

[@AugustProject]

божественно

[@TeachingwithAgent]

Хорош!

[@AbapAbduvaliev]

СУПЕР!!!!!!!!!!

[@akylbekbaizakov]

Thanks!

[@colodatwin3102]

1:02 , вы имели ввиду оператор?) операнд это же про другое

[@AleksanderLamkov]

Привет! Да, я напутал :) Именно оператор.

[@colodatwin3102]

@@AleksanderLamkov отлично) спасибо за урок, very useful)

[@Roman-P.]

Здравствуйте, подскажите пожалуйста, прибрел такую привычку. весь мой адаптив в большинстве связан с формулой font size: calc(16px + ( 36-16 ) * (100vw -360px) / (1920 - 360))); , использовал с margin,gap и т.д. Мне казалось это каким то граалем, сокращалось использование медиа запросов, все плавно уменьшалось. Но вот пока не проверял на производительность, может быть такую формулу нужно стараться использовать как можно реже? И задавать фиксированные значения через медиа запросы, например на 1920px, 700px, 480px, 320px.

[@AleksanderLamkov]

Привет! Я бы предложил использовать подобную формулу только для font-size для шести селекторов: h1, .h1 {} h2, .h2 {} И так далее до h6 Такой принцип я применял в мастер-классах (их 2 на канале, советую ознакомиться). С другими свойствами это кажется мне через чур избыточным и во многих местах достаточно использовать функции min, max и clamp.

[@tortik_0162]

6:25, Подскажите пожалуйста, откуда у нас взялось число 600 (шиирна экрана 600px)? Не вижу это явно указанного в коде

[@AleksanderLamkov]

Привет! В функцию min через запятую передается два аргумента - 200px и выражение "100% / 3", которое при ширине экрана 600px и более будет вычисляться в значение больше 200 пикселей, что будет явно больше, чем первый аргумент, поэтому при ширине экрана 600-9999px (в общем, при любой, больше 599px) функция min будет использовать наименьше вычисленное значение - первый аргумент "200px".

[@tortik_0162]

@@AleksanderLamkov тк откуда 600 то? Это какая то фиксированная ширина, привязанная к чему то или это просто число для примера?

[@AleksanderLamkov]

Это значение ширины экрана, при котором функция min с аргументом "100% / 3" будет отдавать предпочтение другому аргументу 200px, так как именно оно уже будет наименьшим. Если в круглые скобки функции min прописаны через запятую "200px" и "100% / 3", то: 1. На ширине экрана 599px функция выберет среди аргументов именно выражение "100% / 3", которое гарантировано вычислится в значение меньшее, чем 200px. 2. На ширине экрана 600px и шире функция выберет уже значение "200px", так как выражение "100% / 3" будет вычисляться в 200 и более пикселей. Если бы в примере в аргументах функции я использовал (300px, 100% / 4), то аналогичным «решающим» значением для ширины экрана было бы уже 1200px, т. к. 1200 / 4 = 300px.

[@tortik_0162]

@@AleksanderLamkov А, то бишь, первый аргумент умножается на делитель второго. Теперь понял, спасибо огромное ))

[@Luiming-]

Крутой видос, но у моих учеников мозги поплавятся от таких объяснений 😂

[@AleksanderLamkov]

Эх… Объясняю как умею 🤷‍♂️ Но что именно не так? Можете привести пример? Хочу понять зоны роста.

[@slamedesign]

Это что, получается я могу сейчас мой аккордеон полностью сделать на css без "умного вычисления высота на js"? WUT?>!??!?! Не поверю...

[@AleksanderLamkov]

Нет, без костылей на чистом CSS пока не сделать плавное раскрытие аккордеона. Но со @starting-style можно попробовать.

[@Ruslan4ik_B]

Все отлично, но один большой минус что читаешь и быстро. Не хватает живого общения, объяснения

[@AleksanderLamkov]

Учту.

[@abdul_js]

а нельзя заранее взять и max -width задать 1200px чем вот это calc писать

[@AleksanderLamkov]

Если кратко отвечать, то можно, но так будет непрофессионально. Очень часто в верстке нужны переменные container-width и container-padding-x, поэтому без calc в свойстве max-width с этими переменными не обойтись.

[@Richard_Ogurcsov]

Автор, строка в коде: width: calc (10px + 20px); Это конечно полный бред... Тебе не кажется, что проще будет width: 30px;

[@AleksanderLamkov]

Урок про функцию calc и я показываю возможность оперировать в аргументах значениями с одинаковыми единицами измерения. Да и вместо конкретных значений могут быть переменные. В таком случае без calc не обойтись.

[@Richard_Ogurcsov]

@@AleksanderLamkov сложение 2 переменных - это действительно имеет практический смысл. А пример с двумя константами не совсем айс

[@виртуоз_ру]

Хорош 👍