Дизайн обложки с несколькими фигурами/элементами

В настоящее время у меня есть эта часть для создания. Я изначально построил его, используя 3 отдельных контейнера квадратного квадрата с независимыми фоновыми изображениями, только что вырезанными из дизайна, но это кажется мне очень жестким (нам нужно будет нарезать и перестроить новое изображение каждый раз, когда мы хотим его изменить), а также громоздкие. В идеале я бы хотел использовать одно изображение в каждом контейнере элементов, чтобы его можно было легко обновить. Это также избавляет от двух ненужных запросов на сервер, на что я сторонник!Дизайн обложки с несколькими фигурами/элементами

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

HMTL

<div class="grid-container"> 
    <div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div> 
    <div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div> 
    <div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div> 
</div>

CSS

.gi { 
    background-position: center center; 
    background-size: cover; 
    width: 32.333%; 
} 
.grid-1 { 
    margin-right: 1%; 
} 
.grid-2 { 
    margin: 0 1%; 
} 
.grid-3 { 
    margin-left: 1%; 
}

источник

2016-01-25 Jon Hendershot

вот jsfiddle того, как я получил его установки https://jsfiddle.net/942g38qv/7/ –

Итак, я тупой и нашел простой и элегантный обходной путь! Вместо того, чтобы отсекать, я просто создал две псевдограницы для сервера как разделители внутри обертки с желаемым фоновым изображением и дал каждому правильный цвет фона. Решение & jsfiddle.

HTML

<div class="social-blocks flex" style="background-image: url(http://localhost:8888/sts-store/wp-content/uploads/2016/01/eric.jpg)"> 

    <div class="social-block auto-ar oneone flex align-center-center block-1" style="height: 381px;"> 
     <div>facebook</div> 
    </div> 
    <div class="pseudo-margin"></div> 
    <div class="social-block auto-ar oneone flex align-center-center block-2" style="height: 381px;"> 
     <div>twitter</div> 
    </div> 
    <div class="pseudo-margin"></div> 
    <div class="social-block auto-ar oneone flex align-center-center block-3" style="height: 381px;"> 
     <div>instagram</div> 
    </div> 
</div>

CSS

.align-center-center { 
    align-items: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    justify-content: center; 
    -ms-justify-content: center; 
    -moz-justify-content: center; 
    -o-justifty-content: center;  
} 
.flex { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
} 
.social-block { 
    width: 32.333%; 
    overflow: hidden; 
    position: relative; 
    color: #fff; 
    text-transform: uppercase; 
    font-weight: 600; 
    font-size: 28px; 
    font-style: italic; 
} 
.social-blocks { 
    margin-bottom: 2%; 
    background-position: center bottom; 
    background-size: cover; 
} 
.social-blocks-bg { 
    width: 100%; 
} 
.pseudo-margin { 
    width: 2%; 
    background-color: rgb(247,247,247); 
}

https://jsfiddle.net/942g38qv/8/

источник

2016-01-26 23:54:24

Дизайн обложки с несколькими фигурами/элементами

ответ

Смежные вопросы