Тёмный

Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером. 

Фрілансер по життю
Подписаться 315 тыс.
Просмотров 58 тыс.
50% 1

Часто бывает, что в макетах дизайна объект выходит за пределы сетки (ограничивающего контейнера). Я придумал интересное решение и хочу с тобой поделиться.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

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

 

23 май 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 318   
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Сталкивались с таким? 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle
@InspireInki
@InspireInki 4 года назад
Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?
@AlexeyKhachaturyan
@AlexeyKhachaturyan 4 года назад
Было бы не плохо добавить не только по классу но и по id определять уникальный элемент) это Я про github.com/FreelancerLifeStyle/dynamic_adapt
@GANGST1ER
@GANGST1ER 3 года назад
Почему-то по формуле изображение всё равно внахлёст. Уже несколько раз переписал. В чём может быть проблема? Даже строчка в строчку по видео.
@ilgizreklama
@ilgizreklama 3 года назад
@@GANGST1ER возможно где то лишний или недостающий "} " , У меня однажды из-за одной лишней скобки пришлось долго помучаться
@ilgizreklama
@ilgizreklama 3 года назад
@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))
@svhanz
@svhanz 4 года назад
Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти! Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит! Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая? Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике. Спасибо за очередную работу!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста! Рад что полезно!
@MrSvitS1337
@MrSvitS1337 4 года назад
Оо я пару дней назад верстал по макету подобный сайт, я так намучился с этим, сказал дизайнеру что у него беды с башкой, а оказывается это у меня
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Ахах)
@MilenaAdelin2207
@MilenaAdelin2207 4 года назад
😄
@al77ex1
@al77ex1 4 года назад
Ох и заковыристая это всегда была задача. Очень хорошее решение! Посмотрел с большим интересом.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@BohdanVR666
@BohdanVR666 3 года назад
Я не понимаю, так мало подписчиков потому что слишком годный и полезный контент? Это же рай для начинающих (да и не только) верстальщиков
@lilrepa3125
@lilrepa3125 4 года назад
Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо большое!
@user-rq8ux7xz3e
@user-rq8ux7xz3e 4 года назад
Большое спасибо за такое полезный видеоурок! Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал! Ещё раз спасибо "Сэнсэй"!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@user-dn4mc6nq8t
@user-dn4mc6nq8t 4 года назад
Отличный контент!!! Все примеры вёрстки сохраняю на будущее . Спасибо за всё
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-jq6tr6rr8v
@user-jq6tr6rr8v 4 года назад
Спасибо большое за то что делишься знаниями !!!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-yi9pq3th4o
@user-yi9pq3th4o 3 года назад
Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.
@user-uz2qh1wx9w
@user-uz2qh1wx9w 4 года назад
Евген, ты меня каждый день спасаешь! на все вопросы ответы у тебя нахожу! спасибосики огроменные, жму руку!! F
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Я рад!
@konstantino7016
@konstantino7016 3 года назад
Очень интересно и познавательно! Спасибо Женя за классный урок👍
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Пожалуйста!
@user-nb8ex1tq6r
@user-nb8ex1tq6r 3 года назад
Спасибо за мега-крутой и полезный урок! 😎💪
@user-xy9su5eg8q
@user-xy9su5eg8q 2 года назад
Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.
@123arwel
@123arwel 4 года назад
Как всегда, шикарно)) Спасибо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@doomymax577
@doomymax577 4 года назад
Мне кажется Евгений для меня стал единственным полезным верстальщиком во всем ру ютубе
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@winsol5103
@winsol5103 4 года назад
Наимощнейше? - КОНЕЧНО! спасибо за твои труды )
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@subaruforester8332
@subaruforester8332 4 года назад
Вот именно это я и искал! Очень круто и огромное спасибо!!!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@kirillv4205
@kirillv4205 4 года назад
Лайк и комментарий. Таких видео должно быть больше.
@Mani_Fast
@Mani_Fast 4 года назад
Согласен меня очень мотивируют видосы
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!!
@user-cq4gz1oi7f
@user-cq4gz1oi7f 4 года назад
Женя спасибо за видео.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-vn4wi1zo7e
@user-vn4wi1zo7e 3 года назад
Ты - гений! Сильно помог с моей проблемой. Спасибо!
@user-expert_2023
@user-expert_2023 4 года назад
Очень классное решение! Спасибо Женя!!!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-xd6rb3zg4r
@user-xd6rb3zg4r 4 года назад
Спасибо тебе Жека огромное!!! Крепкого тебе здоровья и ручки чтоб не болели... :-)!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@alexkam8934
@alexkam8934 4 года назад
С бубном я уже потанцевал))) Красавчик! И весело и по делу.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@Mani_Fast
@Mani_Fast 4 года назад
Классные видио продолжай в том же духе МОЛОДЕЦ в будущем я поддержу канал!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@user-be4so3sh2f
@user-be4so3sh2f 4 года назад
Oчень полезная фишечка по адаптиву!!! Автор красавчек!!!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@dimasavchenko9150
@dimasavchenko9150 4 года назад
Только ночью верстал такой блок)) правда, до адаптива не дошел. Как раз вовремя, спасибо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@BMikel
@BMikel 2 года назад
Мне дико нравится это... "у нас все, казалось бы, классно работает, НО.... " и дальше пошла жара. Люблю такое.
@veaceslavbalanetchi8347
@veaceslavbalanetchi8347 4 года назад
Жека привет,лайк тебе.мне как для новичка полезная инфа,зачастую мне не нравилось как вели себя контент и картинка в одной и той же секций(я про свои работы),а тут совсем другой подход,обязательно попробую,спасибо.
@kotlancer
@kotlancer 3 года назад
Сегодня использовал твоё решение в проекте, всё работает, как часы! Респект, Женя, давай еще! :))
@antonshcherban2100
@antonshcherban2100 2 года назад
Евгений дай Бог здоровья тебе и твоим близким, многих верстал ты вывел из депрессии )))
@ye5275
@ye5275 2 года назад
Огромное спасибо! Просто супер решение!
@evgeniysalabaykin7201
@evgeniysalabaykin7201 4 года назад
Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-rt4kw1qu5l
@user-rt4kw1qu5l Год назад
Как раз такая-же ситуация была. А выход оказался под рукой!)
@user-ki1ej9gg6t
@user-ki1ej9gg6t 4 года назад
Привет,очень понравился твой ролик. Контент как всегда на высоте) Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении: Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))
@jiza2377
@jiza2377 4 года назад
Самые больные темы верстальщика затрагиваешь, очень круто!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Я рад)
@user-wk4fi8vm9g
@user-wk4fi8vm9g 4 года назад
Годнота!) супер, спасибо, Жека 😊👍
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@vollex_frontend
@vollex_frontend 2 года назад
СПАСИБО, ЧТО ТЫ ЕСТЬ!
@soya-untara.9434
@soya-untara.9434 3 года назад
Наконец-то справился :) Спасибо Жека! И людям что в комментариях пишут у кого-то подцепил похожую проблему, у другого её решение :)
@const-shish
@const-shish 4 года назад
Евгений, благодарю
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@MaximVernigorov
@MaximVernigorov 3 года назад
Это просто взрыв мозга! Но это то что я искал , спасибо!
@user-ri1ry7sx6p
@user-ri1ry7sx6p 4 года назад
Спасибо, за новый скилл нам)).
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@energiekost
@energiekost 4 года назад
Жека, спасибо большое!! Ты крут!!! 🔥💪
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@anatolygalkin1323
@anatolygalkin1323 4 года назад
Спасибо большое, отличная работа, однозначно в копилку! Я только добавил для .section__container ширину 100%, с малым контентом сжимался контейнер.
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Вариации безграничны, главное это надежность
@user-pn2ev2je2l
@user-pn2ev2je2l 4 года назад
Благодарю Вас за видео.
@MilenaAdelin2207
@MilenaAdelin2207 4 года назад
Ну що тут скажеш, контент як завжди на висоті по користі , подачі. Дякую 👍
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Будь ласка
@ilyaprotsenko1023
@ilyaprotsenko1023 Год назад
Женя, красно тобі дякую! Щоб я без тебе робив!
@gerompauel
@gerompauel 2 года назад
Это единственный канал, где я нашел годное решение данного вопроса
@user-eb5zg9qp4l
@user-eb5zg9qp4l 7 дней назад
Дякую тобі, це надзвичайна інформація, якої я більше ніде не зустрічав, це факт!🫡
@PavelM01
@PavelM01 2 года назад
Класс! Чудеса математики ))) Спасибо
@brodyagaPATY
@brodyagaPATY 4 года назад
Огонь 🔥🔥🔥🔥🔥🔥🔥 спасибо Жека🙏
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@Sweet_and_joy
@Sweet_and_joy Год назад
Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть
@yuriy2109
@yuriy2109 Год назад
Спасибо! Все повторил. Получилось. До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.
@modusvivaldi7701
@modusvivaldi7701 3 года назад
Крутое решение, особенно калькуляция в конце. Спасибо! Как дополнение: раз уж мы используем object-fit и, стало быть, не поддерживаем IE, то можно параметризовать ширину контейнера (которая 1320px) и горизонтальные padding'и с помощью custom properties, calc станет нагляднее. И любопытный момент: после сдвига .section__image с помощью transform: translateX(-100%) горизонтальное переполнение у меня исчезло само собой, накидывать overflow-x: hidden на .section не пришлось. Интересно, почему. Chrome 85, Firefox 81.
@dimadiv6583
@dimadiv6583 2 года назад
Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.
@YarkiiYa
@YarkiiYa 4 года назад
Спасибо! Отправляем тебя в тренды !!!!!!! PUSH
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@stra1f595
@stra1f595 3 года назад
trend.push("Фрилансер по жизни - IT и фриланс");
@user-fg5cd3mv2z
@user-fg5cd3mv2z 11 месяцев назад
Просто лучший!
@ilya2839
@ilya2839 2 года назад
Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !
@Ferisol
@Ferisol Год назад
3 дня эт ерунда я неделю мучился правда я в этой теме всего 2 недели но всё же так долго решать даже для новичка зазорно и удачи с проектоми.
@popovvv
@popovvv 4 года назад
Каеф. Привет из Сум!
@eduardoaslanyan1168
@eduardoaslanyan1168 4 года назад
Жень, подскажи, пожалуйста, шрифт, что используется в макете, на котором объяснял в начале видео, где написано "Shedule a Call with Our Specialist"
@Olga-gb8vz
@Olga-gb8vz 4 года назад
зубодробительная штучка. спасибо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@user-sc6ug8wi3s
@user-sc6ug8wi3s 4 года назад
Ты просто чудо!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@user-gw7zj9gh5v
@user-gw7zj9gh5v 3 года назад
Супер!!! Я наверное так никогда не смогу...(((
@user-wf4np1ne2c
@user-wf4np1ne2c 4 года назад
Жека, как всегда видос на высоте))) Если кто-то скажет за вложенность, никого не слушай, они не шарят в его силе)))
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Ахах, та пусть говорят что хотят)
@user-wf4np1ne2c
@user-wf4np1ne2c 4 года назад
@@FreelancerLifeStyle верно)
@DogSayWaf
@DogSayWaf 4 года назад
Просто лучший!!! Срочно открывай свою школу!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! Курс попросьбе зрителей планируется на осень
@tommyhellerhound
@tommyhellerhound 4 года назад
Жека, спасибо, лайк!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Пожалуйста!
@zizzxiii2714
@zizzxiii2714 4 года назад
С первого заказа с фриланса стану патроном
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@thevalkk5301
@thevalkk5301 4 года назад
Очень качественный контент, продолжай в том же духе!!! Какой программой для макетов ты пользуешься ?
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо! Вот ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Mo8m8SW_8H0.html
@tochcha2971
@tochcha2971 Год назад
Дуже потрiбна реч!
@KindCat21
@KindCat21 4 года назад
Жека, как всегда лучший! Спасибо тебе! Но есть вопрос: где взять мотивацию в нынешнее время, чтобы не забросить поприще верстальщика?
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Может тут что поможет ru-vid.com/group/PLM6XATa8CAG5tj86KRCFVbPodt5TGQEF9
@BohdanVR666
@BohdanVR666 3 года назад
У меня вопрос: значение px привязано к размерам пикселей на мониторе? Тоесть если я просмотрю одинаковые элементы на сайте на, например, HD и FullHD мониторе, то позиции элементов будут различаться?
@sherf2014
@sherf2014 Год назад
Очень классное объяснение, и очень годный контент, Спасибо большое!👍 Но как можно поступить с отрицательным margin при отзывчивом адаптиве?
@user-kq1zq8pf8b
@user-kq1zq8pf8b 3 года назад
Как же сделать картинку слева, а контент справа? Пожалуйста, помогите
@nazararchakov8903
@nazararchakov8903 3 года назад
тоже мучаюсь и не могу понять))
@ViTheBraviest
@ViTheBraviest 3 года назад
Сначала пишешь див с картинкой, а потом див с body. Просто порядок меняй и все
@arturka9125
@arturka9125 3 года назад
flex-direction: row-reverse
@lanash1055
@lanash1055 2 года назад
html-структуру оставляем такой же; в css для блока .section добавляем flex-direction: row-reverse; для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px); вроде, так получается перевернуть
@JUN-17
@JUN-17 Год назад
Но ведь, если ширина экрана будет большой (больше 1360px), например 4000px, то всё будет выглядеть очень плохо.
@dmytro_b4
@dmytro_b4 4 года назад
Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(
@mirzomuminsobirjonov1104
@mirzomuminsobirjonov1104 4 года назад
Привет Жека, классный видео получился.Спасибо...а будет видео по валидации формы?
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Будет!
@sharomet
@sharomet 3 года назад
Круто. Спасибо. Я когда-то мучился с подобными блоками. Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 40/60 это не заметная проблема, но если использовать 50/50 то чётко видно что блок не по центру относительно всего контента. Возможно нужно заменить vw на проценты Я исправил это вот так: flex: 0 0 50%; // Для 50/50
@user-cu9vr9ve8m
@user-cu9vr9ve8m Год назад
Я добавил в конце calc такое выражение "- (100vw - 100%) / 2", где 100vw - 100% для боди высчитает ширину скролла (это 17px в хроме), а делить на 2 нужно, поскольку margin слева и справа уменьшатся равномерно, а значит контент в контейнере уедет влево всего на 8,5px (17/2). Объяснять это не мое, но я пытался) Главное, что работает и для 50% и для 60%, и любых других. Например для (min-width: 1240px): было flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px)); стало flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px) - (100vw - 100%) / 2);
@user-ye7ko7oj1n
@user-ye7ko7oj1n 4 года назад
ЖЕК, привіт. А це та сама техні, що ти використовував для макета сайта велосипеда в відео про "адаптив, бутстрап більше не треба"?
@ytachkadak7599
@ytachkadak7599 3 года назад
лучшие видосы! ты ТОП!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 года назад
Спасибо!
@bestlife9681
@bestlife9681 4 года назад
Приятно смотреть и слушать профессионально до мелочей Если был рейтинг у вас было бы достойное место . Есть одна просьба расскажите по какому принципу пишутся названия классов и вложенности в них. Не могу продвигаться в обучении пока не пойму все мелочи которые определяют качество на сколько я понимаю. Заранее спасибо !!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо, о нейминге тут ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HihYQVuH64U.html
@bestlife9681
@bestlife9681 4 года назад
@@FreelancerLifeStyle спасибо !!!!!!!!
@volodyanalamaf9188
@volodyanalamaf9188 4 года назад
Жекич лучший!
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@egorburunkov3842
@egorburunkov3842 3 года назад
Никак не могу дойти до решения реализации обратной ситуации (изображение - слева, контент - справа)
@const1525
@const1525 3 года назад
Нашел?)
@deckards6288
@deckards6288 3 года назад
@@const1525 Та же фигня, сейчас пробовать буду)
@const1525
@const1525 3 года назад
@@deckards6288 Если получится, отпишись))
@deckards6288
@deckards6288 3 года назад
@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.
@battalov_u
@battalov_u 10 месяцев назад
Подскажите пожалуйста, если использовать в этом случае bootstrap, то будет ли легче реализовать эту задачу? будет ли проще?
@valentine.samoylov
@valentine.samoylov 4 года назад
Отличное видео! (Я даже знаю где я смогу это применить 🤔☺️)
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Супер!
@vitaliy_vasylykiv
@vitaliy_vasylykiv 2 года назад
Видео действительно полезное, спасибо. Я верстал сайт где был похожий блок. Можешь подсказать как сделать такой блок, но изображение слева. Попытался что-то намудрить и не получилось.
@user-ye7ko7oj1n
@user-ye7ko7oj1n 3 года назад
Ніфіга не зрозумів, але цікаво і виглядить кльово. Треба пальчиками повторити те що в відео - тоді дійде. )))
@meidro_
@meidro_ 3 года назад
Приветствую. Скажите пожалуйста что за музыка играет в начале?
@niceman5890
@niceman5890 Год назад
Спасибо
@azharkiosse4132
@azharkiosse4132 2 года назад
Крутое видео! Можешь подсказать как сделать если изображение слева?
@baigeldysultanov
@baigeldysultanov Год назад
This is awesome !
@volodymyrpasenchenko5338
@volodymyrpasenchenko5338 Год назад
Мені здається, що з формулою все набагато простіше. flex: 0 0 calc(50vw - (0.4 - 0.5) * 1320px) = flex: 0 0 calc(50vw + 132px)(просто підрахувати). По центру екрану розташований контейнер 1320рх(згідно макету). Слайд повинен в ньому займати ширину 60%(50% + 10%). При збільшенні екрану з 1360рх нам просто потрібно до 50vw додавати 10% від нашого контейнера(1320*0,1 = 132рх). Таким чином набагато простіше рахувати. Треба, на приклад, 70% слайду бачити в контейнері - просто до половини екрану додаємо вже 20%, від контейнера flex: 0 0 calc(50vw + 264px). Розрахунок: 1320*0,2 = 264рх.
@pestovavalentina1258
@pestovavalentina1258 3 года назад
Супер! В IE не работает (windows 7). Может для него надо фоном встраивать или как?
@igryanulgrom7748
@igryanulgrom7748 3 года назад
может все-таки flex: 0 0 calc(50vw + (% - 0.5) * (widthcontainer)); для @media (min-width:widthcontainer) потому, что если минус, то с 40% ширины картинки например, получится flex 0 0 (50vw - (отрицательное число)) или flex 0 0 >50vw P.S просто у вас для min-width 767 картинка 60%, а далее везде 40%..
@redsm0ke19
@redsm0ke19 3 года назад
Решение действительно классное, спасибо большое! Есть только один вопрос, данным методом можно ли как то ограничить высоту самой картинки, ведь сейчас она регулируется падингом ? К примеру на макетной ширине все смотрится круто, но когда разрешение экрана по ширине, к примеру, 4000px то картинку расфигачивает по высоте чуть ли не на весь вьюпорт, а текст как был своего размера, так и остался. Я понимаю что можно сделать адаптивный шрифт, что бы он тоже увеличивался пропорционально вьюпорта, но тем не менее, можно как то ограничить картинку по высоте ?
@user-cu9vr9ve8m
@user-cu9vr9ve8m 2 года назад
Можно убрать падинг у .section__image и задать нужною высоту для .section__content через свойство min-height. Тогда фотка будет под контент подстраиваться, а не наоборот
@andrijkotscherga1705
@andrijkotscherga1705 Год назад
ДЯКУЮ це те що я шукав
@vadymstebakov7023
@vadymstebakov7023 4 года назад
норм решение) а вы чекали кроссбраузерность в Эдже или в десктопном Сафари? (за ИЕ молчу)
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
ЭДЖ без проблем, ПК сафари под рукой нет (я на винде) но тут ничего такого нет, должно работать)
@user-iq3vi6bm8j
@user-iq3vi6bm8j 4 года назад
Лайк не глядя!)
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Спасибо!
@arthurliashenko3929
@arthurliashenko3929 3 года назад
А я раньше раньше делал просто абсолютом, top: 0; right: 0; и родителю контейнера relative, и вроде тоже норм получалось )
@user-in1en4sl9y
@user-in1en4sl9y 4 года назад
Привет! Всё супер, правда я 2 варианта альтернативных на вскидку уже вижу, как добиться того же, только без calck, Да и кода гораздо по меньше. Если не поленюсь, и ты не будешь против, потом здесь скину ссылку на примеры
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Буду ждать. Только нужно оставить ограничивающий контейнер, отступы не дают нужного результата
@user-in1en4sl9y
@user-in1en4sl9y 4 года назад
@@FreelancerLifeStyle ну примерно как то так, на скорую руку jsfiddle.net/bilder/emc10vus/ - пойдёт? Я навскидку предполагал просто)
@user-in1en4sl9y
@user-in1en4sl9y 4 года назад
@@FreelancerLifeStyle Ну чё, норм решение, Евгений? Кстати в моём решении, что бы прям всё было вообще идеально(хотя для 99% и без калька норм), то достаточно добавить всего один медиа запрос, с размером основного общего контейнера @media only screen and (min-width: 900px){ .general { background-position: calc(40vw + (100vw - 900px)/10) center; } } этот размер для jsfiddle.net/bilder/emc10vus/
@user-hg5sc1yi8t
@user-hg5sc1yi8t 4 года назад
Cупер! Как раз недавно завался этим вопросом Подскажи, какую комбинацию используешь для перевода с одной строчки в столбик 09:27?
@FreelancerLifeStyle
@FreelancerLifeStyle 4 года назад
Мой редактор (VS Code) сам форматирует при сохранении. Вот настройка ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nxCLXMBl4e4.html
Далее
1🥺🎉 #thankyou
00:29
Просмотров 22 млн
1🥺🎉 #thankyou
00:29
Просмотров 22 млн