Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modulo 3 - CSS3

    Diunggah oleh

    Skinner Abelardo
    35 tayangan21 halaman
    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.

    Deskripsi Asli:

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    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.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    35 tayangan21 halaman

    Modulo 3 - CSS3

    Diunggah oleh

    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.

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 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

    Anda mungkin juga menyukai