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
🔗 Ссылки: 🎉🎉🎉 Мой новый курс по HTML и CSS: purpleschool.ru/course/html-css - 19 часов видео - 19 упражнений - 15 тестов - Неограниченный доступ и гарантия возврата средств 🎓 Мои курсы по разработке: purpleschool.ru 👨💻 Клуб разработчиков: purpleschool.ru/club 💬 Telegram канал с полезными советами: t.me/purple_code_channel
За mix-blend-mod отдельное спасибо. Вот прям совсем не знал что есть такое нативное решение👏👏👏
@PurpleSchool
11 ай бұрын
Пожалуйста!
@PHP_Architect
8 ай бұрын
лет 10 назад помню была такая хотелка клиента... выкрутились двумя фикс. елементами разноцветного текста. на один из них в его родительском елементе цепляли css свойство overflov:hidden... Танцы с бумном
aspect-ratio и scroll-snap просто БОМБА! Спсибо за видео!
@PurpleSchool
Ай бұрын
Спасибо!
Прикольная подача, все ясно и понятно, дикция хорошая, лайк!
@PurpleSchool
11 ай бұрын
Спасибо!
Полезное видео. Взял пару свойств в свой проект. Благодарствую 👍
@PurpleSchool
5 ай бұрын
Пожалуйста!
3:48 вот это я понимаю, реально полезное свойство, тоже надо бы запомнить и использовать в таких местах
@PurpleSchool
11 ай бұрын
👍
Большое спасибо за выпуск!
@PurpleSchool
11 ай бұрын
Пожалуйста!
про микс не знал, спасибо)
@PurpleSchool
10 ай бұрын
👍
Действительно полезные свойства! Спасибо.
@PurpleSchool
11 ай бұрын
Спасибо!
Большое спасибо! Очень интересно.
@PurpleSchool
11 ай бұрын
Пожалуйста!
От души в душу!
@PurpleSchool
11 ай бұрын
Welcome
Спасибо, очень полезно!)
@PurpleSchool
11 ай бұрын
Спасибо!
Шикарно!! Спасибо!
@PurpleSchool
11 ай бұрын
Пожалуйста 👍
Спасибо, полезно!
@PurpleSchool
11 ай бұрын
Пожалуйста!)
Спасибо, очень полезно!
@PurpleSchool
11 ай бұрын
Пожалуйста!
Антон спасибо! твои курсы по nextJS и nodeJS супер! по фронту классные видео на канале тоже, продолжай в том же духе!))
@PurpleSchool
11 ай бұрын
Спасибо!
Класс, спасибо 👍
@PurpleSchool
7 ай бұрын
Пожалуйста!
Спасибо! Лайк. Подписка.
@PurpleSchool
4 ай бұрын
Спасибо!
Здравствуйте. А свойство где карточка перворачивается. ей можно задать картинку или другой текст сзади получается.?
Супер! Прям таки уроки магии))) Очень понравился выпуск!
@PurpleSchool
11 ай бұрын
Спасибо!
как же это круто!
@PurpleSchool
11 ай бұрын
Спасибо!
Спасибо, только про aspect-ratio и transform знал , про остальные не слышал. Думаю aspect-ratio самый важный среди них, так как полезно на любом сайте
@PurpleSchool
11 ай бұрын
Спасибо!
aspect-ratio подчеркнул для себя . Взамен лайфхака с padding-bottom
@PurpleSchool
11 ай бұрын
👍
Thanks a lot)
@PurpleSchool
11 ай бұрын
Welcome)
Супер ❤
@PurpleSchool
11 ай бұрын
Пожалуйста!
Ты крут! 👍👍👍🙌
@PurpleSchool
9 ай бұрын
Спасибо!
Сразуьувидя твой первый short видео, подписался и зашёл на канал, и нашёл нужное видео! Я даже нашёл курсы по HTML/CSS жалко что они платные... А так канал чёткий(я никогда не нажимал на кнопку подписаться сразу
@PurpleSchool
11 ай бұрын
Спасибо! Да, он платный, но цена всего 2190
@hajime3547
11 ай бұрын
@@PurpleSchool у меня карточки нет..., а так я не спорю что он сильно переоцинён😜, красава
@hajime3547
11 ай бұрын
Можно спросить:" можно ли создать сайт с помощью HTML, CSS, и python(вместо JavaScript?)
@PurpleSchool
11 ай бұрын
Для Frontend все равно JS. Да есть WASM, но это экзотика
супер, отличный видео урок, mix-blend-mode интересно для иконки над картинкой будет работать? ну например svg иконка белого цвета, со стрелочками вправо и влево, и вот если стрелочки белые, а картинка тоже белая, их не видно (стрелочки), или это только для текста?
@PurpleSchool
11 ай бұрын
Да, это смешивание слоёв и работает для чего угодно
@andreyrudin2286
11 ай бұрын
@@PurpleSchool енто просто волшебство какое то :) спасибо большое!
@it_doc2319
11 ай бұрын
Вот с SVG нужно повременить. Какие-то свойства параметры свойства поддерживаются, а какие-то нет. Это я сейчас о Safari
По вертикали текст удобней писать через writing-mode: vertical-lr; Transform: rotate(90deg) Так однострочный текст позиционировать удобней для разных строк разной длины. Например слова из 5 и 10 букв.
@PurpleSchool
7 ай бұрын
👍
Scroll-behaviour smooth не будет работать в хроме, так как там по умолчанию выключен плавный скролл, включается он через настройки, но только пользователь вашего приложения в настройки браузера заходить не станет
@PurpleSchool
11 ай бұрын
Так я же на chrome данную демку показываю
Aspect-ratio : 16 / 9
@PurpleSchool
11 ай бұрын
👍
каждый подобный видос когда смотрел была либо банальщина либо вообще какие-то бесполезные вещи но этот видос очень хороший aspect-ratio это просто мечта
@PurpleSchool
11 ай бұрын
Спасибо большое!
@user-pi1vr6rf1k
11 ай бұрын
Очень полезное свойство!
@PurpleSchool
11 ай бұрын
👍
Привет Антон, почему оценка у курса по реакту так занижен ?(4.5)
@PurpleSchool
11 ай бұрын
На какой платформе? Если на Udemy, то из-за необходимости из Украины использовать VPN для доступа к API.
@Edgar-pu1lc
11 ай бұрын
@@PurpleSchool понятно, а новичка стоит брать этот курс ?
@PurpleSchool
11 ай бұрын
Нужны знания JS и TS. Если они есть, то вполне, если нет, то у меня есть курсы как по JS, так и по TS
А почему у вас скролл классненький, кругленький и без стрелок, а у меня квадратный, как на ХР?
плавный скролл не работает при минимальных графических настройках операционной системы.
@PurpleSchool
11 ай бұрын
Это верно, например когда включено уменьшение движения и это регулируется браузером.
Million js заменит react 🍐? (почему то не вижу свой коммент после отправки, сори за спам)
@PurpleSchool
11 ай бұрын
Детально пока в него не погружался, но возможно выделю время и сделаю видео.
@pryanik150
11 ай бұрын
@@PurpleSchool у них просто сайт красивый. К тому же в ваших цветах
Ого как скаканул css
@PurpleSchool
11 ай бұрын
Да, возможностей стало много больше)
Новый @scope упростит мою вёрстку (нет)
@PurpleSchool
11 ай бұрын
Пока поддержка не очень браузерами, да и для css modules не очень актуально)
@pryanik150
11 ай бұрын
@@PurpleSchool на реакте это где-то в Питерах пишут может ещё в других областях. Нам на Vue с нативным приятным css по-кайфу, когда поддержка появится во всех браузерах
@PurpleSchool
11 ай бұрын
Это будет хорошо, да
Шикарный профессионал, качественно все рассказывает, объясняет. Но английский, произношение просто сильно отвлекает. Приготовился насладится интересной информацией и сразу CSS - цсс (перепонки напряглись), вспомнились слова данного автора heigth - хейт, true - тру. Сам уже пугаешься, что английский забыл, а нет смотришь транскрипцию и понимаешь, что рассказчик пытается придумать свой необычный диалект английского. Пытаюсь вернуться к сути рассказываемой темы, но тут опят по ушам hover сначала правильно хавер, а потом не не не ховер (ближе к британскому произношению). И в конце снова мой любимый хейт (ставим уровень ненависти к цсс) 50%. Конечно большое спасибо автору за его работу, но хотя бы хейт давайте в хайт. :)
@PurpleSchool
11 ай бұрын
Да, буду избавляться от данной привычки)
@CJIu3eHb
11 ай бұрын
@@PurpleSchool А ведь есть еще и вайдт (width) и хайден (hidden)... :))) Ну это я и сам борюсь с переменным успехом. А вот насчет ховера претензии не принимаются. В союзе учили больше британскому.
@pryanik150
11 ай бұрын
Наоборот отлично что автор правильно произносит слова. А не как некоторые выдавливают из себя напускной британский акцент в каждом слове. Примерно как женщина администратор магазины одежды из мема. (Ролик :"Русский язык - великий и ужасный" на KZread) Аж тошно слушать.
@sergeystarostin179
11 ай бұрын
@@CJIu3eHb Северо-Американские английский под миллиарда, британский английский около 70 миллионов. И если понимать как формировался британский акцент, то станет понятно, что учить британское произношение просто глупо, вы просто будите эмитировать нарушение дикции, как у очередного наследника британской короны (за которым стала повторять вся элита и затем простой люд). Именно Северо-Американские английский это классический английский. Но если вам нравится британский акцент, то тогда нужно всё произносить соответственно по британски. Но в целом это больше шутка при такой концентрации полезной информации в видео автора. Просто настолько грамотно, по сути, человек излагает, что непроизвольно начинаешь сомневаться в своих знаниях английского, а может всё таки хЕйт :)).
@sergeystarostin179
11 ай бұрын
@@pryanik150 Всё убедили, то же буду говорить хЕйт :). Приношу свои извинения автору.
На кого это рассчитано интересно, на тех кто открыть гугл со спекой не может?
@PurpleSchool
11 ай бұрын
Чтобы открыть спеку надо знать, какие свойства искать.
@chikenmacnugget
11 ай бұрын
@@PurpleSchool чтобы открыть спеку надо открыть спеку. А для того, чтобы знать какие свойства искать надо научиться пользоваться спекой, а для начала гуглом