¿Cómo trabajar con módulos de css3

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

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

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 de fondo ofrece tres ubicaciones para posicionar las imágenes de fondo en relación con el modelo de caja, y el clip de fondo permite que los colores de fondo a ser recortados al contenido de una caja en lugar de a los bordes de una caja.

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

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

Video: Creación de Entorno de trabajo para edición de HTML5 y CSS3

Ya ha visto una característica similar en acción con los sitios que utilizan fuentes de Google y fuentes Typekit. Esta regla de estilo se extiende por esa capacidad que le permite utilizar sus propias fuentes del sistema. Sin embargo, asegúrese de no romper ninguna ley de derechos de autor mediante la especificación de fuentes protegidas de derechos de autor!

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

Video: Curso VBA Access. Módulos de clase I. Vídeo 37

Múltiples Columnas: Sin tener que utilizar recipientes o flotadores adicionales, ahora puede crear varias columnas de texto con las propiedades de las columnas múltiples diez diferentes. 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 ordenada. Para obtener los mejores resultados, establezca el número de columnas y la anchura de la separación.

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

Video: tutotrial html 5 y css 3 | contenedor con efecto hover

Las transiciones 2D: Los elementos de este módulo le permiten manipular las propiedades 2D de un elemento. Utilice ellos por separado o combinado para mover, escalar, sesgar, vuelta, estirar, y gire elementos a lo largo de un plano horizontal o vertical. Por ejemplo, se puede hacer una caja de cultivo y el giro mientras se mueve de izquierda a derecha.

Las transiciones en 3D: Como si las transiciones 2D no eran lo suficientemente fría, esperando hasta que vea lo que hacen las transiciones en 3D! El uso de un método que transforma el objeto a lo largo del eje Y, X y / o, puede hacer que los objetos parecen girar en el espacio 3D, ofreciendo a los espectadores la oportunidad de ver el lado invertido “atrás” de un objeto.

Video: Aprender a usar porcentajes CSS

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

animaciones: Está bien, ¿qué ocurre cuando pones todas estas nuevas técnicas de transformación juntos? animaciones CSS3, bebé - el tipo que puede sustituir a GIF animados, Flash, e incluso algo de javascript. Toda la magia sucede por medio 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 una duración especificada.

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

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

Ahora que tiene una visión general 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 fondo del gradiente, y mover los objetos de aquí para allá.