Tarea-Ejercicios CSS
Tarea-Ejercicios CSS
- Dado el siguiente código HTML y CSS, modificarlo para obtener el siguiente aspecto:
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:
.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:
</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 segunda para hacer desaparecer los copos según van llegando al suelo, utilizando la
propiedad opacity.