Backgrounds – Parte 1: background-clip

background-clip


A primeira novidade em Backgrounds CSS3 que vamos introduzir é a propriedade background-clip. Essa propriedade é usada para determinar se a imagem de fundo se estende até a borda ou não. Existem três opções, o padrão de border-box, padding-box e content-box. OBS: Lembrando-se que para usar a propriedade no navegador Mozilla Firefox utiliamos antes do código -moz-, e para o Safari e Google Chrome o -webkit-.

Os valores possíveis da propriedade são:

  • background-clip: border-box;

Quando border-box é usado, os backgrounds são exibidos abaixo da borda.

  • background-clip: padding-box;

A outra opção é padding-box o que significa que a imagem de fundo não vai esticar até a borda. Os backgrounds serão exibidos sobre o padding, não sobre a borda.

  • background-clip: content-box;

No content-box backgrounds exibidos sobre o conteúdo, não incluída a borda e o padding.

Exemplo background-clip: border-box

background-clip: border-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo background-clip: padding-box

background-clip: padding-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo background-clip: content-box

background-clip: content-box


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


Até o CSS3 ser oficialmente lançado, usaremos as propriedades da seguinte forma:

  • Para o Firefox:

-moz-background-clip: border;

-moz-background-clip: padding;

  • Para Safari e Chrome:

-webkit-background-clip: border;

-webkit-background-clip: padding;

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

Nenhum comentário ainda.

Join the Conversation