Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 8 тыс.
50% 1

CSS функции min, max и clamp могут быть использованы везде где указываются числовые значения в CSS. Это размеры, отступы, радиус, позиционирование. Данные функции имеют хорошую поддержку: min и max по 98%, clamp - 95% по Can I Use. В этом видео рассмотрим как пользоваться данными функциями и будут показаны наглядные примеры их использования в HTML верстке сайтов. В видео использованы примеры из статьи ishadeed.com/article/css-min-...
Ролик про clamp в font-size: • CSS функция clamp(). А...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
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 Завершение
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

Опубликовано:

 

27 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 28   
@kostya1306
@kostya1306 4 месяца назад
Мне нравится, как вы объясняете. Все понятно, и без лишней "воды".
@rikenbaker1
@rikenbaker1 8 дней назад
Дикокрутая штука. Спасибо! 😮
@autlady
@autlady 6 месяцев назад
Спасибо за наглядные примеры, обязательно начну применять эти функции 👍
@golovina-wp
@golovina-wp 3 месяца назад
Спасибо большое за видео! Очень полезный контент, сразу много медиа запросов просто автоматически снимается при такой записи. Не зря серфила Ютуб))
@powered8473
@powered8473 6 месяцев назад
Спасибо за видео, приятные и полезные нововведения.
@user-gs7xn9mk7j
@user-gs7xn9mk7j 6 месяцев назад
Спасибо! Всё кратко и максимально понятно!
@biscvie
@biscvie 6 месяцев назад
Больше подобного! Огромное спасибо, так дышать легче стало, очень классные фишки)
@chemicalangel5227
@chemicalangel5227 5 месяцев назад
Как же здорово ты объясняешь!
@user-it3yo1sn6i
@user-it3yo1sn6i 6 месяцев назад
Материал 🔥! Спасибо, было интересно
@Shade063
@Shade063 6 месяцев назад
Спасибо, будем пользовать 😊
@Anatoli-bq1pe
@Anatoli-bq1pe 4 месяца назад
Благодарю за классное видео
@user-abuzer-
@user-abuzer- 6 месяцев назад
Прикольненько. Еще бы в конце показать доступность на других браузерах, что бы не гуглить.
@markeellaas
@markeellaas 6 месяцев назад
Спасибо за видео
@kosmos_drago7989
@kosmos_drago7989 6 месяцев назад
Прекрасно, просто прекрасно. Теперь будет легче верстать и медии делать буду меньше. Спасибо.
@user-pw9zk4hn1q
@user-pw9zk4hn1q 3 месяца назад
А как же VW VMAX высчитывается ?
@mrLumen2
@mrLumen2 6 месяцев назад
5 лет ждали. Всё... конец, ха-ха... конец страданиям и мучительной жизни.
@user-cg2lc2wx4l
@user-cg2lc2wx4l 6 месяцев назад
это новые функции появились ? а что по совместимости с разными браузерами?
@WebCademy
@WebCademy 6 месяцев назад
min и max по 98%, clamp - 95% по Can I Use. Можно смело использовать.
@user-el2zt1gj5l
@user-el2zt1gj5l 6 месяцев назад
А что за расширение используется? для показа браузера в соседней вкладке редактора
@WebCademy
@WebCademy 6 месяцев назад
Live Preview
@user-el2zt1gj5l
@user-el2zt1gj5l 6 месяцев назад
@@WebCademy спасибо)
@oldchicken3633
@oldchicken3633 6 месяцев назад
Такой вопрос, вы подставляете в clamp какое-то значение в vw , как понять какое значение следует подставлять ?
@WebCademy
@WebCademy 6 месяцев назад
Расчитать его можно самостоятельно или с помощью сервиса. Подробнее про это рассказываю в отдельном ролике про clamp функцию ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eEy3846ZHdw.html Сервис для расчета: min-max-calculator.9elements.com/
@user-jm4ht5dz8g
@user-jm4ht5dz8g 6 месяцев назад
Будут проблемы с производительностью если писать сайт полностью на таких функциях?)
@WebCademy
@WebCademy 6 месяцев назад
Нет
@olegonkos
@olegonkos 3 месяца назад
а какие пользователи будут так елозить браузер туда-сюда? Плавность эта никому не нужна. Юзер включает устройство с конкретным размером экрана. Для этого есть брейк-поинты. Согласен, что так верстать может быть чутка удобнее. Но плавное изменение размеров экрана - крайне редко используется в жизни.
@WebCademy
@WebCademy 3 месяца назад
Суть в другом. Можно задать два значения: большее и меньшее, и размер будет меняться от большего экрана к меньшему. Демонстрация с изменением размера экрана в видео уроке сделана чтобы наглядно продемонстрировать работу ф-ии clamp(), а не потому что так смотрят пользователи.
@olegonkos
@olegonkos 3 месяца назад
@@WebCademy я примерно уловил суть. Спасибо
Далее
min(), max(), and clamp() are CSS magic!
18:12
Просмотров 288 тыс.
CSS Функции calc(), min(), max(), clamp()
10:06
Просмотров 3,7 тыс.
Introduction to Viewport Units
5:10
Просмотров 62 тыс.