Тёмный

CSS полезные свойства: clip-path, perspective, filter, line-clamp 

PurpleSchool | Anton Larichev
Подписаться 40 тыс.
Просмотров 4,9 тыс.
50% 1

Сегодня будем разбираться в полезных свойствах CSS для крутой анимации и вёрстки.
🔗 Ссылки:
🎓 Курс по HTML и CSS purpleschool.ru/course/html-css
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:11 - Что будем разбирать
1:10 - clip-path
4:55 - perspective
7:52 - filter
10:30 - line-clamp
13:46 - Заключение

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

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 27   
@pep421
@pep421 5 месяцев назад
Супер, спасибо за вашу работу.
@PurpleSchool
@PurpleSchool 5 месяцев назад
Пожалуйста
@KaynJS
@KaynJS 6 месяцев назад
Офигенно, спасибо!
@PurpleSchool
@PurpleSchool 6 месяцев назад
Пожалуйста!
@fergussawyer
@fergussawyer 6 месяцев назад
Спасибо за твой труд!
@PurpleSchool
@PurpleSchool 6 месяцев назад
Рад, что вам полезно
@HIghtowerSever
@HIghtowerSever 6 месяцев назад
Спасибо. Круто!
@PurpleSchool
@PurpleSchool 6 месяцев назад
Пожалуйста
@user-dw8lb8lc7u
@user-dw8lb8lc7u 6 месяцев назад
хорошое видео особенно полезен line-clamp
@PurpleSchool
@PurpleSchool 6 месяцев назад
Спасибо
@styxrus
@styxrus 4 месяца назад
Спасибо! line-clamp просто спас. Не нужно задавать фиксированную ширину, как при подходе с white-space: nowrap; text-overflow: ellipsis;
@PurpleSchool
@PurpleSchool 4 месяца назад
Супер)
@lvivduncan
@lvivduncan 6 месяцев назад
9:48 transition
@user-jw4ls8cp3o
@user-jw4ls8cp3o 6 месяцев назад
Нужно было уточнить, что вместо transition автор написал transform
@gorbulevsv
@gorbulevsv 5 месяцев назад
Спасибо за видео, первый и последний возможно мне пригодится, я любитель. Использую бутстрап, знаю, не все его любят, но если начинаю возиться с css, то у меня уходит куча времени на настройку стилей, то одно не нравится, то другое. Так что css использую как дополнение к бутстрап.
@PurpleSchool
@PurpleSchool 5 месяцев назад
Пожалуйста
@MrBenedig
@MrBenedig 6 месяцев назад
Спасибо! clip-path сейчас понадобится
@PurpleSchool
@PurpleSchool 6 месяцев назад
Отлично)
@Gluhonemou
@Gluhonemou 6 месяцев назад
Как при одном hover задать разные стили для разных элементов ? Например я хочу что-бы когда я наводил на карту товара, карта приближалась, а весь фон, позади карты, был в эффекте blur. Этого можно добиться на чистом css? Заранее спасибо за ответ :)
@PurpleSchool
@PurpleSchool 6 месяцев назад
Конечно, для этого можно использовать выбор по условию, если наведён, у меня есть видео про is и where: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TSbSgcATt28.htmlsi=uExLTVLbhfeLeY3A
@artembrovko4901
@artembrovko4901 6 месяцев назад
Добрый день, подскажите пожалуйста будет ли ваш курс по Kubernetes на Udemy?
@PurpleSchool
@PurpleSchool 6 месяцев назад
Пока не планирую. Можно купить на моем сайте оплатив любой картой
@user-mw7fm4ec5p
@user-mw7fm4ec5p Месяц назад
Тема clip-path развернута не до конца. Если коротко, можно создать сколь угодно сложный контур в svg, а потом через clip-path обрезать по нему блоки. Но тут есть три важных условия: 1) svg контур должен находиться в разметке и иметь соответствующий атрибут для обрезки через css. 2) Этот svg элемент должен быть отрендерен (т.е. скрыть через display:none его нельзя) 3) Если вы хотите, чтобы при изменении размера блока, контур подстраивался под его размеры, растягиваясь и сжимаясь - вам нужно использовать относительную систему координат SVG, для этого в интернете конвертеры есть
@PurpleSchool
@PurpleSchool Месяц назад
Спасибо за дополнение
@LeviofanD
@LeviofanD 5 месяцев назад
В фильтр не трансформ а транзишн)
@David-Freeman
@David-Freeman 6 месяцев назад
"сегодня ... я буду работать в VSCode" Браво. Перестали выглядеть умником🙂
@PurpleSchool
@PurpleSchool 6 месяцев назад
Для курсов и видео для новичков я всегда использую VSCode, а для реальной работы Nvim
Далее
Идеальное рабочее место дома
20:21