¿Cómo trabajar con los módulos de CSS3

Para simplificar, los módulos de CSS3 se pueden separar en en diez categorías: bordes, fondos, fuentes, efectos de texto, múltiples columnas, transiciones, transiciones 2D, transiciones 3D, animaciones, y la interfaz de usuario. Tómese un breve vistazo a cada módulo para ver lo que puede hacer.

Fronteras: El módulo frontera amplía las capacidades de la categoría de las fronteras mediante la adición de opciones para configurar el radio de frontera para hacer esquinas curvas, la sombra cuadro para añadir sombras paralelas, y la imagen de borde para el uso de gráficos al estilo de las fronteras en lugar de utilizar un solo color por el borde.

Antecedentes: Actualmente hay tres nuevas incorporaciones a la categoría de fondo con CSS3. El tamaño de fondo es especialmente útil para la creación de gráficos escalables, el origen fondo ofrece tres lugares para colocar las imágenes de fondo en relación con el modelo de caja, y el clip de fondo permite que los colores de fondo se recortan al contenido de una caja en lugar de a los bordes de un cuadro.

Además, CSS3 ahora le permite utilizar múltiples imágenes de fondo para cualquier contenedor.

Fuentes: En lugar de estar atrapado utilizando fuentes compatibles con Web para todos sus diseños, el nuevo @Perfil delantero propiedad le permite elegir y utilizar cualquier fuente alojado en su servidor web. Lo que pasa es un .ttf (True Type Fonts) o .OTF (OpenType Fuentes) archivo de fuente se descarga automáticamente en el dispositivo del usuario, siempre y cuando no se detecta esa fuente.

Ya ha visto una función similar en la acción con sitios que utilizan fuentes de Google y fuentes Typekit. Esta regla de estilo se extiende esa capacidad por lo que le permite utilizar sus propias fuentes del sistema. Sin embargo, asegúrese de no romper las leyes de derechos de autor mediante la especificación de las fuentes de derecho de autor protegido!

Efectos de texto: En realidad, hay 11 nuevas propiedades en este módulo, pero no todos ellos tienen un importante apoyo navegador. Las propiedades que tiene actualmente el apoyo son justificar, desbordamiento, sombra, descanso palabra, y el ajuste de línea.

Varias columnas: Sin tener que utilizar contenedores o flotadores adicionales, ahora puede crear varias columnas de texto con los diez diferentes múltiples propiedades de la columna. Aunque la mayoría de ellos trabajan ahora, algunos todavía lo hacen requieren prefijos de estilo específicas del navegador. Aún así, siguen siendo bastante maldito aseado. Para obtener mejores resultados, establezca el número de columnas y el ancho hueco.

Transiciones: Apóyese en su sombrero, ahora puede crear movimiento en la página sin gifs animados, Flash o javascript! Transiciones vienen en tres sabores, regular, 2D y 3D. Con la transición regular, usted puede modificar cualquier una o más propiedades de un elemento, como la alteración de la anchura de un objeto durante un número especificado de segundos, cuando se combina con la : hover pseudo-clase.

Las transiciones 2D: Los elementos de este módulo permiten manipular las propiedades 2D de un elemento. Utilice por separado o combinados para mover, escalar, sesgar, girar, estirar y girar elementos a lo largo de un plano horizontal o vertical. Por ejemplo, usted puede hacer un cuadro de crecer y giro mientras se mueve de izquierda a derecha.

3D Transiciones: Como si las transiciones 2D no eran lo suficientemente fría, espera a ver lo que hacen las transiciones en 3D! Utilizando un método que transforma el objeto a lo largo de los ejes y o X / Y, usted puede hacer sus objetos parecen girar en el espacio 3D, proporcionando a los espectadores con la oportunidad de ver la inversa " de nuevo " lado de un objeto.

Aunque el apoyo del navegador está limitado para las transformaciones más avanzados, con el tiempo usted será capaz de rotar, escalar, y se mueve a lo largo de los ejes X, Y, y Z, entre otras cosas. Simplemente poderoso.

Animaciones: Bueno, lo que pasa cuando pones todas estas nuevas técnicas de transformación juntos? Animaciones CSS3, bebé - el tipo que puede sustituir a GIFs animados, Flash, e incluso algo de javascript. Toda la magia que sucede a través de la unión de la nueva keyframes propiedad a un selector mediante el uso de la propiedad de animación con un nombre y duración especificada.

Por ejemplo, puede cambiar la posición y el color de fondo de un objeto de forma que el objeto tiene la apariencia de morphing a través del espacio, y entonces se podría incluir el código para hacer el orden inverso de animación y continuar un bucle sin fin.

Interfaz de usuario: Con estas nuevas propiedades, puede añadir propiedades a diferentes objetos que los convierten en elementos interactivos para los visitantes del sitio. Por ejemplo, puede cambiar el tamaño de las capas y textarea campos de formulario, invocan las teclas de tabulación y de flecha en un teclado, y crear un esquema de compensación que se extiende más allá del borde fronterizo.

Ahora que tiene una visión global de los nuevos módulos, se puede encontrar más información sobre lo que pueden hacer. Por ejemplo, puede crear sombras en formas y texto, aplicar efectos de degradado de fondo, y mover los objetos de aquí para allá.