@Zewkin
Я у мамы фронтэндер

Как сверстать шапку?

Привет!

36cbc0fc15c84011a9c3626f32d50c25.png

Есть макет, в макете есть шапка, у шапки ширина 100% и сверху "радуга", как на рисунке. Ширина каждой цветной полосочки - 100 пикселей. Пока идеи такие:

1) Градиент - не получится задать ширину "цвета" в 100 пикселей
2) Сделать длинную одну картинку - возможно, но решение не кажется красивым

Еще идеи? Спасибо.
  • Вопрос задан
  • 388 просмотров
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Это нужно делать градиентом:
- сверстать 6 цветов градиентом,
- поставить background-size: 600px 4px — чтобы каждая полоска была равно 100px,
- повторять фон только горизонтально background-repeat: repeat-x;

.container {
    margin: auto;
    background: #FFF;
    max-width: 960px;
    background-image: linear-gradient(to right,
        #50B5AD 0%,     #50B5AD 16.67%,
        #FFBBB7 16.67%, #FFBBB7 33.33%,
        #F8506C 33.33%, #F8506C 50%,
        #ADB347 50%,    #ADB347 66.67%,
        #F5CE42 66.67%, #F5CE42 83.33%,
        #A2DBD6 83.33%, #A2DBD6 100%);
    background-size: 600px 4px;
    background-repeat: repeat-x;
}


codepen.io/paulradzkov/pen/eZydxg
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@lemme
Frontend
Можно тенями.
div {
	box-shadow: 
							600px 0 0 2px #2c3e50,
							500px 0 0 2px #e74c3c,
							400px 0 0 2px #f1c40f,
							300px 0 0 2px #9b59b6,
							200px 0 0 2px #3498db,
							100px 0 0 2px #2ecc71,
							0 0 0 2px #1abc9c;
}
Ответ написан
Комментировать
Ответ написан
Комментировать
qork
@qork
{ background: #F00B42 }
Максимальная ширина полоски предусматривает количество li-элементов.
codepen.io/anon/pen/BKJLmb
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
А нельзя вместо 100px использовать %, раз уж контейнер в %.
Но можно задать несколько background
background-color:#fff,#ff3,#ddd;
 background-position:0 0, 100px 0, 200px 0;

только не 3 прописать, а 29 или сколько там надо Вам. Или вместо background-color, background-image
Можно сделать и в js. Вычислить ширину родителя, разбить на куски по 100px и т.д.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы