Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 68 vistas

    Modulo 3 - CSS3

    Cargado por

    Skinner Abelardo
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd

    Modulo 3 - CSS3

    Cargado por

    Skinner Abelardo
    68 vistas21 páginas
    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.

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    68 vistas21 páginas

    Modulo 3 - CSS3

    Cargado por

    Skinner Abelardo
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 21

    CSS3

    Alejandro de Arriba
    adearriba@latamtechnologies.com @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
    adearriba@latamtechnologies.com @lex0712 www.adearriba.com/blog

    También podría gustarte