Тёмный

CSS3 #23 Стилизация плейсхолдера и скролла, CSS-спрайты (Placeholder, Scrollbar & Sprites) 

webDev
Подписаться 117 тыс.
Просмотров 12 тыс.
50% 1

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RU-vid: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

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

 

15 фев 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@weekendshow7567
@weekendshow7567 Год назад
Этот курс CSS - лучшее справочное видео-руководство в RU-vid!!!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Спасибо большое
@Grishka48
@Grishka48 Год назад
Спасибо за курс!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Пожалуйста
@kdvfirehawk
@kdvfirehawk 3 года назад
Молодец, потрясающая работа, буду смотреть все гайды по html, css, js. Все очень понятно и подробно, странно что так мало людей смотрит, пока что лучшие гайды что я видел.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо большое за отзыв
@shinjiwww
@shinjiwww 10 месяцев назад
Очень познаватальный курс\справочник для новчика в css`е. Такого рода подход к открытию спсобностей каскадных стилей очень классный
@YauhenKavalchuk
@YauhenKavalchuk 10 месяцев назад
Спасибо за отзыв
@user-zc9kd2ci4q
@user-zc9kd2ci4q 3 года назад
Спасибо за курс!!! Просмотрел на одном дыхании. Супер!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за отзыв)
@andrewgorun3203
@andrewgorun3203 3 года назад
Спасибо за курс. Информация хорошо структурирована.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@np9733
@np9733 2 года назад
Спасибо за курс! Очень крутая подача, все сжато, без воды, много ценной информации! Про вес селекторов, потоки, схлопывание margin и другие важные вещи узнала впервые, хотя прошла уже другие, "очные" курсы.
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Спасибо за отзыв )
@user-rw1ix3oo4c
@user-rw1ix3oo4c 2 года назад
вроде много знаю о css и html, но у тебя всеравно узнал много нового
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
👍
@quadrat2092
@quadrat2092 2 года назад
Огромное спасибо за курс, всё очень грамотно изложено.
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Спасибо за отзыв)
@user-qu6yb2vy1r
@user-qu6yb2vy1r 3 года назад
Блестяще! Без воды по сути, так держать!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо
@AndCheb
@AndCheb 2 года назад
Отличный курс, многое стало понятно, спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Пожалуйста)
@user-uo4bb2us5c
@user-uo4bb2us5c 3 года назад
Спасибо большое за курс, многие видео из курса я просматриваю 2-3 раза, очень здорово что есть файлы к видео и можно как шпаргалкой пользоваться при разработке сайта, уже пару блоков сфорганил)) До твоего курса пару недель учил js, после твоего курса по html и css basics могу уже запилить не сложный, но годный сайт, смотрим дальше)))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за отзыв. Рад, что курс помогает)
@malyna
@malyna 3 года назад
Спасибо за курс, отличная работа!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо
@Infinity-zf8ms
@Infinity-zf8ms 3 года назад
Спасибо за полезное видео 👍
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за поддержку
@crafters2454
@crafters2454 Год назад
thank you WEBDEV♥♥♥♥
@YauhenKavalchuk
@YauhenKavalchuk Год назад
You’re welcome
@bifacial605
@bifacial605 3 года назад
Спасибо за уроки,было полезно кое-что для себя вспомнить
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@nuriddintashpulatov4233
@nuriddintashpulatov4233 3 года назад
Это было просто офигенно. Спасибо вам большое за такой классный курс. Коротко, по делу, с примерами и самое главное - говорите как часто или редко используется та или иная технология. И ещё я хотел бы уточнить, есть ли/будет ли у вас курс по бутстрап? Пс. Просмотров просто аномально мало для такого хорошего курса, что очень и очень странно
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за отзыв. По bootstrap пока не планировал.
@nuriddintashpulatov4233
@nuriddintashpulatov4233 3 года назад
@@YauhenKavalchuk понятно, спасибо)
@user-bp8ky1my4o
@user-bp8ky1my4o 3 года назад
Ну что ж курс пройден! УРА! Подведём итоги. Очень рад, что мне выпал такой канал. Автор настоящий лектор. В каждом слове, интонации и голосе чувствуется увлечённость делом, желание точно и тщательно подать. Словно заглянул в энциклопедию в которой всё разложено по полочкам для удобства изучающего. Даже с какой-то заботой о нём. За что благодарю, благодарю, благодарю!!!! По случаю буду рекомендовать! Успехов и процветания во всех сферах жизни!!! Вопрос только один, не по теме, что ещё можно изучить для того, чтобы стать хорошим джуниором в разработке мобильных приложений на JS React Native помимо самого JS и в принципе сколько на это может потребоваться времени, на ваш взгляд (месяц ?), если возможно ответьте на него.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за отзыв. Думаю, при хорошем упорстве месяца достаточно
@sanya2990
@sanya2990 2 года назад
Спасиба !!!
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Пожалуйста
@chuvital
@chuvital 3 года назад
Спасибо
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста)
@olehyefimenko6693
@olehyefimenko6693 Год назад
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового и интересного! Только не могу найти видео по препроцессору SASS, но очень хотелось бы посмотреть.
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Спасибо за отзыв. Пока такого курса нет
@olehyefimenko6693
@olehyefimenko6693 Год назад
@@YauhenKavalchuk Хорошо, буду ждать! Уверен, что в курс по SASS так же будет на высшем уровне!
@My-video123
@My-video123 3 года назад
Супер) еще остались гриды и флексбокс
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Дерзайте)
@HA_CTPIME
@HA_CTPIME Год назад
👍👍👍
@YauhenKavalchuk
@YauhenKavalchuk Год назад
👍
@artwin777
@artwin777 3 года назад
Здравствуйте! А будет у вас полный курс по JS?
@mohen-tohen
@mohen-tohen 3 года назад
В одном из комментариев Евгений сказал, что курс по js будет
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Будет, ближе к концу 2021 года
@dobramorda9818
@dobramorda9818 3 года назад
да, последнюю кнопку можно стилизовать на чистом css, к примеру так вот: codepen.io/thebabydino/pen/jBbXPP как правильно автор заметил, сейчас все иконочные шрифты вытесняют спрайты, так же многие используют SVG, данный пример использования спрайта для кнопки это был году так в 2008-2012, сейчас если и используют спрайты, то по большей части в подгрузке кучи иконок(если нету в иконочном шрифте), чтобы не создавать нагрузки на сервер, приоритет один большой файл лучше, чем куча маленьких, на такой файл лучше вешать JS lazyload, чтобы все выглядело красиво. Я уже и забывать стал, что такое ещё есть и таким пользуются.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Как я и сказал технология старая, но в некоторых проектах по прежнему актуальная. Так что рассмотреть нужно было
@Gogsan
@Gogsan 2 года назад
Как атрибут placeholder позиционировать внутри input, паддинги не работают ?
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Нативные - никак. Обычно в таких случаях, делают эмуляцию из span например
@artisoul0852
@artisoul0852 3 года назад
А если у меня несколько инпутов из плэйсхолдерами, и я хочу конкретизировать плэйсхолдер, то как это сделать?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Не может быть такого, так как есть понятие консистентность дизайна, поэтому все поля стилизируются одинаково. Но если очень хочется, то можно использовать класс, или атрибут инпута
@Peschanyj_Voin_V
@Peschanyj_Voin_V Год назад
Как сделать placeholder разным по цвету? Надпись одного цвета, звёздочка другого
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Никак. Placeholder можно стилизировать в одном стиле, отдельные части не получится
@Peschanyj_Voin_V
@Peschanyj_Voin_V Год назад
@@YauhenKavalchuk я сделал уже. Спасибо
@alenache1
@alenache1 2 года назад
в первую очередь спрайты теряют актуальность потому что веб перешел на HTTP/2 и все запросы между браузером и сервером теперь мультиплексированы в одно соединение
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Спасибо за уточнение
@alenache1
@alenache1 2 года назад
@@YauhenKavalchuk :)
@mrakov
@mrakov 3 года назад
Совсем не рассказал про то, что в Firefox скролы изменяются только через(если я не ошибаюсь): scrollbar-color: auto | dark | light | color1 color2; scrollbar-width: thin | auto | none;
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
В курсе есть отдельная тема про кроссбраузерность и вендорные префиксы. В этом уроке, задача была показать стилизацию специфичных элементов
Далее
Learn CSS display property in 4 minutes! 🧱
4:13
Просмотров 44 тыс.
Backstage 🤫 tutorial #elsarca #tiktok
00:13
Просмотров 535 тыс.
Чай будешь? #чайбудешь
00:14
Просмотров 335 тыс.
Просто о SOLID (Принципы SOLID)
15:54
Просмотров 214 тыс.
Create custom scrollbars using CSS
13:58
Просмотров 223 тыс.
CSS Grid. Полный курс
57:22
Просмотров 91 тыс.