CSS функции min, max и clamp с примерами использования

preview_player
Показать описание


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:

00:00 Медиазапросы больше не нужны
01:00 Бесплатный курс по верстке
01:11 CSS функция min()
03:03 CSS функция max()
03:59 CSS функция clamp()
05:43 clamp для font-size
06:53 Пример использования. Отступы в тексте
07:37 Пример использования. Ширина контейнера
08:03 Пример использования. Ширина сайдбара
08:28 Пример использования. border, radius, shadow
09:42 Пример использования. Отступ gap внутри сетки grid
10:09 Пример использования. Отступы внутри секции
10:45 Авторский курс по верстке
11:22 Завершение

Рекомендации по теме
Комментарии
Автор

Мне нравится, как вы объясняете. Все понятно, и без лишней "воды".

kostya
Автор

Спасибо за наглядные примеры, обязательно начну применять эти функции 👍

autlady
Автор

Больше подобного! Огромное спасибо, так дышать легче стало, очень классные фишки)

biscvie
Автор

Спасибо за видео, приятные и полезные нововведения.

powered
Автор

Спасибо! Всё кратко и максимально понятно!

gsxnmkj
Автор

Спасибо большое за видео! Очень полезный контент, сразу много медиа запросов просто автоматически снимается при такой записи. Не зря серфила Ютуб))

golovina-wp
Автор

Прикольненько. Еще бы в конце показать доступность на других браузерах, что бы не гуглить.

abuzer-
Автор

Прекрасно, просто прекрасно. Теперь будет легче верстать и медии делать буду меньше. Спасибо.

kosmos_drago
Автор

Мне кажется в примере с wrapper max-width всегда будет 780px и функция min не будет работать, т.к. fallback свойство надо писать сначала, а потом уже новинку.
Разве не так?

flogger
Автор

5 лет ждали. Всё... конец, ха-ха... конец страданиям и мучительной жизни.

mrLumen
Автор

это новые функции появились ? а что по совместимости с разными браузерами?

cglcwxl
Автор

Такой вопрос, вы подставляете в clamp какое-то значение в vw, как понять какое значение следует подставлять ?

oldchicken
Автор

А что за расширение используется?
для показа браузера в соседней вкладке редактора

elztgjl
Автор

Будут проблемы с производительностью если писать сайт полностью на таких функциях?)

jmhtdzg
Автор

а какие пользователи будут так елозить браузер туда-сюда? Плавность эта никому не нужна. Юзер включает устройство с конкретным размером экрана. Для этого есть брейк-поинты. Согласен, что так верстать может быть чутка удобнее. Но плавное изменение размеров экрана - крайне редко используется в жизни.

olegonkos