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

Рет қаралды 22,450

Күн бұрын

Сегодня посмотрим на несколько полезных свойств и возможностей 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 - Заключение

Пікірлер: 97

@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 10 ай бұрын

За mix-blend-mod отдельное спасибо. Вот прям совсем не знал что есть такое нативное решение👏👏👏

@PurpleSchool 10 ай бұрын

Пожалуйста!

@PHP_Architect 7 ай бұрын

лет 10 назад помню была такая хотелка клиента... выкрутились двумя фикс. елементами разноцветного текста. на один из них в его родительском елементе цепляли css свойство overflov:hidden... Танцы с бумном

@JesseJames-mh5kb 6 күн бұрын

aspect-ratio и scroll-snap просто БОМБА! Спсибо за видео!

@PurpleSchool 6 күн бұрын

Спасибо!

@smotritelyoutube 10 ай бұрын

Прикольная подача, все ясно и понятно, дикция хорошая, лайк!

@PurpleSchool 10 ай бұрын

Спасибо!

@demidovmaxim1008 10 ай бұрын

Большое спасибо за выпуск!

@PurpleSchool 10 ай бұрын

Пожалуйста!

@alfed6989 4 ай бұрын

Полезное видео. Взял пару свойств в свой проект. Благодарствую 👍

@PurpleSchool 4 ай бұрын

Пожалуйста!

@user-ki8ij8xi9c 10 ай бұрын

Шикарно!! Спасибо!

@PurpleSchool 10 ай бұрын

Пожалуйста 👍

@SerhiiNesterov 10 ай бұрын

Спасибо, очень полезно!)

@PurpleSchool 10 ай бұрын

Спасибо!

@engelknight2059 10 ай бұрын

От души в душу!

@PurpleSchool 10 ай бұрын

Welcome

@_oxios_ 10 ай бұрын

Спасибо, полезно!

@PurpleSchool 10 ай бұрын

Пожалуйста!)

@andrey-z5z 10 ай бұрын

Большое спасибо! Очень интересно.

@PurpleSchool 10 ай бұрын

Пожалуйста!

@agilexuee 10 ай бұрын

Действительно полезные свойства! Спасибо.

@PurpleSchool 10 ай бұрын

Спасибо!

@icegouse 10 ай бұрын

Супер ❤

@PurpleSchool 10 ай бұрын

Пожалуйста!

@arahnid_9844 6 ай бұрын

Класс, спасибо 👍

@PurpleSchool 6 ай бұрын

Пожалуйста!

@user-yt7np9fc6p 10 ай бұрын

Спасибо, очень полезно!

@PurpleSchool 10 ай бұрын

Пожалуйста!

@yesdoit9914 8 ай бұрын

Ты крут! 👍👍👍🙌

@PurpleSchool 8 ай бұрын

Спасибо!

@awenn2015 10 ай бұрын

3:48 вот это я понимаю, реально полезное свойство, тоже надо бы запомнить и использовать в таких местах

@PurpleSchool 10 ай бұрын

👍

@Alex-bs2bk 10 ай бұрын

как же это круто!

@PurpleSchool 10 ай бұрын

Спасибо!

@user-vm2db5cq1g 10 ай бұрын

Антон спасибо! твои курсы по nextJS и nodeJS супер! по фронту классные видео на канале тоже, продолжай в том же духе!))

@PurpleSchool 10 ай бұрын

Спасибо!

@natanrock4358 10 ай бұрын

Thanks a lot)

@PurpleSchool 10 ай бұрын

Welcome)

@YaroslavlCity 3 ай бұрын

Спасибо! Лайк. Подписка.

@PurpleSchool 3 ай бұрын

Спасибо!

@asg5511 10 ай бұрын

Супер! Прям таки уроки магии))) Очень понравился выпуск!

@PurpleSchool 10 ай бұрын

Спасибо!

@Katar1x 9 ай бұрын

про микс не знал, спасибо)

@PurpleSchool 9 ай бұрын

👍

@user-pi1vr6rf1k 10 ай бұрын

aspect-ratio подчеркнул для себя . Взамен лайфхака с padding-bottom

@PurpleSchool 10 ай бұрын

👍

@user-zi4gy8nk6d 10 ай бұрын

Спасибо, только про aspect-ratio и transform знал , про остальные не слышал. Думаю aspect-ratio самый важный среди них, так как полезно на любом сайте

@PurpleSchool 10 ай бұрын

Спасибо!

@hajime3547 10 ай бұрын

Сразуьувидя твой первый short видео, подписался и зашёл на канал, и нашёл нужное видео! Я даже нашёл курсы по HTML/CSS жалко что они платные... А так канал чёткий(я никогда не нажимал на кнопку подписаться сразу

@PurpleSchool 10 ай бұрын

Спасибо! Да, он платный, но цена всего 2190

@hajime3547 10 ай бұрын

@@PurpleSchool у меня карточки нет..., а так я не спорю что он сильно переоцинён😜, красава

@hajime3547 10 ай бұрын

Можно спросить:" можно ли создать сайт с помощью HTML, CSS, и python(вместо JavaScript?)

@PurpleSchool 10 ай бұрын

Для Frontend все равно JS. Да есть WASM, но это экзотика

@leem0ne 6 ай бұрын

По вертикали текст удобней писать через writing-mode: vertical-lr; Transform: rotate(90deg) Так однострочный текст позиционировать удобней для разных строк разной длины. Например слова из 5 и 10 букв.

@PurpleSchool 6 ай бұрын

👍

@user-df8vq4kd5j Ай бұрын

Здравствуйте. А свойство где карточка перворачивается. ей можно задать картинку или другой текст сзади получается.?

@andreyrudin2286 10 ай бұрын

супер, отличный видео урок, mix-blend-mode интересно для иконки над картинкой будет работать? ну например svg иконка белого цвета, со стрелочками вправо и влево, и вот если стрелочки белые, а картинка тоже белая, их не видно (стрелочки), или это только для текста?

@PurpleSchool 10 ай бұрын

Да, это смешивание слоёв и работает для чего угодно

@andreyrudin2286 10 ай бұрын

@@PurpleSchool енто просто волшебство какое то :) спасибо большое!

@it_doc2319 10 ай бұрын

Вот с SVG нужно повременить. Какие-то свойства параметры свойства поддерживаются, а какие-то нет. Это я сейчас о Safari

@user-dw8lb8lc7u 10 ай бұрын

каждый подобный видос когда смотрел была либо банальщина либо вообще какие-то бесполезные вещи но этот видос очень хороший aspect-ratio это просто мечта

@PurpleSchool 10 ай бұрын

Спасибо большое!

@user-pi1vr6rf1k 10 ай бұрын

Очень полезное свойство!

@PurpleSchool 10 ай бұрын

👍

@happy_cutman 10 ай бұрын

Scroll-behaviour smooth не будет работать в хроме, так как там по умолчанию выключен плавный скролл, включается он через настройки, но только пользователь вашего приложения в настройки браузера заходить не станет

@PurpleSchool 10 ай бұрын

Так я же на chrome данную демку показываю

@Edgar-pu1lc 10 ай бұрын

Привет Антон, почему оценка у курса по реакту так занижен ?(4.5)

@PurpleSchool 10 ай бұрын

На какой платформе? Если на Udemy, то из-за необходимости из Украины использовать VPN для доступа к API.

@Edgar-pu1lc 10 ай бұрын

@@PurpleSchool понятно, а новичка стоит брать этот курс ?

@PurpleSchool 10 ай бұрын

Нужны знания JS и TS. Если они есть, то вполне, если нет, то у меня есть курсы как по JS, так и по TS

@agilkerimov 10 ай бұрын

Aspect-ratio : 16 / 9

@PurpleSchool 10 ай бұрын

👍

@Dik131WZD 2 ай бұрын

А почему у вас скролл классненький, кругленький и без стрелок, а у меня квадратный, как на ХР?

@yuritian8830 10 ай бұрын

плавный скролл не работает при минимальных графических настройках операционной системы.

@PurpleSchool 10 ай бұрын

Это верно, например когда включено уменьшение движения и это регулируется браузером.

@pryanik150 10 ай бұрын

Million js заменит react 🍐? (почему то не вижу свой коммент после отправки, сори за спам)

@PurpleSchool 10 ай бұрын

Детально пока в него не погружался, но возможно выделю время и сделаю видео.

@pryanik150 10 ай бұрын

@@PurpleSchool у них просто сайт красивый. К тому же в ваших цветах

@pryanik150 10 ай бұрын

Новый @scope упростит мою вёрстку (нет)

@PurpleSchool 10 ай бұрын

Пока поддержка не очень браузерами, да и для css modules не очень актуально)

@pryanik150 10 ай бұрын

@@PurpleSchool на реакте это где-то в Питерах пишут может ещё в других областях. Нам на Vue с нативным приятным css по-кайфу, когда поддержка появится во всех браузерах

@PurpleSchool 10 ай бұрын

Это будет хорошо, да

@pep421 10 ай бұрын

Ого как скаканул css

@PurpleSchool 10 ай бұрын

Да, возможностей стало много больше)

@sergeystarostin179 10 ай бұрын

Шикарный профессионал, качественно все рассказывает, объясняет. Но английский, произношение просто сильно отвлекает. Приготовился насладится интересной информацией и сразу CSS - цсс (перепонки напряглись), вспомнились слова данного автора heigth - хейт, true - тру. Сам уже пугаешься, что английский забыл, а нет смотришь транскрипцию и понимаешь, что рассказчик пытается придумать свой необычный диалект английского. Пытаюсь вернуться к сути рассказываемой темы, но тут опят по ушам hover сначала правильно хавер, а потом не не не ховер (ближе к британскому произношению). И в конце снова мой любимый хейт (ставим уровень ненависти к цсс) 50%. Конечно большое спасибо автору за его работу, но хотя бы хейт давайте в хайт. :)

@PurpleSchool 10 ай бұрын

Да, буду избавляться от данной привычки)

@CJIu3eHb 10 ай бұрын

@@PurpleSchool А ведь есть еще и вайдт (width) и хайден (hidden)... :))) Ну это я и сам борюсь с переменным успехом. А вот насчет ховера претензии не принимаются. В союзе учили больше британскому.

@pryanik150 10 ай бұрын

Наоборот отлично что автор правильно произносит слова. А не как некоторые выдавливают из себя напускной британский акцент в каждом слове. Примерно как женщина администратор магазины одежды из мема. (Ролик :"Русский язык - великий и ужасный" на KZfaq) Аж тошно слушать.

@sergeystarostin179 10 ай бұрын

@@CJIu3eHb Северо-Американские английский под миллиарда, британский английский около 70 миллионов. И если понимать как формировался британский акцент, то станет понятно, что учить британское произношение просто глупо, вы просто будите эмитировать нарушение дикции, как у очередного наследника британской короны (за которым стала повторять вся элита и затем простой люд). Именно Северо-Американские английский это классический английский. Но если вам нравится британский акцент, то тогда нужно всё произносить соответственно по британски. Но в целом это больше шутка при такой концентрации полезной информации в видео автора. Просто настолько грамотно, по сути, человек излагает, что непроизвольно начинаешь сомневаться в своих знаниях английского, а может всё таки хЕйт :)).

@sergeystarostin179 10 ай бұрын

@@pryanik150 Всё убедили, то же буду говорить хЕйт :). Приношу свои извинения автору.

@chikenmacnugget 10 ай бұрын

На кого это рассчитано интересно, на тех кто открыть гугл со спекой не может?

@PurpleSchool 10 ай бұрын

Чтобы открыть спеку надо знать, какие свойства искать.

@chikenmacnugget 10 ай бұрын

@@PurpleSchool чтобы открыть спеку надо открыть спеку. А для того, чтобы знать какие свойства искать надо научиться пользоваться спекой, а для начала гуглом