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

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

    🔗 Ссылки: 🎉🎉🎉 Мой новый курс по HTML и CSS: purpleschool.ru/course/html-css - 19 часов видео - 19 упражнений - 15 тестов - Неограниченный доступ и гарантия возврата средств 🎓 Мои курсы по разработке: purpleschool.ru 👨‍💻 Клуб разработчиков: purpleschool.ru/club 💬 Telegram канал с полезными советами: t.me/purple_code_channel

  • @bless_meparde4913
    @bless_meparde491311 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста!

  • @PHP_Architect

    @PHP_Architect

    8 ай бұрын

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

  • @JesseJames-mh5kb
    @JesseJames-mh5kbАй бұрын

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

  • @PurpleSchool

    @PurpleSchool

    Ай бұрын

    Спасибо!

  • @smotritelyoutube
    @smotritelyoutube11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @alfed6989
    @alfed69895 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    5 ай бұрын

    Пожалуйста!

  • @awenn2015
    @awenn201511 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    👍

  • @demidovmaxim1008
    @demidovmaxim100811 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста!

  • @Katar1x
    @Katar1x10 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    10 ай бұрын

    👍

  • @piskaorangutanga
    @piskaorangutanga11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @andrey-z5z
    @andrey-z5z11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста!

  • @engelknight2059
    @engelknight205911 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Welcome

  • @SerhiiNesterov
    @SerhiiNesterov11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @user-ki8ij8xi9c
    @user-ki8ij8xi9c11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста 👍

  • @_oxios_
    @_oxios_11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @user-yt7np9fc6p
    @user-yt7np9fc6p11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста!

  • @user-vm2db5cq1g
    @user-vm2db5cq1g11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @arahnid_9844
    @arahnid_98447 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    7 ай бұрын

    Пожалуйста!

  • @YaroslavlCity
    @YaroslavlCity4 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    4 ай бұрын

    Спасибо!

  • @user-df8vq4kd5j
    @user-df8vq4kd5j2 ай бұрын

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

  • @asg5511
    @asg551111 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @Alex-bs2bk
    @Alex-bs2bk11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @user-zi4gy8nk6d
    @user-zi4gy8nk6d11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Спасибо!

  • @user-pi1vr6rf1k
    @user-pi1vr6rf1k11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    👍

  • @natanrock4358
    @natanrock435811 ай бұрын

    Thanks a lot)

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Welcome)

  • @icegouse
    @icegouse11 ай бұрын

    Супер ❤

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    Пожалуйста!

  • @yesdoit9914
    @yesdoit99149 ай бұрын

    Ты крут! 👍👍👍🙌

  • @PurpleSchool

    @PurpleSchool

    9 ай бұрын

    Спасибо!

  • @hajime3547
    @hajime354711 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @hajime3547

    @hajime3547

    11 ай бұрын

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

  • @hajime3547

    @hajime3547

    11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @andreyrudin2286
    @andreyrudin228611 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @andreyrudin2286

    @andreyrudin2286

    11 ай бұрын

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

  • @it_doc2319

    @it_doc2319

    11 ай бұрын

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

  • @leem0ne
    @leem0ne7 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    7 ай бұрын

    👍

  • @happy_cutman
    @happy_cutman11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @agilkerimov
    @agilkerimov11 ай бұрын

    Aspect-ratio : 16 / 9

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    👍

  • @user-dw8lb8lc7u
    @user-dw8lb8lc7u11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @user-pi1vr6rf1k

    @user-pi1vr6rf1k

    11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

    👍

  • @Edgar-pu1lc
    @Edgar-pu1lc11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @Edgar-pu1lc

    @Edgar-pu1lc

    11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @Dik131WZD
    @Dik131WZD3 ай бұрын

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

  • @yuritian8830
    @yuritian883011 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @pryanik150
    @pryanik15011 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @pryanik150

    @pryanik150

    11 ай бұрын

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

  • @pep421
    @pep42111 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @pryanik150
    @pryanik15011 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @pryanik150

    @pryanik150

    11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @sergeystarostin179
    @sergeystarostin17911 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @CJIu3eHb

    @CJIu3eHb

    11 ай бұрын

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

  • @pryanik150

    @pryanik150

    11 ай бұрын

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

  • @sergeystarostin179

    @sergeystarostin179

    11 ай бұрын

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

  • @sergeystarostin179

    @sergeystarostin179

    11 ай бұрын

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

  • @chikenmacnugget
    @chikenmacnugget11 ай бұрын

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

  • @PurpleSchool

    @PurpleSchool

    11 ай бұрын

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

  • @chikenmacnugget

    @chikenmacnugget

    11 ай бұрын

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

Келесі