CSS3 está empezando a cobrar impulso con muchos de los comandos descritos en el proyecto de trabajo con el apoyo de CSS3 Firefox, Safari y Google Chrome. Pensamos que habíamos reunido algunos de nuestros favoritos. Antes de empezar CSS3 comandos requieren una sintaxis navegador específico para que funcionen.

Para Mozilla Firefox que tenemos que utilizar el prefijo-moz-, por ejemplo:

-Moz-border-radius:

Y para el Safari-webkit-prefijo, por ejemplo:

-Webkit-border-radius:

1. Frontera radio

De la frontera con CSS3 comando radio, las esquinas son curvas en un elemento. En lugar de utilizar 4 o más imágenes para crear esquinas curvas usar los siguientes comandos:

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

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

2. Caja de la sombra

Una sombra se puede aplicar a los elementos con el comando cuadro de CSS3 sombra. La sombra caja acepta tres valores numéricos más un color que se aplicará este efecto. Estos números son los siguientes:

1. Distancia de desplazamiento horizontal de la sombra - Un valor positivo significa que la sombra se convierte en el derecho y un valor negativo a la izquierda
2. Distancia de desplazamiento vertical de la sombra - Un valor positivo significa que la sombra echará abajo y por encima de un valor negativo
3. ¿Cómo borrosa que le gustaría a la sombra

Con la adición de un valor de color de la sombra es completa:

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

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

3. Transparencia o RGBA

La transparencia ha sido siempre difícil. Diferentes navegadores históricamente ha aplicado la transparencia con los diferentes comandos. Continuando con esta inconsistencia entre navegadores que tenemos la adición de la propiedad CSS3 RGBA nuevo fondo, sin embargo, en principio, este comando es más lógico. El comando se compone de cuatro valores - la primera, segunda y tercera son los valores de rojo, verde y azul (0-255), respectivamente, seguido por el canal de transparencia alfa (0-1).

Para el comando RGBA los prefijos navegador específico (-moz-,-webkit-) no son necesarios:

# {Caja3
background-color: rgb (110, 142, 185, 0.5);
}

El comando color de fondo, añade un bonito color azul-gris de fondo en el 0,5 o el 50% de opacidad en los navegadores que entiendan la propiedad CSS3 RGBA.

Desafortunadamente Internet Explorer también se intentará representar el símbolo del color de fondo, pero no entiendo RGBA. Para asegurarse de que el color de fondo también se establece en el IE un hack IE-sólo se requiere. En el ejemplo siguiente: last-child selector de pseudo-que Internet Explorer no entiende que se utiliza para excluir.

cuerpo: last-child # {Caja3
/ * Excluir todos los navegadores IE con: last-child * /
background-color: rgb (110, 142, 185, 0.5) es importante;
}

4. Columnas

La posibilidad de agregar columnas ha sido añadido a CSS3. En lugar de los elementos flotantes dentro de los contenedores que puede establecer el número de columna, el ancho y el estado:

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

/ * Para Safari y Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-columna-regla: 1px solid # 6e8eb9;
}

5. Varias imágenes de fondo

Imágenes de fondo siempre ha sido restrictiva a la hora de debe al hecho de que sólo se puede aplicar una imagen de fondo por elemento CSS. Este no es el caso de CSS3 que permite múltiples imágenes por elemento con sólo comas de separación.

Para colocar una imagen en la izquierda y la derecha de un elemento que puede utilizar los siguientes comandos, con un poco de estilo:

padding: 0 20px;
}

Este comando se mal prestados por Internet Explorer, ya que no acepta dos imágenes de fondo en un solo elemento. Un truco excluir a todos los IE se requiere.

# Box5 blockquote {
/ * Para todos los navegadores, sólo un presupuesto abierto * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

cuerpo: last-child # box5 blockquote {
/ * Excluir todos los navegadores IE con: last-child * /
/ * A continuación, las dos imágenes * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Gradientes de fondo

Gradientes CSS3 de fondo son extremadamente flexibles y pueden ser utilizados para crear modelos complejos. En su forma más simple el gradiente de CSS permite un gradiente lineal que se aplica a un elemento de arriba a abajo y de izquierda a derecha.

Este ejemplo de un gradiente de CSS3 en Mozilla Firefox se aplica un gradiente de color azul claro en la parte inferior de una caja de sólo 20% de la altura de las cajas

Safari utiliza un enfoque menos intuitivo pero más flexible con los valores de color parar. Un ejemplo del código de Safari específica a continuación (tenga en cuenta el lineal se incluye entre paréntesis en vez de fuera):

# {Box8
de fondo:-webkit-gradiente (lineal, abajo a la izquierda, arriba a la izquierda, de color-stop (0, # b6ebf7), color-stop (0.20, # fff));
}

7. Rotación

CSS3 también permite la rotación de los elementos con el comando de transformación, con la propiedad de rotar la aceptación de títulos como parámetro.

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

8. Esboza

Outilines se incluyen en la especificación CSS3 y permitir que tanto una frontera y un esquema que se aplicará a un solo elemento.

La propiedad esquema es idéntico al comando frontera. La propiedad adicional de compensación sin embargo permite la frontera para alejarse un poco más dentro o fuera del elemento.

Filed under: Css por admin