Scribd
Cargar
96 vistas

Modulo 3 - CSS3

Este documento presenta las principales novedades de CSS3 como bordes y fondos, efectos de texto y fuentes, transformaciones 2D y 3D, transiciones, animaciones y múltiples columnas. También explica los conceptos básicos de diseño responsive como el uso de viewport, valores relativos y media queries para adaptar el diseño a diferentes dispositivos. Incluye demos para ilustrar las características de CSS3.

Cargado por

Skinner Abelardo
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
96 vistas

Modulo 3 - CSS3

Este documento presenta las principales novedades de CSS3 como bordes y fondos, efectos de texto y fuentes, transformaciones 2D y 3D, transiciones, animaciones y múltiples columnas. También explica los conceptos básicos de diseño responsive como el uso de viewport, valores relativos y media queries para adaptar el diseño a diferentes dispositivos. Incluye demos para ilustrar las características de CSS3.

Cargado por

Skinner Abelardo
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

CSS3

Alejandro de Arriba
[email protected] @lex0712 www.adearriba.com/blog

Novedades

CSS3 Novedades

Bordes y fondos

Efectos de texto y Fuentes

Transformaciones 2D y 3D

Transiciones

Animaciones

Mltiples columnas

CSS3 Bordes y fondos

Bordes border-radius box-shadow border-image

Fondos background-size backgroundorigin

DEMO

CSS3 Efectos de texto y Fuentes

Efectos de texto text-shadow word-wrap

Fuentes

@font-face

DEMO

CSS3 Transformaciones 2D / 3D
Transformaciones 2D Transformaciones 3D

translate rotate scale skew matrix

rotateX rotateY rotateZ perspective scaleZ translateZ

DEMO

CSS3 - Transiciones

transitionproperty transitiontiming-function

transitionduration transitiondelay

DEMO

CSS3 - Animaciones

animationname animationiteration-count

animationduration animationdirection

animationtiming-function animationplay-state

animationdelay

@keyframes

DEMO

CSS3 Mltiples Columnas

columncount

columngap

columnrule

DEMO

Responsive Design

Responsive Design Qu es?

Diseo adaptable al tamao del dispositivo.

Una sola web para PC, tablets y celulares.

Responsive Design Cmo inicio? Fluidez del CSS: Utilizar la etiqueta meta dentro del <head></head>:
<meta name="viewport" content="width=device-width, initialscale=1.0">

Utilizar valores relativos como porcentajes (%) y unidades de letras (em). Utilizar media queries:
@media screen and (min-width: 800px) {}

Responsive Design Media Queries


.column { color: red; } //valor por defecto en el css //cuando el ancho sea igual o menor que 800px @media screen and (max-width: 800px) { .column { color: green; } //se cambia la propiedad color de la clase }

//cuando el ancho sea igual o menor que 480px @media screen and (max-width: 480px) { .column { color: blue; } //se cambia la propiedad color de la clase }

DEMO Responsive Design

CSS3
Alejandro de Arriba
[email protected] @lex0712 www.adearriba.com/blog

También podría gustarte