Criei um fundo de listras coloridas inspirado na imagem do cabeçalho de http://www.wearejh.com .
Antes de começarmos…
Eu uso prefixfree para evitar o inferno do prefixo do fornecedor … você também deveria!
http://leaverou.github.com/prefixfree
Aqui vamos nós
Listras coloridas (CSS)
body {
background:
/* single */
linear-gradient(top, #ff0 0%, #f00 100%),
linear-gradient(top, #e20687 0%, #a21465 100%),
linear-gradient(top, #d8479e 0%, #a1c4d1 100%),
linear-gradient(top, #f9d307 0%, #8cc9d7 100%),
linear-gradient(top, #0077aa 0%, #50a3d8 100%),
linear-gradient(top, #a1c4d1 0%, #d8479e 100%),
/* master */
linear-gradient(left,
#1e5799 4%,
#1f9b7e 4%,
#1f9b7e 8%,
#fff 8%,
#fff 10%,
#5d24b7 10%,
#5d24b7 11%,
#be2e2e 11%,
#be2e2e 13%,
#fff 13%,
#fff 15%,
#d6942a 15%,
#d6942a 17%,
#b8d899 17%,
#b8d899 21%,
#fff 21%,
#fff 27%,
#8ace31 27%,
#8ace31 34%,
#fff 34%,
#fff 36%,
#f6b818 36%,
#f6b818 40%,
#e63737 40%,
#e63737 44%,
#fff 44%,
#fff 52%,
#f00 52%,
#f00 54%,
#fff 54%,
#fff 60%,
#e20687 60%,
#e20687 64%,
#fff 64%,
#fff 70%,
#8cd5f7 70%,
#8cd5f7 72%,
#fff 72%,
#fff 73%,
#ec6529 73%,
#ec6529 74%,
#fff 74%,
#fff 75%,
#d6942a 75%,
#d6942a 76%,
#fbe90f 76%,
#fbe90f 81%,
#fff 81%,
#fff 85%,
#1e5799 85%,
#1e5799 88%,
#8ace31 88%,
#8ace31 89%,
#fff 89%,
#fff 92%,
#ffe60a 92%,
#ffe60a 94%,
#f70909 94%,
#f70909 96%,
#8ace31 96%,
#8ace31 99%,
#fff 99%,
#fff 100%
);
background-size:
/* single */
2% 100%,
3% 100%,
5% 100%,
2% 100%,
1% 100%,
2% 100%,
/* master */
100% 1em
;
background-position:
/* single */
12%,
23%,
48%,
55%,
59%,
64%,
/* master */
0%
;
background-repeat:
/* single */
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat,
/* master */
repeat
}Gradientes únicos – de cima para baixo
Os gradientes únicos têm um específico background-sizee background-repeatporque não quero que preencham o todo body.
A posição é definida por background-position.
Gradiente mestre – da esquerda para a direita
O gradiente mestre preenche o todo body.