Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guia Css3 Transicciones

    Cargado por

    Shelley Pastrana
    13 vistas11 páginas
    Transicciones en CSS3

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Transicciones en CSS3

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    13 vistas11 páginas

    Guia Css3 Transicciones

    Cargado por

    Shelley Pastrana
    Transicciones en CSS3

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 11

    CSS3

    TRANSICCIONES

    Transiciones de una propiedad (transition)


    Transiciones de mltiples propiedades (transition)
    Transiciones (funciones de transicin)
    Transiciones (tiempo de demora en iniciar la transicin)
    Transiciones (otra sintaxis para hacer lo mismo)
    TRANSICION DE UNA PROPIEDAD (TRANSITION)
    HOJA DE ESTILO
    #cuadro1{
    border-radius: 20px;
    background-color:#ddd;
    width:200px;
    padding:10px;
    text-align:justify;
    }
    #cuadro1:hover{
    width:300px;
    }
    #cuadro2{
    border-radius: 20px;
    background-color:#ff0;
    width:200px;
    padding:10px;
    transition:width 1s;
    -moz-transition:width 1s;
    -ms-transition:width 1s;
    -webkit-transition:width 1s;
    -o-transition:width 1s;
    text-align:justify;
    }
    #cuadro2:hover{
    width:300px;
    }
    body {
    background:white;
    1

    CSS3
    margin:50px;
    }
    PAGINA
    <html>
    <head>
    <title> Transiciones de una propiedad (transition) </title>
    <link rel= StyleSheet href="estilotransicion.css" type="Text/css"
    </head>
    <body>
    <div id="cuadro1">
    <h3> Bordes Redondeados en CCS3 </h3>
    <p>
    CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se
    permiten bordes con las esquinas redondeadas, bordes con imgenes (incluso varias imgenes se
    pueden utilizar para definir el aspecto del borde), sombras, etc. </p>
    </div>
    <br> <br>
    <div id="cuadro2">
    <h3> Bordes Redondeados en CCS3 </h3>
    <p>Otra cosa que definen las especificaciones de CSS y que por el momento no est funcionando
    del todo bien, es que las imgenes de fondo deben ajustarse a los bordes redondeados. Ocurre,
    por el momento, que las imgenes de fondo salen por fuera de los bordes redondeados.
    Confiamos en que en el futuro esto pueda ser revisado y optimizado, para que todo funcione
    correctamente. </p>
    </body>
    </html>

    Transiciones de mltiples propiedades (transition)


    HOJA DE ESTILO
    #cuadro1{
    border-radius: 20px;
    background-color:#ff0;
    width:400px;
    padding:10px;
    transition:width 1s,
    background-color 8s;
    -moz-transition:width 1s,
    background-color 8s;
    -ms-transition:width 1s,
    background-color 8s;
    -webkit-transition:width 1s,
    2

    CSS3
    background-color 8s;
    -o-transition:width 1s,
    background-color 8s;
    }
    #cuadro1:hover{
    width:600px;
    background-color: #f00;
    }
    PAGINA
    #cuadro1{
    border-radius: 20px;
    background-color:#ff0;
    width:400px;
    padding:10px;
    transition:width 1s,
    background-color 8s;
    -moz-transition:width 1s,
    background-color 8s;
    -ms-transition:width 1s,
    background-color 8s;
    -webkit-transition:width 1s,
    background-color 8s;
    -o-transition:width 1s,
    background-color 8s;
    }
    #cuadro1:hover{
    width:600px;
    background-color: #f00;
    }

    Transiciones (funciones de transicin)


    HOJA DE ESTILO
    #cuadro1{
    margin: 5px;
    border-radius: 20px;
    background-color:MediumVioletRed;
    width:200px;
    padding:10px;
    text-align:justify;
    3

    CSS3
    transition:width 2s ease;
    -moz-transition:width 2s ease;
    -ms-transition:width 2s ease;
    -webkit-transition:width 2s ease;
    -o-transition:width 2s ease;
    }
    #cuadro1:hover{
    width:300px;
    }

    #cuadro2{
    margin: 5px;
    border-radius: 20px;
    background-color:DarkOrange;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 2s linear;
    -moz-transition:width 2s linear;
    -ms-transition:width 2s linear;
    -webkit-transition:width 2s linear;
    -o-transition:width 2s linear;
    }
    #cuadro2:hover{
    width:300px;
    }
    #cuadro3{
    margin: 5px;
    border-radius: 20px;
    background-color:GreenYellow;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 2s ease-in;
    -moz-transition:width 2s ease-in;
    -ms-transition:width 2s ease-in;
    -webkit-transition:width 2s ease-in;
    -o-transition:width 2s ease-in;
    }
    #cuadro3:hover{
    width:300px;
    4

    CSS3
    }
    #cuadro4{
    margin: 5px;
    border-radius: 20px;
    background-color:MediumSpringGreen;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 2s ease-out;
    -moz-transition:width 2s ease-out;
    -ms-transition:width 2s ease-out;
    -webkit-transition:width 2s ease-out;
    -o-transition:width 2s ease-out;
    }
    #cuadro4:hover{
    width:300px;
    }
    #cuadro5{
    margin: 5px;
    border-radius: 20px;
    background-color:paleVioletRed;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 2s ease-in-out;
    -moz-transition:width 2s ease-in-out;
    -ms-transition:width 2s ease-in-out;
    -webkit-transition:width 2s ease-in-out;
    -o-transition:width 2s ease-in-out;
    }
    #cuadro5:hover{
    width:300px;
    }

    body {
    background:black;
    margin:50px;
    }
    PAGINA
    5

    CSS3
    <html>
    <head>
    <title> Transiciones (funciones de transicin)</title>
    <link rel= StyleSheet href="estiotransicionfuncion.css" type="text/css">
    </head>
    <body>
    <div id="cuadro1">
    <h3>ease</h3>
    <p>Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite
    diversas notaciones para definir el color, a travs de nmeros en hexadecimal e incluso en
    decimal. Todo esto suponemos no ser un misterio para los lectores, que sin duda habrn
    experimentado con CSS y probablemente estn familiarizados con las distintas notaciones para
    especificar color en las hojas de estilo.</p>
    </div>
    <div id="cuadro2">
    <h3>linear</h3>
    <p>La notacin RGBA es una manera de especificar colores en la que se definen cuatro valores.
    Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parmetro es
    el canal Alpha, que no es ms que el grado de transparencia u opacidad del color. El canal Alpha es
    un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco. </p>
    </div>
    <div id="cuadro3">
    <h3>ease-in</h3>
    <p>En el mundo del diseo quizs ya habremos visto otros formatos o sistemas que soportan
    colores con canal Alpha y por ello puede que estemos familiarizados con este parmetro. El
    formato de imagen PNG, que tanto nos gusta por soportar transparencia que se ve correctamente
    en todos los fondos posibles, implementa justamente este canal alpha en la definicin del color
    para conseguir una transparencia ideal </p>
    </div>
    <div id="cuadro4">
    <h3>ease-out</h3>
    <p>Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a
    los colores que especificamos con CSS, abriendo nuevas posibilidades a los diseadores sin
    necesidad de complicarse con pequeos trucos como el uso de imgenes de fondo
    semitransparentes en PNG, etc. </p>
    </div>
    <div id="cuadro5">
    <h3>ease-in-out</h3>
    <p>Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a
    los colores que especificamos con CSS, abriendo nuevas posibilidades a los diseadores sin
    6

    CSS3
    necesidad de complicarse con pequeos trucos como el uso de imgenes de fondo
    semitransparentes en PNG, etc. </p>
    </div>
    </body>
    </html>

    Transiciones (tiempo de demora en iniciar la transicin)


    HOJA DE ESTILO
    #cuadro1{
    margin:5px;
    border-radius: 20px;
    background-color:DarkOrchid;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 1s ease 1s;
    -moz-transition:width 1s ease 1s;
    -ms-transition:width 1s ease 1s;
    -webkit-transition:width 1s ease 1s;
    -o-transition:width 1s ease 1s;
    }
    #cuadro1:hover{
    width:300px;
    }
    #cuadro2{
    margin:5px;
    border-radius: 20px;
    background-color:MediumTurquoise;
    width:200px;
    padding:10px;
    text-align:justify;
    transition:width 1s ease,
    background-color 1s ease 1s;
    -moz-transition:width 1s ease,
    background-color 1s ease 1s;
    -ms-transition:width 1s ease,
    background-color 1s ease 1s;
    -webkit-transition:width 1s ease,
    background-color 1s ease 1s;
    -o-transition:width 1s ease,
    7

    CSS3
    background-color 1s ease 1s;
    }
    #cuadro2:hover{
    width:300px;
    background-color:#ff0;
    }

    body {
    background:black;
    margin:50px;
    }
    PAGINA
    <html>
    <head>
    <title> Transiciones (tiempo de demora en iniciar la transicin) </title>
    <link rel= "StyleSheet" href="estilotransiciondemora.css" type="text/css">
    </head>
    <body>
    <div id="cuadro1">
    <h3>Cuadro 1</h3>
    <p>Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite
    diversas notaciones para definir el color, a travs de nmeros en hexadecimal e incluso en
    decimal. Todo esto suponemos no ser un misterio para los lectores, que sin duda habrn
    experimentado con CSS y probablemente estn familiarizados con las distintas notaciones para
    especificar color en las hojas de estilo.</p>
    </div>
    <div id="cuadro2">
    <h3>Cuadro 2</h3>
    <p>La notacin RGBA es una manera de especificar colores en la que se definen cuatro valores.
    Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parmetro es
    el canal Alpha, que no es ms que el grado de transparencia u opacidad del color. El canal Alpha es
    un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco. </p>
    </div>
    </body>
    </html>
    #cuadro1{
    margin:5px;
    border-radius: 20px;
    8

    CSS3
    background-color:MediumTurquoise;
    width:200px;
    padding:10px;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0.5s;
    -moz-transition-property: width;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 0.5s;
    -ms-transition-property: width;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: 0.5s;
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0.5s;
    -o-transition-property: width;
    -o-transition-duration: 1s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 0.5s;
    }
    #cuadro1:hover{
    width:300px;
    }

    Transiciones (otra sintaxis para hacer lo mismo)


    HOJA DE ESTILO
    #cuadro2{
    margin:5px;
    border-radius: 20px;
    background-color:DarkOrchid;
    width:200px;
    padding:10px;
    transition-property: width, background-color;
    transition-duration: 1s, 1s;
    transition-timing-function: linear, linear;
    transition-delay: 0s, 1s;
    -moz-transition-property: width, background-color;
    -moz-transition-duration: 1s, 1s;
    9

    CSS3
    -moz-transition-timing-function: linear, linear;
    -moz-transition-delay: 0s, 1s;
    -ms-transition-property: width, background-color;
    -ms-transition-duration: 1s, 1s;
    -ms-transition-timing-function: linear, linear;
    -ms-transition-delay: 0s, 1s;
    -webkit-transition-property: width, background-color;
    -webkit-transition-duration: 1s, 1s;
    -webkit-transition-timing-function: linear, linear;
    -webkit-transition-delay: 0s, 1s;
    -o-transition-property: width, background-color;
    -o-transition-duration: 1s, 1s;
    -o-transition-timing-function: linear, linear;
    -o-transition-delay: 0s, 1s;
    }
    #cuadro2:hover{
    width:300px;
    background-color:#ff0;
    }

    body {
    background:black;
    margin:50px;
    }
    PAGINA
    <html>
    <head>
    <title> Transiciones (otra sintaxis para hacer lo mismo) </title>
    <link rel= "StyleSheet" href="estilotransiciondemora.css" type="text/css">
    </head>
    <body>
    <div id="cuadro1">
    <h3>Cuadro 1</h3>
    <p>Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite
    diversas notaciones para definir el color, a travs de nmeros en hexadecimal e incluso en
    decimal. Todo esto suponemos no ser un misterio para los lectores, que sin duda habrn
    experimentado con CSS y probablemente estn familiarizados con las distintas notaciones para
    especificar color en las hojas de estilo.</p>
    </div>
    <div id="cuadro2">
    10

    CSS3
    <h3>Cuadro 2</h3>
    <p>La notacin RGBA es una manera de especificar colores en la que se definen cuatro valores.
    Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parmetro es
    el canal Alpha, que no es ms que el grado de transparencia u opacidad del color. El canal Alpha es
    un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco. </p>
    </div>
    </body>
    </html>

    11

    También podría gustarte