Адаптивный фон с изображением для сайта
 | |
| Вашему вниманию оригинальный вариант на адаптивный фон для сайта, где присутствует несколько изображений, и также можно поставить под ссылку. В этом материале представлено оригинальный дизайна на адаптивный фон для сайта, где имеет отдельное изображение, которое можно поставить под ссылку на переход. Также здесь представлено несколько оттенков палитры в темной гамме. Что аналогично выставлены под ссылки, что не стал убирать, возможно кто то воспользуется, так как можно поставить тематические картинки. Чем уже становится экран, тем изображение автоматически становится меньше. что все смотрится корректно. Всем веб разработчиками известно, что теперь с обновлением, адаптивный фон является обязательным атрибутом для любого тематического интернет ресурса или современной площадки. Также его основном можно видеть на одностраничных сайтах-визитках, где всегда можно найти оригинальный эффект. Теперь вообще трудно представить сайт, который красиво оформлен по дизайну, где также закреплен за ним адаптивный фон и несколькими картинками. При проверки на работоспособность:  Приступаем к установке: HTML Код <div id="begaqu-ickonton"> <a href="" class="kesaroduction01" target="_blank"> <img src="http://zornet.ru/ABVUN/Anisa/minions_PNG17.png" /> </a> <svg class="clip-svg" width="0" heigh="0"> <defs> <clipPath id="kesaroduction01" clipPathUnits="objectBoundingBox"> <polygon points="0 0, 1 0, 0.75 1, 0 1" /> </clipPath> </defs> </svg> <a href="" class="kesaroduction02" target="_blank"></a> <svg class="clip-svg" width="0" heigh="0"> <defs> <clipPath id="kesaroduction02" clipPathUnits="objectBoundingBox"> <polygon points="0.25 0, 1 0, 0.75 1, 0 1" /> </clipPath> </defs> </svg> <a href="" class="kesaroduction03" target="_blank"></a> <svg class="clip-svg" width="0" heigh="0"> <defs> <clipPath id="kesaroduction03" clipPathUnits="objectBoundingBox"> <polygon points="0.25 0, 1 0, 0.75 1, 0 1" /> </clipPath> </defs> </svg> <a href="" class="kesaroduction04" target="_blank"></a> <svg class="clip-svg" width="0" heigh="0"> <defs> <clipPath id="kesaroduction04" clipPathUnits="objectBoundingBox"> <polygon points="0.25 0, 1 0, 1 1, 0 1" /> </clipPath> </defs> </svg> </div> CSS Код body{ margin:0; text-align:center; } #begaqu-ickonton{ position:relative; display:block; width:100%; height:100vh; overflow:hidden; } #begaqu-ickonton a{ position:absolute; display:block; } #begaqu-ickonton svg{ position:relative; } .kesaroduction01{ background:#222; height:100vh; width:30%; clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); clip-path: url('#kesaroduction01'); -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); } a.kesaroduction01 img{ width:initial; height:100%; } .kesaroduction02{ z-index:5; background:#111; height:100vh; width:35%; top:0; left:20%; clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); clip-path: url('#kesaroduction02'); -webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); } .kesaroduction03{ z-index:5; background:#222; height:100vh; width:35%; top:0; left:45%; clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); clip-path: url('#kesaroduction03'); -webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); } .kesaroduction04{ background:#111; height:100vh; width:30%; top:0; right:0; clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); clip-path: url('#kesaroduction04'); -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); } Само создание фона не составит многого труда, где будет отличатся от стандартного вида. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
