CSS3 #23 Стилизация плейсхолдера и скролла, CSS-спрайты (Placeholder, Scrollbar & Sprites)
HTML-код
- Опубликовано: 15 фев 2021
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Этот курс CSS - лучшее справочное видео-руководство в RUclips!!!
Спасибо большое
Молодец, потрясающая работа, буду смотреть все гайды по html, css, js. Все очень понятно и подробно, странно что так мало людей смотрит, пока что лучшие гайды что я видел.
Спасибо большое за отзыв
Спасибо за курс!
Пожалуйста
Очень познаватальный курс\справочник для новчика в css`е. Такого рода подход к открытию спсобностей каскадных стилей очень классный
Спасибо за отзыв
Спасибо за курс. Информация хорошо структурирована.
Пожалуйста
Спасибо за курс!!! Просмотрел на одном дыхании. Супер!
Спасибо за отзыв)
Спасибо за курс, отличная работа!
Спасибо
Огромное спасибо за курс, всё очень грамотно изложено.
Спасибо за отзыв)
Блестяще! Без воды по сути, так держать!
Спасибо
Спасибо за курс! Очень крутая подача, все сжато, без воды, много ценной информации! Про вес селекторов, потоки, схлопывание margin и другие важные вещи узнала впервые, хотя прошла уже другие, "очные" курсы.
Спасибо за отзыв )
Спасибо за уроки,было полезно кое-что для себя вспомнить
Пожалуйста
Спасибо большое за курс, многие видео из курса я просматриваю 2-3 раза, очень здорово что есть файлы к видео и можно как шпаргалкой пользоваться при разработке сайта, уже пару блоков сфорганил)) До твоего курса пару недель учил js, после твоего курса по html и css basics могу уже запилить не сложный, но годный сайт, смотрим дальше)))
Спасибо за отзыв. Рад, что курс помогает)
Спасибо за полезное видео 👍
Спасибо за поддержку
thank you WEBDEV♥♥♥♥
You’re welcome
Ну что ж курс пройден! УРА!
Подведём итоги. Очень рад, что мне выпал такой канал. Автор настоящий лектор. В каждом слове, интонации и голосе чувствуется увлечённость делом, желание точно и тщательно подать. Словно заглянул в энциклопедию в которой всё разложено по полочкам для удобства изучающего. Даже с какой-то заботой о нём. За что благодарю, благодарю, благодарю!!!! По случаю буду рекомендовать!
Успехов и процветания во всех сферах жизни!!!
Вопрос только один, не по теме, что ещё можно изучить для того, чтобы стать хорошим джуниором в разработке мобильных приложений на JS React Native помимо самого JS и в принципе сколько на это может потребоваться времени, на ваш взгляд (месяц ?), если возможно ответьте на него.
Спасибо за отзыв. Думаю, при хорошем упорстве месяца достаточно
вроде много знаю о css и html, но у тебя всеравно узнал много нового
👍
Это было просто офигенно. Спасибо вам большое за такой классный курс. Коротко, по делу, с примерами и самое главное - говорите как часто или редко используется та или иная технология. И ещё я хотел бы уточнить, есть ли/будет ли у вас курс по бутстрап?
Пс. Просмотров просто аномально мало для такого хорошего курса, что очень и очень странно
Спасибо за отзыв. По bootstrap пока не планировал.
@@YauhenKavalchuk понятно, спасибо)
Спасиба !!!
Пожалуйста
Спасибо
Пожалуйста)
Супер) еще остались гриды и флексбокс
Дерзайте)
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового и интересного! Только не могу найти видео по препроцессору SASS, но очень хотелось бы посмотреть.
Спасибо за отзыв. Пока такого курса нет
@@YauhenKavalchuk Хорошо, буду ждать! Уверен, что в курс по SASS так же будет на высшем уровне!
👍👍👍
👍
да, последнюю кнопку можно стилизовать на чистом css, к примеру так вот:
codepen.io/thebabydino/pen/jBbXPP
как правильно автор заметил, сейчас все иконочные шрифты вытесняют спрайты, так же многие используют SVG, данный пример использования спрайта для кнопки это был году так в 2008-2012, сейчас если и используют спрайты, то по большей части в подгрузке кучи иконок(если нету в иконочном шрифте), чтобы не создавать нагрузки на сервер, приоритет
один большой файл лучше, чем куча маленьких, на такой файл лучше вешать JS lazyload, чтобы все выглядело красиво.
Я уже и забывать стал, что такое ещё есть и таким пользуются.
Как я и сказал технология старая, но в некоторых проектах по прежнему актуальная. Так что рассмотреть нужно было
Здравствуйте! А будет у вас полный курс по JS?
В одном из комментариев Евгений сказал, что курс по js будет
Будет, ближе к концу 2021 года
Как атрибут placeholder позиционировать внутри input, паддинги не работают ?
Нативные - никак. Обычно в таких случаях, делают эмуляцию из span например
А если у меня несколько инпутов из плэйсхолдерами, и я хочу конкретизировать плэйсхолдер, то как это сделать?
Не может быть такого, так как есть понятие консистентность дизайна, поэтому все поля стилизируются одинаково. Но если очень хочется, то можно использовать класс, или атрибут инпута
Как сделать placeholder разным по цвету? Надпись одного цвета, звёздочка другого
Никак. Placeholder можно стилизировать в одном стиле, отдельные части не получится
@@YauhenKavalchuk я сделал уже. Спасибо
в первую очередь спрайты теряют актуальность потому что веб перешел на HTTP/2 и все запросы между браузером и сервером теперь мультиплексированы в одно соединение
Спасибо за уточнение
@@YauhenKavalchuk :)
Совсем не рассказал про то, что в Firefox скролы изменяются только через(если я не ошибаюсь):
scrollbar-color: auto | dark | light | color1 color2;
scrollbar-width: thin | auto | none;
В курсе есть отдельная тема про кроссбраузерность и вендорные префиксы. В этом уроке, задача была показать стилизацию специфичных элементов