[ CSS ]

Home » CSS » Múltiplos background com CSS
Inscreva-se em nosso canal no Youtube Daviwp


Múltiplos background com CSS

12/04/2011 CSS (0) comentário

Testando múltiplos background no CSS3. Isso realmente funciona! 😉

Uma das features mais esperadas por mim é sem dúvida a possibilidade de podermos definir múltiplos background via CSS. Chega de elementos extras e gambiarras. No CSS3 a propriedade background ganha várias funções, dentro elas a possibilidade de definirmos várias imagens como background em um único elemento.

A sintaxe é muito simples. Na verdade, é idêntica a sintaxe existente. Segue abaixo:

div {
    width:600px;
    height:500px;
    border:1px solid black;
    background:
    url(gradiente-top.png) top left repeat-X,
    url(gradiente-baixo.png) bottom left repeat-X,
    url(gradiente-esquerda.png) top left repeat-Y,
    url(gradiente-direita.png) top right repeat-Y;
}

Veja que basta definirmos diversas vezes a propriedade URL com as imagens que escolher e pronto. Os atributos de posição e repetição continuam iguais!
É tão simples que dispensa grandes explicações. No exemplo acima usei 4 imagens em gradiente transparente. Duas para os lados e as outras duas para o topo e baixo.

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

Facebook

Publicidade