Scribd
Upload
38 views

Tarea-Ejercicios CSS

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.

Uploaded by

nmoyhin257
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Tarea-Ejercicios CSS

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.

Uploaded by

nmoyhin257
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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