CSS

Criar listras com CSS3

Publicado por antlou em 16/06/2017

Com o passar do tempo as ferramentas CSS3 aos poucos vai ganhando o seu devido destaque.

Anteriormente sempre que queríamos criar um fundo, era necessário a utilização de imagens ou texturas aliado à propriedade background repeat que sobrecarregava o site.
Agora com CSS3, poderá fazer de maneira fácil e simples e ainda melhorar o desempenho do carregamento do código no browser.

Vamos então utilizar a propriedade linear-gradient do CSS3 e suas variantes.

Resultado:

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Exemplo 5 - gentilmente cedido por Lea Verou

Exemplo 6 - gentilmente cedido por Lea Verou

Lea Verou criou uma galeria muito interessante, mostrando inúmeros padrões de imagens definidos com uso da função linear-gradiente().
Aconselho vivamente visitar a galeria em
http://lea.verou.me/css3patterns/

Para entender inicialmente como podemos obter explicações do(s) fundo(s) CSS3, podemos dar uma vista em
https://24ways.org/2011/css3-patterns-explained.

listras.html



<style type="text/css">
#listra1{
background: 
linear-gradient(to right,green,yellow, orange,red);
width: 300px;
height: 20px;
margin: auto 10px;
}

#listra2 {
background: 
repeating-linear-gradient 
(90deg,#FCFF7C,#FCFF7C 10px,#FFE13A 10px,#FFE13A 20px);
width: 300px;
height: 20px;
margin: auto 10px;
}

#listra3 {
background: 
repeating-linear-gradient 
(-45deg,#FCFF7C,#FCFF7C 10px,pink 10px,pink 20px);
width: 300px;
height: 20px;
margin: auto 10px;
}

#listra4 {
background: 
repeating-radial-gradient 
(circle,blue,blue 5px,gray 5px,gray 10px);
width: 300px;
height: 40px;
margin: auto 10px;
}

#listra5{
background-color:#001;
background-image: 
radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
width: 300px;
height: 75px;
margin: auto 10px;
}

#listra6{
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient 
(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, 
radial-gradient 
(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
width: 300px;
height: 75px;
margin: auto 10px;
}    
</style>

<div id="listra1">Exemplo 1</div>
<br>
<div id="listra2">Exemplo 2</div>
<br>
<div id="listra3">Exemplo 3</div>
<br>
<div id="listra4">Exemplo 4</div>
<br>
<div id="listra5"></div>Exemplo 5
<br>
<i>gentilmente cedido por <i>Lea Verou</i>
<br>
<div id="listra6"></div>Exemplo 6
<br>
<i>gentilmente cedido por <i>Lea Verou</i>
</div>

voltar para o topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 21 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.