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

  Рет қаралды 12,411

webDev

webDev

3 жыл бұрын

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

Пікірлер: 63
@weekendshow7567
@weekendshow7567 Жыл бұрын
Этот курс CSS - лучшее справочное видео-руководство в KZfaq!!!
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Спасибо большое
@Grishka48
@Grishka48 Жыл бұрын
Спасибо за курс!
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Пожалуйста
@crafters2454
@crafters2454 Жыл бұрын
thank you WEBDEV♥♥♥♥
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
You’re welcome
@kdvfirehawk
@kdvfirehawk 3 жыл бұрын
Молодец, потрясающая работа, буду смотреть все гайды по html, css, js. Все очень понятно и подробно, странно что так мало людей смотрит, пока что лучшие гайды что я видел.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо большое за отзыв
@shinjiwww
@shinjiwww 11 ай бұрын
Очень познаватальный курс\справочник для новчика в css`е. Такого рода подход к открытию спсобностей каскадных стилей очень классный
@YauhenKavalchuk
@YauhenKavalchuk 11 ай бұрын
Спасибо за отзыв
@np9733
@np9733 2 жыл бұрын
Спасибо за курс! Очень крутая подача, все сжато, без воды, много ценной информации! Про вес селекторов, потоки, схлопывание margin и другие важные вещи узнала впервые, хотя прошла уже другие, "очные" курсы.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Спасибо за отзыв )
@user-uo4bb2us5c
@user-uo4bb2us5c 3 жыл бұрын
Спасибо большое за курс, многие видео из курса я просматриваю 2-3 раза, очень здорово что есть файлы к видео и можно как шпаргалкой пользоваться при разработке сайта, уже пару блоков сфорганил)) До твоего курса пару недель учил js, после твоего курса по html и css basics могу уже запилить не сложный, но годный сайт, смотрим дальше)))
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо за отзыв. Рад, что курс помогает)
@user-zc9kd2ci4q
@user-zc9kd2ci4q 3 жыл бұрын
Спасибо за курс!!! Просмотрел на одном дыхании. Супер!
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо за отзыв)
@andrewgorun3203
@andrewgorun3203 3 жыл бұрын
Спасибо за курс. Информация хорошо структурирована.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Пожалуйста
@user-rw1ix3oo4c
@user-rw1ix3oo4c 2 жыл бұрын
вроде много знаю о css и html, но у тебя всеравно узнал много нового
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
👍
@sanya2990
@sanya2990 2 жыл бұрын
Спасиба !!!
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Пожалуйста
@quadrat2092
@quadrat2092 2 жыл бұрын
Огромное спасибо за курс, всё очень грамотно изложено.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Спасибо за отзыв)
@HA_CTPIME
@HA_CTPIME Жыл бұрын
👍👍👍
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
👍
@malyna
@malyna 3 жыл бұрын
Спасибо за курс, отличная работа!
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо
@user-qu6yb2vy1r
@user-qu6yb2vy1r 3 жыл бұрын
Блестяще! Без воды по сути, так держать!
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо
@Infinity-zf8ms
@Infinity-zf8ms 3 жыл бұрын
Спасибо за полезное видео 👍
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо за поддержку
@bifacial605
@bifacial605 3 жыл бұрын
Спасибо за уроки,было полезно кое-что для себя вспомнить
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Пожалуйста
@user-bp8ky1my4o
@user-bp8ky1my4o 3 жыл бұрын
Ну что ж курс пройден! УРА! Подведём итоги. Очень рад, что мне выпал такой канал. Автор настоящий лектор. В каждом слове, интонации и голосе чувствуется увлечённость делом, желание точно и тщательно подать. Словно заглянул в энциклопедию в которой всё разложено по полочкам для удобства изучающего. Даже с какой-то заботой о нём. За что благодарю, благодарю, благодарю!!!! По случаю буду рекомендовать! Успехов и процветания во всех сферах жизни!!! Вопрос только один, не по теме, что ещё можно изучить для того, чтобы стать хорошим джуниором в разработке мобильных приложений на JS React Native помимо самого JS и в принципе сколько на это может потребоваться времени, на ваш взгляд (месяц ?), если возможно ответьте на него.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо за отзыв. Думаю, при хорошем упорстве месяца достаточно
@nuriddintashpulatov4233
@nuriddintashpulatov4233 3 жыл бұрын
Это было просто офигенно. Спасибо вам большое за такой классный курс. Коротко, по делу, с примерами и самое главное - говорите как часто или редко используется та или иная технология. И ещё я хотел бы уточнить, есть ли/будет ли у вас курс по бутстрап? Пс. Просмотров просто аномально мало для такого хорошего курса, что очень и очень странно
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо за отзыв. По bootstrap пока не планировал.
@nuriddintashpulatov4233
@nuriddintashpulatov4233 3 жыл бұрын
@@YauhenKavalchuk понятно, спасибо)
@chuvital
@chuvital 3 жыл бұрын
Спасибо
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Пожалуйста)
@olehyefimenko6693
@olehyefimenko6693 Жыл бұрын
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового и интересного! Только не могу найти видео по препроцессору SASS, но очень хотелось бы посмотреть.
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Спасибо за отзыв. Пока такого курса нет
@olehyefimenko6693
@olehyefimenko6693 Жыл бұрын
@@YauhenKavalchuk Хорошо, буду ждать! Уверен, что в курс по SASS так же будет на высшем уровне!
@My-video123
@My-video123 3 жыл бұрын
Супер) еще остались гриды и флексбокс
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Дерзайте)
@dobramorda9818
@dobramorda9818 3 жыл бұрын
да, последнюю кнопку можно стилизовать на чистом css, к примеру так вот: codepen.io/thebabydino/pen/jBbXPP как правильно автор заметил, сейчас все иконочные шрифты вытесняют спрайты, так же многие используют SVG, данный пример использования спрайта для кнопки это был году так в 2008-2012, сейчас если и используют спрайты, то по большей части в подгрузке кучи иконок(если нету в иконочном шрифте), чтобы не создавать нагрузки на сервер, приоритет один большой файл лучше, чем куча маленьких, на такой файл лучше вешать JS lazyload, чтобы все выглядело красиво. Я уже и забывать стал, что такое ещё есть и таким пользуются.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Как я и сказал технология старая, но в некоторых проектах по прежнему актуальная. Так что рассмотреть нужно было
@artwin777
@artwin777 3 жыл бұрын
Здравствуйте! А будет у вас полный курс по JS?
@mohen-tohen
@mohen-tohen 3 жыл бұрын
В одном из комментариев Евгений сказал, что курс по js будет
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Будет, ближе к концу 2021 года
@Gogsan
@Gogsan 2 жыл бұрын
Как атрибут placeholder позиционировать внутри input, паддинги не работают ?
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Нативные - никак. Обычно в таких случаях, делают эмуляцию из span например
@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 :)
@artisoul0852
@artisoul0852 3 жыл бұрын
А если у меня несколько инпутов из плэйсхолдерами, и я хочу конкретизировать плэйсхолдер, то как это сделать?
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Не может быть такого, так как есть понятие консистентность дизайна, поэтому все поля стилизируются одинаково. Но если очень хочется, то можно использовать класс, или атрибут инпута
@mrakov
@mrakov 3 жыл бұрын
Совсем не рассказал про то, что в Firefox скролы изменяются только через(если я не ошибаюсь): scrollbar-color: auto | dark | light | color1 color2; scrollbar-width: thin | auto | none;
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
В курсе есть отдельная тема про кроссбраузерность и вендорные префиксы. В этом уроке, задача была показать стилизацию специфичных элементов
Create custom scrollbars using CSS
13:58
Kevin Powell
Рет қаралды 225 М.
I CAN’T BELIEVE I LOST 😱
00:46
Topper Guild
Рет қаралды 70 МЛН
Wait for the last one! 👀
00:28
Josh Horton
Рет қаралды 122 МЛН
Разработка платы и перенос в Sprint Layout.  УНЧ из деталей конструктора времен СССР.
1:11:38
CSS Grid. Полный курс
57:22
webDev
Рет қаралды 92 М.
Просто о SOLID (Принципы SOLID)
15:54
webDev
Рет қаралды 216 М.
Задача из Собеседования на 160,000 Евро в Год
13:27
Саша Лукин
Рет қаралды 1,1 МЛН
Как создавать SVG спрайты? | SVG Sprites
10:06
CSS Display FLEX vs Block, Inline & Inline-Block Explained
6:46
Cem Eygi Media
Рет қаралды 161 М.
How To Create Custom Scrollbar In CSS
6:30
Web Dev Simplified
Рет қаралды 115 М.
I CAN’T BELIEVE I LOST 😱
00:46
Topper Guild
Рет қаралды 70 МЛН