CSS3 está realmente empezando a gañar impulso con moitos dos comandos descritos no proxecto CSS3 traballando admite o Firefox, Safari e Google Chrome. Nós pensamos en montar algúns dos nosos favoritos. Antes de comezar CSS3 comandos esixen sintaxe navegador específico para eles traballaren.

Para o Mozilla Firefox, cómpre 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 mando radio de fronteira crea cantos redondeados nun elemento. En vez de usar 4 ou máis imaxes para crear cantos arredondados use os seguintes comandos:

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

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

2. Caixa de sombra

A sombra pode aplicarse a elementos de mando mediante o CSS3 sombra caixa. A sombra caixa acepta tres valores numéricos máis unha cor para aplicar este efecto. Estes números son:

1. Distancia de desprazamento horizontal da sombra - Un valor positivo significa que a sombra vai lanzar á dereita e un valor negativo cara á esquerda
2. Distancia de desprazamento vertical da sombra - Un valor positivo significa que a sombra vai publicar baixo e un valor negativo enriba
3. Como lle gustaría embaçado a sombra

Coa adición de un valor de cor da sombra é completa:

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

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

3. Transparencia ou RGBA

Transparencia sempre foi complicado. Diferentes navegadores, historicamente, teñen aplicado transparencia utilizando comandos distintos. Continuando esta inconsistencia cross-browser, temos a adición do novo fondo de propiedade CSS3 RGBA, con todo, en principio, este comando é máis lóxico. A orde está composto por 4 valores - o primeiro, segundo e terceiro son os valores de vermello, verde e azul (0-255), respectivamente e no canle alfa ou transparencia (0-1).

Para o mando RGBA os prefixos navegador específico (-MOZ-,-webkit-) non son necesarios:

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

O comando cor de fondo engade un fondo azul-gris agradable en 0,5 ou 50% de opacidade en navegadores que entender o CSS3 propiedade RGBA.

Desafortunadamente Internet Explorer tamén vai facer o mando cor de fondo, pero non entendo RGBA. Para garantir que a cor de fondo tamén é definido nun hack IE IE-only é necesaria. O exemplo a seguir a: last-child selector pseudo que o Internet Explorer non entende se usa para excluílo.

corpo: fillo última box3 # {
/ * Eliminar todos os navegadores IE usando: fillo última * /
background-color: rgba (110, 142, 185, 0,5) importante;
}

4. Columnas

A capacidade de engadir columnas foi engadido ao CSS3. En vez de elementos flotantes dentro de envases, podemos definir o número de columnas, ancho e regra:

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

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

5. Múltiples imaxes de fondo

Imaxes de fondo sempre foi restritiva á hora de CSS debido ao feito de que só pode ver unha imaxe de fondo por elemento. Este non é o caso con CSS3 que permite que múltiples imaxes por elemento, simplemente por comas separándose os.

Para colocar unha imaxe en ambos a esquerda e dereita dun elemento pode utilizar os seguintes comandos, cun estilo pouco:

padding: 0 20px;
}

Este comando se mis-prestados por Internet Explorer, xa que non acepta dúas imaxes de fondo en un único elemento. Un eliminar todos hackear IE é necesaria.

# Box5 blockquote {
/ * Para todos os navegadores, só unha aspa de apertura * /
background: url (/ i quotel.gif /) 0 0 no-repeat;
padding: 0 20px;
}

corpo: neno último # box5 blockquote {
/ * Eliminar todos os navegadores IE usando: fillo última * /
/ * A continuación, as dúas imaxes * /
background: url (/ i quotel.gif /) no-repeat 0 0, url (/ i quoter.gif /) no-repeat 100% 0;
}

6. Gradientes de fondo

Gradientes CSS3 fondo son moi flexibles e poden ser usados ​​para crear estándares complexos. Na súa forma máis simple do CSS gradiente lineal permite un gradiente a ser aplicado a un elemento de arriba abaixo e de esquerda a dereita.

Este exemplo dun gradiente CSS3 no Mozilla Firefox aplica un gradiente de luz azul na parte inferior dunha caixa por só 20% das caixas 'height

Safari usa un enfoque menos intuitivo, pero máis flexible o uso de valores límite de memoria. Un exemplo do código específico Safari segue (nótese o lineal está incluído entre parénteses en vez de fóra):

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

7. Rotación

CSS3 tamén permite a rotación de elementos usando o comando de transformación, coa propiedade de xirar aceptar graos como un parámetro.

<code> # {box9
-MOZ-convertela: quenda (2deg);
-Webkit-convertela: quenda (2deg);
} </ Code>

8. Contornos

Outilines están incluídos na especificación CSS3 e permitir que tanto un bordo e un esbozo se aplica a un único elemento.

A propiedade esquema é o mesmo que o mando de fronteira. A propiedade adicional compensado con todo permite a fronteira para transferir máis para dentro ou fóra do elemento.

Arquivo en: CSS by admin