Тёмный

Треугольник с закруглёнными углами CSS / И немного о em 

Подписаться
Просмотров 9 тыс.
% 650

Я считаю, что человек, который занимается вёрсткой (верстка сайтов), должен хоть иногда делать вёрстку css каких-то необычных вещей. Скорее всего, такие сумасшедшие разработки не будут использоваться на боевых проектах, НО такие штуки заставляют наш мозг работать иначе, мыслить под другим углом и это весело. Обычно приходится вспоминать свойства, которыми редко пользуешься, используешь новые инструменты, что-то гуглишь.
Так, в этом видео я показываю несколько необычное применение свойства box-shadow, а так же то, как вёрстка с использованием em (единица измерения) помогает в вёрстке.
Треугольник с закруглёнными углами css очень часто встречается в различных макетах, но обычно разработчики это либо игнорируют и делают с острыми углами (треугольник на css я уже показывал как можно сделать), либо же вырезают картинку.

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

 

5 дек 2019

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@prosto_razrabotka
@prosto_razrabotka 3 года назад
Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@arsenmanasuev4934
@arsenmanasuev4934 4 года назад
Спасибо за труды очень информативно и сжато
@gregotokarev
@gregotokarev 4 года назад
Оригинально, и про воду, и про решение!
@user-zg4ef9in6s
@user-zg4ef9in6s 3 года назад
Интересное решение!) Надо попробовать)
@andreiribac6284
@andreiribac6284 4 года назад
Приятно было видеть свое имя в видео) Спасибо за челлендж и видео! Воды было в самый раз кстати!)
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Всё как обещал -)
@user-ol3bu4pr7m
@user-ol3bu4pr7m 4 года назад
Красавчик!
@user-ff3lc1et3u
@user-ff3lc1et3u 3 года назад
Невероятно
@igormuryy5722
@igormuryy5722 4 года назад
Лайк(по умолчанию)
@duranduran6114
@duranduran6114 4 года назад
"Новогоднее настроение, эгегей" =)))))
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Ближе к Новому году скорее всего появится ещё и Йо-хо-хо -))
@Nekby2
@Nekby2 4 года назад
напомнило передачу Очумелые ручки ) в продакшн не заиспользуешь, но своё самолюбие потешить сойдёт
@andreysv7752
@andreysv7752 4 года назад
лайк однозначно) за "воду в видео" по аплодирую)))
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Спасибо, спасибо)
@andreysv7752
@andreysv7752 4 года назад
@@prosto_razrabotka воспользуюсь возможностью задать вопрос - в современной верстке что сейчас используют в основном - пиксели, em rem?
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Всё, зависит от ситуации. Ещё vw и vh. И кажется что-то ещё)
@user-ty6fq9os9k
@user-ty6fq9os9k 4 года назад
Спасибо. Очень интересно. А вот как нарисовать целую картину с домом, солнцем, забором - лишь с помощью блоков... Вот где мастерство вёрстки нужно проявить...
@timmyboy1687
@timmyboy1687 4 года назад
)))))) Kruto!
@gribkut
@gribkut Год назад
это всё круто, но кидать код текстом в описании ещё круче
@vladfedorov4293
@vladfedorov4293 4 года назад
А можно было использовать vw или vh, как вариант.Было бы еще и адаптивно) Спасибо за видео!)
@UserSo4reUsu75ry
@UserSo4reUsu75ry 4 года назад
Расскажи как сейчас принято организовывать сборку проектов. Не просто "вот gulp и вот мы превратили sass в css", а как вообще нормальная организация продакшин сборки должна выглядеть. Нужен ли babel, если все еще приходится пользоваться плагинами на jquery и не плохо все это смешивать вместе. Как собирать иконки - в отдельный svg спрайт или можно по одной ) и тд.
@forgiveness_denied
@forgiveness_denied 4 года назад
бляяя ну это надо же до такого догадаться!)
@chris.p-dev
@chris.p-dev 4 года назад
Всё видео ждал отсылку на масонский треугольник, эхх ... :)
@yarko4766
@yarko4766 4 года назад
пример про em понравился
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Рад)
@RustamBEKO
@RustamBEKO 4 года назад
Кстати как идея к превью будущим роликам))) сделать на лбу символ Доктора Манхэттена, и немного покрасить автора в синий цвет (отсылка к сериалу HBO " Хранители") могу подсобить и пофотошопить на досуге)))
@RustamBEKO
@RustamBEKO 4 года назад
*роликам
@user-bc4dt4zl9l
@user-bc4dt4zl9l 4 года назад
можо видос по настройке webpack для scss и тп
@user-cj7if7us8u
@user-cj7if7us8u 4 года назад
Привет, не могу найти информацию как сделать подобный переключатель - i.imgur.com/SrCwDdh.png (не в смысле js логики) а html конструкции
@ortotrog751
@ortotrog751 4 года назад
Я подумал ,что без литра , а там было больше, не разберёшься.
@user-tj7sr8qv5w
@user-tj7sr8qv5w 3 года назад
Привет. Как быть если нужен треугольник с закругленными краями и дискретным фоном (плавно меняющий цвет). всю голову сломал, похже через css не сделать. сам треугольник сделал через clip-path: polygon, а фон с переливом не могу задать. Может кто подскажет. ))
@prosto_razrabotka
@prosto_razrabotka 4 года назад
А какие у вас были странные решения на CSS?))
@Vladikslavik
@Vladikslavik 4 года назад
Я смог сделать только треугольник, потому как когда-то разбирался с тем как устроено меню гамбургер. Но до бох-шэдоу не додумалась моя голова ))
@andreiribac6284
@andreiribac6284 4 года назад
Мне в ближайшем будущем предстоит делать проект с множеством многогранников - морально готовлюсь и собираюсь с силами.
@almannazyrov394
@almannazyrov394 4 года назад
Clip-path: polygon; ???
@Vladikslavik
@Vladikslavik 4 года назад
Andrei Ribac Хотелось бы взглянуть на макет.
@rostyslavsynenko6060
@rostyslavsynenko6060 4 года назад
@@almannazyrov394 Я б посмотрел видео о косых границах с помощью clip-path: polygon(); или других методов.
@sergeyvorobev4387
@sergeyvorobev4387 4 года назад
Отличная вода в видео))) ЛОЛ
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Отличная, согласен) Целых 5 литров кажется)
@sergeyvorobev4387
@sergeyvorobev4387 4 года назад
@@prosto_razrabotka сразу становится ясно сколько воды в видео)))
@nexiQ94
@nexiQ94 4 года назад
Не совсем понял зачем вы поставили scss , если писали по итогу на чистом css
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Поставил по привычке)
@user-hh1vk1rx2i
@user-hh1vk1rx2i 4 года назад
Ктооо тыыы😂😂😂 я второй день ищу как это сделать
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Обращайтесь -)
@Vladikslavik
@Vladikslavik 4 года назад
Прикольно, зачёт. Но почему вы все говорите рэлЭйтив? )) правильно говорить рЭлэтив.
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Правильно - не звучит))
@KrasavchikSelivan
@KrasavchikSelivan 4 года назад
Воды много, но в целом норм
@kotlancer
@kotlancer 4 года назад
Это видео можно было посмотреть только ради бутылки с водой :D
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Так, без спойлеров -)
@PsionicD
@PsionicD 4 года назад
Вода в видео 😂
@alexlisouski4069
@alexlisouski4069 4 года назад
Виталий, мой совет вам. делайте контент именно с решением не тривиальных задач. Это цепляет, а в чем смысл рассказывать о том, что и так все знают
@prosto_razrabotka
@prosto_razrabotka 4 года назад
То есть типа таких?
@RetuZZik
@RetuZZik 4 года назад
Как нормально сделать трапецию с закругленными краями? joxi.ru/4AkR4BOCXo3ee2
@Unknown_User768
@Unknown_User768 4 года назад
Ты похож на инопланетяна
@prosto_razrabotka
@prosto_razrabotka 4 года назад
Спасибо)