MÚLTIPLOS BACKGROUNDS (CSS3 – HTML5)

Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos lados? Você sabe que para criar algo parecido você não pode utilizar uma imagem só. A solução até hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedaço deste background em cada um destes elementos para dar a sensação de um background único. O resultado é interessante mas o meio que isso é feito não é nada bonito. Você era obrigado a declarar 4 elementos “inúteis“ no seu HTML apenas para compensar um efeito visual. A possibilidade de atribuirmos múltiplos backgrounds em apenas um elemento é a feature que vai ajudá-lo a não sujar seu código.
A sintaxe para múltiplos backgrounds é praticamente idêntica a sintaxe para definir um background. Segue abaixo um exemplo:

div {
width:600px;
height:500px;
background:
url(img1.png) top left repeat-X,
url(img2.png) bottom left repeat-Y;
}

Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter apenas um valor como normalmente fazemos, poderá haver vários, com suas respectivas definições de posição, repeat e attachment (fixed).

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s