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

Welcome to Scribd!

  • 15 views

    Tarea-Ejercicios CSS

    Uploaded by

    nmoyhin257
    The document provides 5 code examples using HTML and CSS to create different visual effects: borders and rounded corners on divs, box shadows, text shadows, transitions on hover states of boxes, and animating falling snowflakes. The task is to modify the code as needed to produce the desired visual outputs shown.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Tarea-Ejercicios CSS

    Uploaded by

    nmoyhin257
    15 views9 pages
    The document provides 5 code examples using HTML and CSS to create different visual effects: borders and rounded corners on divs, box shadows, text shadows, transitions on hover states of boxes, and animating falling snowflakes. The task is to modify the code as needed to produce the desired visual outputs shown.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides 5 code examples using HTML and CSS to create different visual effects: borders and rounded corners on divs, box shadows, text shadows, transitions on hover states of boxes, and animating falling snowflakes. The task is to modify the code as needed to produce the desired visual outputs shown.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    15 views9 pages

    Tarea-Ejercicios CSS

    Uploaded by

    nmoyhin257
    The document provides 5 code examples using HTML and CSS to create different visual effects: borders and rounded corners on divs, box shadows, text shadows, transitions on hover states of boxes, and animating falling snowflakes. The task is to modify the code as needed to produce the desired visual outputs shown.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 9

    1.

    - Dado el siguiente código HTML y CSS, modificarlo para obtener el siguiente aspecto:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ejercicio 6 - Bordes CSS</title>
    <style type="text/css" media="screen">
    div.exampleborderradius {
    background-color: #eee;
    padding: 20px;
    margin-top: 10px;
    margin-right: 20px;
    text-align: center;
    }

    div.exampleborderradiusa {
    background-color: #464646;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    height: 65px;
    width:160px;
    text-align: center;
    }

    div.exampleborderradiusb {
    background-color: #464646;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    height: 65px;
    width:160px;
    text-align: center;
    }

    div.exampleborderradiusc {
    background-color: #464646;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    height: 65px;
    width:160px;
    text-align: center;
    }

    div.exampleborderradiusd {
    background-color: #464646;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    width: 12em;
    height: 5em;
    text-align: center;
    }

    div.exampleborderradiuse {
    background-color: #464646;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    height: 65px;
    width:160px;
    text-align: center;
    }

    div.exampleborderradiusf {
    float:left;
    background-color: #464646;
    margin-top: 20px;
    margin-right: 40px;
    width: 70px;
    height: 70px;
    text-align: center;
    }

    .examplelabelborderradius {
    color: white;
    font-size: 20px;
    position: relative;
    top: 20px;
    }

    </style>
    </head>
    <body>
    <div class="exampleborderradiusa"><span
    class="examplelabelborderradius">A</span></div>
    <div class="exampleborderradiusb"><span
    class="examplelabelborderradius">B</span></div>
    <div class="exampleborderradiusc"><span
    class="examplelabelborderradius">C</span></div>
    <div class="exampleborderradiusd"><span
    class="examplelabelborderradius">D</span></div>
    <div class="exampleborderradiuse"><span
    class="examplelabelborderradius">E</span></div>
    <div class="exampleborderradiusf"><span
    class="examplelabelborderradius">F</span></div>
    </body>
    </html>
    2.- Dado el siguiente código HTML y CSS, modificarlo para obtener el siguiente aspecto:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ejercicio 7 - Sombras CSS</title>
    <style type="text/css" media="screen">
    .offset { overflow: hidden; margin: 20px 0 40px 20px; }

    .offset div {
    background-color: #eee;
    float:left;
    margin-top: 20px;
    margin-right: 40px;
    height: 65px;
    width:160px;
    text-align: center;
    }

    .examplelabelboxshadow {
    color: #888;
    font-size: 20px;
    position: relative;
    top: 20px;
    }

    </style>
    </head>
    <body>
    <div class="offset">
    <div class="exampleboxshadowa"><span
    class="examplelabelboxshadow">A</span></div>
    <div class="exampleboxshadowb"><span
    class="examplelabelboxshadow">B</span></div>
    <div class="exampleboxshadowc"><span
    class="examplelabelboxshadow">C</span></div>
    <div class="exampleboxshadowd"><span
    class="examplelabelboxshadow">D</span></div>
    <div class="exampleboxshadowe"><span
    class="examplelabelboxshadow">E</span></div>
    <div class="exampleboxshadowf"><span
    class="examplelabelboxshadow">F</span></div>
    </div>

    <div class="offset">
    <div class="exampleboxshadowg"><span
    class="examplelabelboxshadow">G</span></div>
    <div class="exampleboxshadowh"><span
    class="examplelabelboxshadow">H</span></div>
    <div class="exampleboxshadowi"><span
    class="examplelabelboxshadow">I</span></div>
    <div class="exampleboxshadowj"><span
    class="examplelabelboxshadow">J</span></div>
    <div class="exampleboxshadowk"><span
    class="examplelabelboxshadow">K</span></div>
    <div class="exampleboxshadowl"><span
    class="examplelabelboxshadow">L</span></div>
    </div>
    </body>
    </html>
    3.- Dado el siguiente código HTML y CSS, modificarlo para obtener el siguiente aspecto:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ejercicio 9 - Textos CSS</title>
    <style type="text/css" media="screen">
    p { font-size: 2em; margin: 1em; padding: 0 5px; }

    </style>
    </head>
    <body>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    <p>
    Las sombras de texto fueron definidas en 1997
    </p>
    </body>
    </html>
    4.- Dado el siguiente código HTML y CSS, modificarlo para cambiar el aspecto original al final:

    Imagen original

    Imagen final
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ejercicio 5 - Transiciones CSS</title>
    <style type="text/css" media="screen">
    #container { width: 500px; height:500px; position: relative;}
    .box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    position:absolute;
    padding: 5px;
    }
    .box:hover {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    position:absolute;
    }
    .ex01 .box {
    left: 10px;
    top: 10px;
    }
    .ex02 .box {
    left: 10px;
    top: 130px;
    }
    .ex03 .box {
    left: 10px;
    top: 250px;
    }
    .ex04 .box {
    left: 10px;
    top: 370px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div class="ex01"><div class="box">Caja 1</div></div>
    <div class="ex02"><div class="box">Caja 2</div></div>
    <div class="ex03"><div class="box">Caja 3</div></div>
    <div class="ex04"><div class="box">Caja 4</div></div>
    </div>
    </body>
    </html>
    5.- Dado el siguiente código HTML y la siguiente imagen, crear las animaciones necesarias para
    simular un efecto de nieve. Utilizad al menos dos animaciones:

    • La primera para simular la caida de los copos de nieve.

    • La segunda para hacer desaparecer los copos según van llegando al suelo, utilizando la
    propiedad opacity.

    La animación debe ejecutarse de manera infinita.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ejercicio 3 - Animacion CSS</title>
    <style type="text/css" media="screen">
    body {
    margin: 0px;
    }
    #container{
    background: #666 url(ej03_tree.jpg) no-repeat -60px 0;
    width: 420px;
    height: 480px;
    position: relative;
    }
    .snowflake {
    color: #fff;
    font-size: 2em;
    position: absolute;
    }
    .snowflake.f1 {
    left: 40px;
    }
    .snowflake.f2 {
    font-size: 1.8em;
    left: 120px;
    }
    .snowflake.f3 {
    left: 200px;
    }
    .snowflake.f4 {
    font-size: 1.5em;
    left: 280px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="snow" class="snow">
    <div class="snowflake f1">&#10053;</div>
    <div class="snowflake f2">&#10052;</div>
    <div class="snowflake f3">&#10053;</div>
    <div class="snowflake f4">&#10052;</div>
    </div>
    </div>
    </body>
    </html>

    You might also like