Свойство clip-path и интересный эффект для сайта

Подписаться 109 тыс.

Просмотров 10 тыс.

50% 1

PSD to HTML. Практика верстки сайта с нуля до результата. Смотрите уроки: webformyself.com/minikurs/ver...
Исходники к уроку тут: webformyself.com/svojstvo-cli...
В предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения - будет показана полная картинка.

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

4 дек 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 31

@PalyufishkuRuSite 4 года назад

Эффект интересный, спасибо. Если бы вы в подобных видео о поддержке браузерами еще рассказывали, было бы еще лучше!

@ruspoli4487 4 года назад

Отличная штука, благодарю за урок!

@luksik0 4 года назад

Спасибо большое за вашу работу и хорошие идеи

@matroskin978 4 года назад

Пожалуйста ;)

@gritsienkooleg3447 2 года назад

Блин, это очень офигенно!спасибо!!!

@virtuoz-ru 4 года назад

Спору нет, эффект прикольный.

@chuvital 4 года назад

Спасибо! Красивый эффект.

@matroskin978 4 года назад

Пожалуйста)

@sergeyreshetnikov3968 4 года назад

Андрею лайк не глядя. Позже посмотрю, сейчас нет времени.

@matroskin978 4 года назад

Спасибо)

@valeron6971 2 года назад

Супер ! Спасибо большое !

@user-zg6cf1hu3s Год назад

Крутой эффект. В первые его увидел)

@user-hk9ec1vl8v 4 года назад

Люблю разные эффекты, но также как и масса крутых с виду шаблонов, особо нигде не применишь. Да, и гуляя повседневно по разным сайтам, везде всё стандартно, без эффектов и мудрёных шаблонов.

@matroskin978 4 года назад

Все упирается в нашу фантазию... я в сети не раз видел подборку сайтов, которые из одних эффектов из состоят, прям один сплошной эффект)

@privet_baget 4 года назад

@@matroskin978 В большинстве своем это просто понты, чтобы показать знание верстки) В коммерческих проектах за такое по голове не погладят, а то и леща отвесят))

@matroskin978 4 года назад

@@privet_baget Возможно))

@iamname8758 4 года назад

@@privet_baget зависит от целей, эффект должен быть уместен и естественно смотреться, в большинстве сайтов, это отвлекает только и нагружает человека поэтому в моде минимализм)

@user-gw7qy7ky9j 4 года назад

@@matroskin978 - сейчас люди тянутся к более простому оформлению сайтов, чтобы глаза не уставали. То есть - этакий "стильный минимализм" ;=))

@user-ro7xr6xc2l 4 года назад

Хороший пример

@hojiali2705 2 года назад

@darkshaman766 4 года назад

гуд ))))

@_slash_- 4 года назад

Прикольно

@madsparrow2484 4 года назад

Эффект классный, я его поставил на слайдер + gsap плагин. Но столкнулся с тем что clip-path не работает в Safari, Edge и Explorer. Для получения эффекта нужно вписывать в svg и использовать clip-path: url(#test);

@arturzakirov9167 4 года назад

Андрей, спасибо за то, что ты помогаешь. У меня вопрос: как ты скопировал слово не выделяя его? То есть ты поставил курсор на слово и его скопировал.

@matroskin978 4 года назад

Пожалуйста) Чтобы выделить слово, на котором стоит курсор, в Sublime Text используется комбинация Ctrl + D. Ну а для копирования - стандартное Ctrl + C.

@arturzakirov9167 4 года назад

@@matroskin978 Спасибо за ответ. Сейчас попробую