Тёмный

6 полезных свойств CSS за 10 минут! 

PurpleSchool | Anton Larichev
Подписаться 39 тыс.
Просмотров 22 тыс.
50% 1

Сегодня посмотрим на несколько полезных свойств и возможностей CSS, которые вам могут пригодиться в ежедневной вёрстке.
🔗 Ссылки:
🎉🎉🎉 Мой новый курс по HTML и CSS: purpleschool.ru/course/html-css
- 19 часов видео
- 19 упражнений
- 15 тестов
- Неограниченный доступ и гарантия возврата средств
🎓 Мои курсы по разработке: purpleschool.ru
👨‍💻 Клуб разработчиков: purpleschool.ru/club
💬 Telegram канал с полезными советами: t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:21 - Resize
1:32 - Scroll-snap
4:18 - Scroll-smooth
5:57 - Переворот текста (transform scale)
7:04 - Смешивание цветов (mix-blend-mode)
8:25 - Aspect-ratio
10:03 - Заключение

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

 

28 апр 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 97   
@PurpleSchool
@PurpleSchool 10 месяцев назад
🔗 Ссылки: 🎉🎉🎉 Мой новый курс по HTML и CSS: purpleschool.ru/course/html-css - 19 часов видео - 19 упражнений - 15 тестов - Неограниченный доступ и гарантия возврата средств 🎓 Мои курсы по разработке: purpleschool.ru 👨‍💻 Клуб разработчиков: purpleschool.ru/club 💬 Telegram канал с полезными советами: t.me/purple_code_channel
@bless_meparde4913
@bless_meparde4913 10 месяцев назад
За mix-blend-mod отдельное спасибо. Вот прям совсем не знал что есть такое нативное решение👏👏👏
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!
@PHP_Architect
@PHP_Architect 7 месяцев назад
лет 10 назад помню была такая хотелка клиента... выкрутились двумя фикс. елементами разноцветного текста. на один из них в его родительском елементе цепляли css свойство overflov:hidden... Танцы с бумном
@JesseJames-mh5kb
@JesseJames-mh5kb 3 дня назад
aspect-ratio и scroll-snap просто БОМБА! Спсибо за видео!
@PurpleSchool
@PurpleSchool 3 дня назад
Спасибо!
@smotritelyoutube
@smotritelyoutube 10 месяцев назад
Прикольная подача, все ясно и понятно, дикция хорошая, лайк!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@alfed6989
@alfed6989 4 месяца назад
Полезное видео. Взял пару свойств в свой проект. Благодарствую 👍
@PurpleSchool
@PurpleSchool 4 месяца назад
Пожалуйста!
@demidovmaxim1008
@demidovmaxim1008 10 месяцев назад
Большое спасибо за выпуск!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!
@engelknight2059
@engelknight2059 10 месяцев назад
От души в душу!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Welcome
@awenn2015
@awenn2015 10 месяцев назад
3:48 вот это я понимаю, реально полезное свойство, тоже надо бы запомнить и использовать в таких местах
@PurpleSchool
@PurpleSchool 10 месяцев назад
👍
@user-ki8ij8xi9c
@user-ki8ij8xi9c 10 месяцев назад
Шикарно!! Спасибо!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста 👍
@agilexuee
@agilexuee 10 месяцев назад
Действительно полезные свойства! Спасибо.
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@SerhiiNesterov
@SerhiiNesterov 10 месяцев назад
Спасибо, очень полезно!)
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@andrey-z5z
@andrey-z5z 10 месяцев назад
Большое спасибо! Очень интересно.
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!
@_oxios_
@_oxios_ 10 месяцев назад
Спасибо, полезно!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!)
@user-vm2db5cq1g
@user-vm2db5cq1g 10 месяцев назад
Антон спасибо! твои курсы по nextJS и nodeJS супер! по фронту классные видео на канале тоже, продолжай в том же духе!))
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@arahnid_9844
@arahnid_9844 6 месяцев назад
Класс, спасибо 👍
@PurpleSchool
@PurpleSchool 6 месяцев назад
Пожалуйста!
@yesdoit9914
@yesdoit9914 8 месяцев назад
Ты крут! 👍👍👍🙌
@PurpleSchool
@PurpleSchool 8 месяцев назад
Спасибо!
@user-yt7np9fc6p
@user-yt7np9fc6p 10 месяцев назад
Спасибо, очень полезно!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!
@icegouse
@icegouse 10 месяцев назад
Супер ❤
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пожалуйста!
@Alex-bs2bk
@Alex-bs2bk 10 месяцев назад
как же это круто!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@asg5511
@asg5511 10 месяцев назад
Супер! Прям таки уроки магии))) Очень понравился выпуск!
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@YaroslavlCity
@YaroslavlCity 3 месяца назад
Спасибо! Лайк. Подписка.
@PurpleSchool
@PurpleSchool 3 месяца назад
Спасибо!
@Katar1x
@Katar1x 9 месяцев назад
про микс не знал, спасибо)
@PurpleSchool
@PurpleSchool 9 месяцев назад
👍
@natanrock4358
@natanrock4358 10 месяцев назад
Thanks a lot)
@PurpleSchool
@PurpleSchool 10 месяцев назад
Welcome)
@user-zi4gy8nk6d
@user-zi4gy8nk6d 10 месяцев назад
Спасибо, только про aspect-ratio и transform знал , про остальные не слышал. Думаю aspect-ratio самый важный среди них, так как полезно на любом сайте
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо!
@user-pi1vr6rf1k
@user-pi1vr6rf1k 10 месяцев назад
aspect-ratio подчеркнул для себя . Взамен лайфхака с padding-bottom
@PurpleSchool
@PurpleSchool 10 месяцев назад
👍
@user-df8vq4kd5j
@user-df8vq4kd5j Месяц назад
Здравствуйте. А свойство где карточка перворачивается. ей можно задать картинку или другой текст сзади получается.?
@andreyrudin2286
@andreyrudin2286 10 месяцев назад
супер, отличный видео урок, mix-blend-mode интересно для иконки над картинкой будет работать? ну например svg иконка белого цвета, со стрелочками вправо и влево, и вот если стрелочки белые, а картинка тоже белая, их не видно (стрелочки), или это только для текста?
@PurpleSchool
@PurpleSchool 10 месяцев назад
Да, это смешивание слоёв и работает для чего угодно
@andreyrudin2286
@andreyrudin2286 10 месяцев назад
@@PurpleSchool енто просто волшебство какое то :) спасибо большое!
@it_doc2319
@it_doc2319 10 месяцев назад
Вот с SVG нужно повременить. Какие-то свойства параметры свойства поддерживаются, а какие-то нет. Это я сейчас о Safari
@hajime3547
@hajime3547 10 месяцев назад
Сразуьувидя твой первый short видео, подписался и зашёл на канал, и нашёл нужное видео! Я даже нашёл курсы по HTML/CSS жалко что они платные... А так канал чёткий(я никогда не нажимал на кнопку подписаться сразу
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо! Да, он платный, но цена всего 2190
@hajime3547
@hajime3547 10 месяцев назад
@@PurpleSchool у меня карточки нет..., а так я не спорю что он сильно переоцинён😜, красава
@hajime3547
@hajime3547 10 месяцев назад
Можно спросить:" можно ли создать сайт с помощью HTML, CSS, и python(вместо JavaScript?)
@PurpleSchool
@PurpleSchool 9 месяцев назад
Для Frontend все равно JS. Да есть WASM, но это экзотика
@leem0ne
@leem0ne 6 месяцев назад
По вертикали текст удобней писать через writing-mode: vertical-lr; Transform: rotate(90deg) Так однострочный текст позиционировать удобней для разных строк разной длины. Например слова из 5 и 10 букв.
@PurpleSchool
@PurpleSchool 6 месяцев назад
👍
@user-dw8lb8lc7u
@user-dw8lb8lc7u 10 месяцев назад
каждый подобный видос когда смотрел была либо банальщина либо вообще какие-то бесполезные вещи но этот видос очень хороший aspect-ratio это просто мечта
@PurpleSchool
@PurpleSchool 10 месяцев назад
Спасибо большое!
@user-pi1vr6rf1k
@user-pi1vr6rf1k 10 месяцев назад
Очень полезное свойство!
@PurpleSchool
@PurpleSchool 10 месяцев назад
👍
@happy_cutman
@happy_cutman 10 месяцев назад
Scroll-behaviour smooth не будет работать в хроме, так как там по умолчанию выключен плавный скролл, включается он через настройки, но только пользователь вашего приложения в настройки браузера заходить не станет
@PurpleSchool
@PurpleSchool 10 месяцев назад
Так я же на chrome данную демку показываю
@Edgar-pu1lc
@Edgar-pu1lc 10 месяцев назад
Привет Антон, почему оценка у курса по реакту так занижен ?(4.5)
@PurpleSchool
@PurpleSchool 10 месяцев назад
На какой платформе? Если на Udemy, то из-за необходимости из Украины использовать VPN для доступа к API.
@Edgar-pu1lc
@Edgar-pu1lc 10 месяцев назад
@@PurpleSchool понятно, а новичка стоит брать этот курс ?
@PurpleSchool
@PurpleSchool 10 месяцев назад
Нужны знания JS и TS. Если они есть, то вполне, если нет, то у меня есть курсы как по JS, так и по TS
@agilkerimov
@agilkerimov 10 месяцев назад
Aspect-ratio : 16 / 9
@PurpleSchool
@PurpleSchool 10 месяцев назад
👍
@yuritian8830
@yuritian8830 10 месяцев назад
плавный скролл не работает при минимальных графических настройках операционной системы.
@PurpleSchool
@PurpleSchool 10 месяцев назад
Это верно, например когда включено уменьшение движения и это регулируется браузером.
@Dik131WZD
@Dik131WZD 2 месяца назад
А почему у вас скролл классненький, кругленький и без стрелок, а у меня квадратный, как на ХР?
@pryanik150
@pryanik150 10 месяцев назад
Million js заменит react 🍐? (почему то не вижу свой коммент после отправки, сори за спам)
@PurpleSchool
@PurpleSchool 10 месяцев назад
Детально пока в него не погружался, но возможно выделю время и сделаю видео.
@pryanik150
@pryanik150 10 месяцев назад
@@PurpleSchool у них просто сайт красивый. К тому же в ваших цветах
@pep421
@pep421 10 месяцев назад
Ого как скаканул css
@PurpleSchool
@PurpleSchool 10 месяцев назад
Да, возможностей стало много больше)
@pryanik150
@pryanik150 10 месяцев назад
Новый @scope упростит мою вёрстку (нет)
@PurpleSchool
@PurpleSchool 10 месяцев назад
Пока поддержка не очень браузерами, да и для css modules не очень актуально)
@pryanik150
@pryanik150 10 месяцев назад
@@PurpleSchool на реакте это где-то в Питерах пишут может ещё в других областях. Нам на Vue с нативным приятным css по-кайфу, когда поддержка появится во всех браузерах
@PurpleSchool
@PurpleSchool 10 месяцев назад
Это будет хорошо, да
@sergeystarostin179
@sergeystarostin179 10 месяцев назад
Шикарный профессионал, качественно все рассказывает, объясняет. Но английский, произношение просто сильно отвлекает. Приготовился насладится интересной информацией и сразу CSS - цсс (перепонки напряглись), вспомнились слова данного автора heigth - хейт, true - тру. Сам уже пугаешься, что английский забыл, а нет смотришь транскрипцию и понимаешь, что рассказчик пытается придумать свой необычный диалект английского. Пытаюсь вернуться к сути рассказываемой темы, но тут опят по ушам hover сначала правильно хавер, а потом не не не ховер (ближе к британскому произношению). И в конце снова мой любимый хейт (ставим уровень ненависти к цсс) 50%. Конечно большое спасибо автору за его работу, но хотя бы хейт давайте в хайт. :)
@PurpleSchool
@PurpleSchool 10 месяцев назад
Да, буду избавляться от данной привычки)
@CJIu3eHb
@CJIu3eHb 10 месяцев назад
@@PurpleSchool А ведь есть еще и вайдт (width) и хайден (hidden)... :))) Ну это я и сам борюсь с переменным успехом. А вот насчет ховера претензии не принимаются. В союзе учили больше британскому.
@pryanik150
@pryanik150 10 месяцев назад
Наоборот отлично что автор правильно произносит слова. А не как некоторые выдавливают из себя напускной британский акцент в каждом слове. Примерно как женщина администратор магазины одежды из мема. (Ролик :"Русский язык - великий и ужасный" на RU-vid) Аж тошно слушать.
@sergeystarostin179
@sergeystarostin179 10 месяцев назад
@@CJIu3eHb Северо-Американские английский под миллиарда, британский английский около 70 миллионов. И если понимать как формировался британский акцент, то станет понятно, что учить британское произношение просто глупо, вы просто будите эмитировать нарушение дикции, как у очередного наследника британской короны (за которым стала повторять вся элита и затем простой люд). Именно Северо-Американские английский это классический английский. Но если вам нравится британский акцент, то тогда нужно всё произносить соответственно по британски. Но в целом это больше шутка при такой концентрации полезной информации в видео автора. Просто настолько грамотно, по сути, человек излагает, что непроизвольно начинаешь сомневаться в своих знаниях английского, а может всё таки хЕйт :)).
@sergeystarostin179
@sergeystarostin179 10 месяцев назад
@@pryanik150 Всё убедили, то же буду говорить хЕйт :). Приношу свои извинения автору.
@chikenmacnugget
@chikenmacnugget 10 месяцев назад
На кого это рассчитано интересно, на тех кто открыть гугл со спекой не может?
@PurpleSchool
@PurpleSchool 10 месяцев назад
Чтобы открыть спеку надо знать, какие свойства искать.
@chikenmacnugget
@chikenmacnugget 10 месяцев назад
@@PurpleSchool чтобы открыть спеку надо открыть спеку. А для того, чтобы знать какие свойства искать надо научиться пользоваться спекой, а для начала гуглом
Далее
You didn't know THESE CSS properties!
0:59
Просмотров 243 тыс.
This play call is CRAZY 😱🏈 #shorts
00:19
Просмотров 8 млн
Самый новый HTML!
13:30
Просмотров 94 тыс.
CSS grid repeat minmax задача #css
0:55
Просмотров 43 тыс.
TypeScript Utility тип Omit #typescript
0:55
Просмотров 9 тыс.