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