CSS3 está realmente começando a ganhar impulso com muitos dos comandos descritos no projecto CSS3 trabalhando suportado pelo Firefox, Safari e Google Chrome. Nós pensamos em reunir alguns dos nossos favoritos. Antes de começarmos CSS3 comandos exigem sintaxe navegador específico para eles trabalharem.

Para o Mozilla Firefox, precisamos usar o-moz-prefixo, por exemplo:

-Moz-border-radius:

E para o Safari-webkit-prefixo, por exemplo:

-Webkit-border-radius:

1. Raio de fronteira

O CSS3 comando raio de fronteira cria cantos arredondados em um elemento. Em vez de usar 4 ou mais imagens para criar cantos arredondados use os seguintes comandos:

/ * Para Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Para o Safari e Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Caixa de sombra

A sombra pode ser aplicada a elementos usando o comando CSS3 sombra caixa. A sombra caixa aceita três valores numéricos mais uma cor para aplicar este efeito. Esses números são:

1. Distância de deslocamento horizontal da sombra - Um valor positivo significa que a sombra vai lançar para a direita e um valor negativo para a esquerda
2. Distância de deslocamento vertical da sombra - Um valor positivo significa que a sombra vai lançar abaixo e acima de um valor negativo
3. Como você gostaria embaçada a sombra

Com a adição de um valor de cor da sombra é completa:

/ * Para Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Para o Safari e Google Chrome * /
-Webkit-box-shadow: 5px 5px 5x # b6ebf7;

3. Transparência ou RGBA

Transparência sempre foi complicado. Diferentes navegadores, historicamente, têm aplicado transparência usando comandos diferentes. Continuando esta inconsistência cross-browser, temos a adição do novo fundo de propriedade CSS3 RGBA, no entanto, em princípio, este comando é mais lógico. O comando é composto por 4 valores - o primeiro, segundo e terceiro são os valores de vermelho, verde e azul (0-255), respectivamente, seguido do canal alfa ou transparência (0-1).

Para o comando RGBA os prefixos navegador específico (-moz-,-webkit-) não são necessários:

# {Box3
background-color: rgba (110, 142, 185, 0,5);
}

O comando cor de fundo acrescenta um fundo azul-cinza agradável em 0,5 ou 50% de opacidade em navegadores que entender a propriedade CSS3 RGBA.

Infelizmente Internet Explorer também vai tentar tornar o comando cor de fundo, mas não entendo RGBA. Para garantir que a cor de fundo também é definido no IE um hack IE-only é necessária. No exemplo, o seguinte: last-child selector pseudo que o Internet Explorer não entende é utilizada para excluí-lo.

corpo: filho última box3 # {
/ * Excluir todos os navegadores IE usando: criança último * /
background-color: rgba (110, 142, 185, 0,5) importante;
}

4. Colunas

A capacidade de adicionar colunas foi adicionado ao CSS3. Ao invés de elementos flutuantes dentro de recipientes que podemos definir o número da coluna, largura e regra:

/ * Para Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-regra: 1px solid # 6e8eb9;

/ * Para o Safari e Google Chrome * /
-Webkit-column-count: 2;
-Webkit-coluna-gap: 20px;
-Webkit-coluna-regra: 1px solid # 6e8eb9;
}

5. Múltiplas imagens de fundo

Imagens de fundo sempre foi restritiva quando se trata de CSS devido ao fato de você só pode aplicar uma imagem de fundo por elemento. Este não é o caso com CSS3 que permite que múltiplas imagens por elemento simplesmente por vírgula separando-os.

Para colocar uma imagem em ambos a esquerda e direita de um elemento você pode usar os seguintes comandos, com um estilo pouco:

padding: 0 20px;
}

Este comando será mis-prestados por Internet Explorer, uma vez que não aceita duas imagens de fundo em um único elemento. Um excluir todos os hackear IE é necessária.

# Box5 blockquote {
/ * Para todos os browsers, apenas citar um aberto * /
background: url (/ i quotel.gif /) 0 0 no-repeat;
padding: 0 20px;
}

corpo: criança último # box5 blockquote {
/ * Excluir todos os navegadores IE usando: criança último * /
/ * Em seguida, as duas imagens * /
background: url (/ i quotel.gif /) no-repeat 0 0, url (/ i quoter.gif /) no-repeat 100% 0;
}

6. Gradientes de fundo

Gradientes de fundo CSS3 são extremamente flexível e pode ser usado para criar padrões complexos. Na sua forma mais simples o CSS gradiente linear permite um gradiente a ser aplicado a um elemento de cima para baixo e da esquerda para a direita.

Este exemplo de um gradiente CSS3 no Mozilla Firefox aplica um gradiente de luz azul na parte inferior de uma caixa por apenas 20% das caixas 'height

Safari usa uma abordagem menos intuitivo, mas mais flexível o uso de valores limite de cor. Um exemplo do código específico Safari segue (note o linear está incluído entre parênteses ao invés de fora):

# {Box8
background:-webkit-gradiente (baixo, linear esquerda, superior esquerdo, a cor-stop (0, # b6ebf7), cor-stop (0,20, # fff));
}

7. Rotação

CSS3 também permite a rotação de elementos usando o comando de transformação, com a propriedade de girar aceitar graus como um parâmetro.

<code> # {box9
-Moz-transform: rotate (2deg);
-Webkit-transform: rotate (2deg);
} </ Code>

8. Contornos

Outilines estão incluídos na especificação CSS3 e permitir que tanto uma borda e um esboço para ser aplicado a um único elemento.

A propriedade esquema é idêntico ao comando de fronteira. A propriedade adicional compensado no entanto permite a fronteira a ser movido mais para dentro ou fora do elemento.

Arquivado em: Css por admin