Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/
Решил самостоятельно разобраться с тем, как сделать шестигранник. Доложу я Вам лучшей практики для новичка и придумать нельзя. Сразу начинаешь понимать зачем делается начальное обнуление, как выполняется позиционирование и какие чудесные трансформации возможны с псевдоэлементами. Hexahedron получился что надо. Правда "пришлось изрядно по лохматить бабушку ", но для новичка оно самое то. Твои видео побуждают творить, выдумывать, пробовать. Огромная благодарность и уважуха за твой труд.
Женя, привет, вот сижу пересматриваю твои видосики и хочу уточнить. Ты рассказывал про фигуры, а можешь, пожалуйста показать изометрию в действии, ведь сейчас очень много разных сайтов используют её для демонстрации товара или же просто как успешный дизайнерский ход? Думаю, многим зайдёт такого рода ролик из серии "как это сделать". Кто согласен - поддержите лайком!
все я понял в чем твой плюс! =) твоего канала и манеры подачи. Остальные рассказывают как сделать трапецию - 15 минут! у тебя за 7 минут все примеры. это круто! =) то чего не хватает в ютубе! Коротко и по делу, прям как у меня с женой =)
Добрый день! Благодарю, Женя! Быстро, полезно, доступно, просто и понятно! А если "оживить" фигуры с помощью :hover, transform, то еще и весело! Успехов! 👍🤝🙂
Спасибо огромное!!! Честно говорю, до просмотра этого видео я никак не мог понять как делать треугольники! После просмотра понял последовательность, теперь любой треугольник могу сверстать! Ещё раз спасибо!!!!!
Невероятно полезно. Приятно учиться. Буду Вам очень признателен, если сделаете урок про эффекты при прокрутке страницы, а именно плавное появление разных блоков, справа, слева. Очень непросто найти качественный материал на эту тему. Заранее спасибо Вам!!!
Классный урок - лайк! Лично я предпочитаю SVG для этих целей. Эта фишка с бордерами - она на хак какой-то похожа. Трюк! Используется нюанс рендеринга границ браузером. А SVG - это реальный вектор, в котором фигура - это фигура. Хотя там с координатами придется играться, возможно дольше. И по тексту больше занимает, так что и бордеры полезно знать.
Мне нужно было добавить текст внутри фигур, причем с переносами, причем текст динамически меняется, и чтобы лишнее не вылазило за пределы фигуры. Так вот, позиционирование текста в svg браузеры толком не поддерживают. Я убил двое суток и кучу костылей придумал , чтобы это реализовать. А с div , тем более с простыми фигурами, все это парой строчек кода решается. Для каждой задачи свои инструменты.
А потом третью со сложными (составными) фигурами, типа указатели (прямоугольник со стрелкой) и четвертую - тени под составными фигурами)))) ну или применение svg в html =)
Спасибо за Ваши видео, всё очень доступно объясняете. Сейчас не могу справиться с задачей построить прямоугольную трапецию со скругленными углами. Просто прямоугольную трапецию построила, а вот углы не получается скруглить, border radius не справляется
Класс, спасибо. Правда не сильно понял за чтет чего срез треугольников идёт. Надо будет пробнуть вместо прозрачного цвета другие поставить и постотреть что получается.
Хороший канал, здесь я многому научился. Спасибо большое! Но всё ещё испытываю проблемы с вёрсткой. Можете только подсказать идею, как верстать блок, с которым у меня не получается?
Евгений вопрос- создать треугольник и сделать тень для него - это возможно? я пробовал но треугольник создается визуально, но фактически это прямоуголник с двумя закрашенными в цвет фона бека углами и придобавлении тень рисутеся от прямоугольника(((
Спасибо за прекрасные уроки! Возник вопрос - как закруглить углы. Прочитал про размещение в круге, но у меня неровная трапеция. Не факт, что получится подогнать под круг. В макете прописано свойство border-radius: 50px, но из-за его применения слетает прозрачная граница сбоку. Есть ли возможность реализовать закругление углов без размещения в круге?
@@FreelancerLifeStyle Спасибо за ответ! Блин, ты, по моему, единственный ютубер, который отвечает на мои тупые коменты. И как ты вообще на все находишь время??? Ты вообще спишь? Ты ешь?? Да ты человек вообще...???!
Если у меня спросят: -Какая на ваше мнение самоя большая несправедливость в жизни? Тогда я отвечу: -Самая большая несправедливость, это то что у Фрилансера по жизни всего 47к подписчиков (Как минимум должно быть 1кк)
Привіт при заповненні фігур елементами форма фігур ламається, що можна зробити? Допустимо намалював коло і всередині помістив стрілку і постать зламалася
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Подскажите как сделать гибкий треугольник ?
Чтобы он сжимался и растягивался
С кучи ютуберов этот канал как то лучше всех заходит. Ничего не бесит, все доступно))
Спасибо большое! Я рад)
Решил самостоятельно разобраться с тем, как сделать шестигранник. Доложу я Вам лучшей практики для новичка и придумать нельзя. Сразу начинаешь понимать зачем делается начальное обнуление, как выполняется позиционирование и какие чудесные трансформации возможны с псевдоэлементами. Hexahedron получился что надо. Правда "пришлось изрядно по лохматить бабушку ", но для новичка оно самое то. Твои видео побуждают творить, выдумывать, пробовать. Огромная благодарность и уважуха за твой труд.
Спасибо большое! Именно так и нужно!
Женя, привет, вот сижу пересматриваю твои видосики и хочу уточнить. Ты рассказывал про фигуры, а можешь, пожалуйста показать изометрию в действии, ведь сейчас очень много разных сайтов используют её для демонстрации товара или же просто как успешный дизайнерский ход? Думаю, многим зайдёт такого рода ролик из серии "как это сделать". Кто согласен - поддержите лайком!
Блин, сколько же времени раньше мучился, чтобы слепить фигуры... А теперь "я точно знаю, как это сделать"))) Спасибо, Жека!
Пожалуйста! Рад что полезно!
все я понял в чем твой плюс! =) твоего канала и манеры подачи.
Остальные рассказывают как сделать трапецию - 15 минут! у тебя за 7 минут все примеры. это круто! =) то чего не хватает в ютубе!
Коротко и по делу, прям как у меня с женой =)
Я так понимаю, жена иногда мечтает о 15ти минутном ролике )))
@@FreelancerLifeStyle о 8ми!) как на прошлый новый год
Даже я всё поняла. Спасибо. Не понимаю, как рука у кого-то поднимается ставить дизлайки((((
Всем не угодишь) Я рад что все понятно и полезно! С наступающим!
У меня потому что видео говно
Вот это я понимаю контент, лайк не глядя!
Спасибо!
Спасибо, очень доступно, теперь понятно как это сделать! 💕
Замечательно!
Оказывается все достаточно просто, спасибо)
Пожалуйста!
ООО как долго я искал такой канал ). Спасибо тебе огромное за труды.
Пожалуйста! Я рад что нашел)
Позитивно, информативно, оставляет массу удовольствия от просмотра) Бегу делать треугольные метки на карточках с товаром)
Супер!
Отлично! Как раз в планах научиться делать слайдер, а эти знания при его создании непременно пригодятся! Спасибо!
Класс, так классно объясняешь, что то что казалось сложным, оказалось проще простого. Спасибо!
Просто и доступно , за 7.35 минут. Это лайк однозначно, спасибо!
Спасибо! Стараюсь)
Это лучшие уроки из всех, что я видел(платных в том числе) спасибо за это))
Спасибо! Я очень рад!
Самые лучшие уроки! Очень полезные! Отличная подача! Большое спасибо!
Пожалуйста! Рад что полезно!
Странно, что кто-то ставит дизлайки. Вроде и воды мало, и рассказывает Евгений доступно, и всё-равно есть недовольные.
И всегда будут! Это нормально)
Куда ж без них-то?
Спасибо за простой и понятный способ реализации фигур через стили!!!
Пожалуйста!
Оо, наконец-то расслабончик) Вспомнил геометрию 8 класс) Спасибо за урок, все понятно и доступно)
А говорят геометрия не нужна 😂💪
Добрый день! Благодарю, Женя! Быстро, полезно, доступно, просто и понятно! А если "оживить" фигуры с помощью :hover, transform, то еще и весело! Успехов! 👍🤝🙂
Суперский урок. Всё так понятно и легко. Благодарю:)
Спасибо! Я очень рад!
как же гениально и просто, спасибо
также можно использовать clip-path: polygon(), что однозначно уменьшит количество кода)
поддержка браузерами не очень(
Спасибо тебе большое за контент! Ты делаешь всё очень классно и доступно!
Спасибо! Стараюсь!
лайк за выговаривание параллелограмма.
Молодец! Так держать.
Отличная подборка без лишнего пездежа на 18минут
Спасибо
Женя, спасибо, за ТРУД !!! Конкретно по данному уроку, это у меня только так или у всех, hover нормально работает только с triangle-up.
Опять годное видео: минимум воды- максимум пользы.
Спасибо!
А я треугольники вырезал с макета в png или как иконки скачивал).И не задумывался, что можно через стили. Отличный урок)
Спасибо!
Ооо дождались🔥🔥🔥 Евгений красава!!! Лучший🔥🔥🔥
Спасибо! 🤘
Спасибо огромное!!! Честно говорю, до просмотра этого видео я никак не мог понять как делать треугольники! После просмотра понял последовательность, теперь любой треугольник могу сверстать! Ещё раз спасибо!!!!!
Пожалуйста! Рад что полезно!
Невероятно полезно. Приятно учиться. Буду Вам очень признателен, если сделаете урок про эффекты при прокрутке страницы, а именно плавное появление разных блоков, справа, слева. Очень непросто найти качественный материал на эту тему. Заранее спасибо Вам!!!
Да, сделаю
Круто! Спасибо Вам!!! Буду ждать).
класс легко и просто без before-after, спс
Спасибо, просто и ясно.!
Просто и понятно! Спасибо!
Спасибо за видео. Хотелось бы увидеть треугольники и трапеции с содержимым внутри.
Спасибо! Используй позиционарование и псевдоэлементы!
Спасибо! Замечательный ответ!
- Как добраться до Урюпинска?
- Используй карту и средства передвижения! @@FreelancerLifeStyle
Гугли лучше SVG. Для сложных композиций это будет более правильный выбор.
А бордеры - это стрелочку по шурику навернуть где-то.
очень классно всё обьясняешь)
спасибо, товарищ.
Спс за твой труд! Сен-сей🙏
Пожалуйста!
Уважаю тебя мужик!
подивилась - ніби легко. На практиці трохи плуталась, але потім розібралась з усім. Дякую, дуже круто!!! :-)
Классный урок - лайк!
Лично я предпочитаю SVG для этих целей.
Эта фишка с бордерами - она на хак какой-то похожа. Трюк! Используется нюанс рендеринга границ браузером.
А SVG - это реальный вектор, в котором фигура - это фигура. Хотя там с координатами придется играться, возможно дольше.
И по тексту больше занимает, так что и бордеры полезно знать.
Ну, каждый делает как хочет))
Мне нужно было добавить текст внутри фигур, причем с переносами, причем текст динамически меняется, и чтобы лишнее не вылазило за пределы фигуры.
Так вот, позиционирование текста в svg браузеры толком не поддерживают. Я убил двое суток и кучу костылей придумал , чтобы это реализовать. А с div , тем более с простыми фигурами, все это парой строчек кода решается.
Для каждой задачи свои инструменты.
Ждем вторую часть, в которой вы расскажете как сделать тень под сложной фигурой (вторая половина списка) :-)
Хех, что-то придумаю)
А потом третью со сложными (составными) фигурами, типа указатели (прямоугольник со стрелкой) и четвертую - тени под составными фигурами)))) ну или применение svg в html =)
тоже ждемс)
Спасибо за Ваши видео, всё очень доступно объясняете. Сейчас не могу справиться с задачей построить прямоугольную трапецию со скругленными углами. Просто прямоугольную трапецию построила, а вот углы не получается скруглить, border radius не справляется
Спасибо большое, очень полезное видео!
Пожалуйста!
Ты гений! Спасибо.
Полезный видос! Спасибо!
Класс, спасибо. Правда не сильно понял за чтет чего срез треугольников идёт. Надо будет пробнуть вместо прозрачного цвета другие поставить и постотреть что получается.
Пожалуйста! Как раз за счет прозрачного бордера!
Хороший канал, здесь я многому научился. Спасибо большое! Но всё ещё испытываю проблемы с вёрсткой. Можете только подсказать идею, как верстать блок, с которым у меня не получается?
У нас тут чат по верстке t.me/flschat
Не на что не намекаю) влево смотреть на подсказки)))
Когда-нибудь я пойму о чем речь, но не сегодня)
Крайне полезно, продолжай в том же духе! (:
Спасибо за уроки💕
Пожалуйста! 😊
Уау!!! Спасибо, все понял!
и кстати как у тебя получатся на все комменты отвечать?
попробовал трапецию перевернуть - получилось и еще скругление углов можно на одной из сторон. .sub-trapezoid {
width: 300px;
border-top: 120px solid cornflowerblue;
border-left: 50px solid transparent;
border-right: 120px solid transparent;
}
В данном примере не овал, а эллипс. А transform не меняет сам элемент, а только его отображение. Кликабельная область же остаётся прямоугольной.
Простеньке але дуже корисне вiдео.👍
ZOR CHIQIBDI RAHMAT
Хороший видос!
Можешь подсказать как сделать чтоб фигурки создавались горизонтально а не вертикально
Ого, первый раз вижу у тебя рекламу :))
Это было давно)
А прямоугольную кнопку button в формах можно сделать в виде стрелки вправо путем таких манипуляций с бордером?
Дякую супер
Да, Евгений излагает доступно! Skillbox это реальная школа или просто спонсор?)
просто партнер выпуска
Изи лайк и коммент. Женя ты супер =)
Спасибо большое! 🤘😎
Спасибо
Пожалуйста! 👍
Жека, а как рисовать объемные фигуры? типо тетраэдра?
Пасиба Жека!
Пожалуйста!
Класс! Спасибо)
Пожалуйста! 👍
крутяк!!!
Спасибо!
На сколько я не люблю ставить лайки, но тебе вообще не жалко и 1000 лайков
и еще вопрос, как у этого треугольника закруглить теперь углы? и забыл поблагодарить за видео! как всегда очень круто! Жека спасибо!
Спасибо! Как вариант вписать треугольник в круг)
Спасибо за старания:)
Пожалуйста! 👍
огонь! ))
круто!
Спасибо!
Что за плагин используется? Там все изменения происходят в риалтайме)
Это лайк!
Спасибос! 👍
Евгений вопрос- создать треугольник и сделать тень для него - это возможно? я пробовал но треугольник создается визуально, но фактически это прямоуголник с двумя закрашенными в цвет фона бека углами и придобавлении тень рисутеся от прямоугольника(((
Че так годно?
Будет еще лучше 😎
Спасибо за прекрасные уроки! Возник вопрос - как закруглить углы. Прочитал про размещение в круге, но у меня неровная трапеция. Не факт, что получится подогнать под круг. В макете прописано свойство border-radius: 50px, но из-за его применения слетает прозрачная граница сбоку. Есть ли возможность реализовать закругление углов без размещения в круге?
Дякую!)
шикарно
Спасибо!
Самый легкий урок, при том, что не любитель геометрии)
Полезно ))
Спасибо!
Дякую за урок! Привіт з Києва)
Привіт! Будь ласка!
Супер! и генератор не надо!
Пожалуйста! Тут все просто)
Женек полахматил бабушку этим роликом хорошо так))
А у меня возник вопрос, а обязательно иметь закрытый тег див?
пушечка
Спасибо!
Как поместить круг внутри блока
спасибо)))
Пожалуйста!
Очень круто и полезно, правда нихрена не понял как треугольник выполняется с технической точки зрения, как оно работает ???
Ну, прозрачный бордер и цветной
@@FreelancerLifeStyle
Спасибо за ответ!
Блин, ты, по моему, единственный ютубер, который отвечает на мои тупые коменты.
И как ты вообще на все находишь время??? Ты вообще спишь? Ты ешь?? Да ты человек вообще...???!
Если у меня спросят:
-Какая на ваше мнение самоя большая несправедливость в жизни?
Тогда я отвечу:
-Самая большая несправедливость, это то что у Фрилансера по жизни всего 47к подписчиков (Как минимум должно быть 1кк)
Спасибо большое! Все будет!
А как ставить их по разным местам? к примеру Я хочу поставит квадрат по середине а рядом с ним круг, как мне это сделать?
0:23 как сделать такие стрелочки пунктирные?
всем привет с вами Sorax
Когда я использую css фигуры с slick slider, css задерживается. Выполняется сначала слмк потом появляется фигуры. Выглядит не очень.
Nice!
klass
якби ж все було таким простим😌
У меня не меняется размер прямоугольника, точнее меняется , но закрашивается не весь, что делать?
Привіт при заповненні фігур елементами форма фігур ламається, що можна зробити? Допустимо намалював коло і всередині помістив стрілку і постать зламалася