CLASES ANGEL

viernes, 16 de febrero de 2024

Cajas rotadas

Para realizar este ejercicio se deberá hacer uso de la propiedad transform, que nos permite cambiar la escala y rotar las cajas. Hay que fijarse que tenemos el ratón sobre la cuarta caja y esta es más grande y gira un poco menos, por lo tanto, cuando hacemos hover cambia su escala y su giro.

Hotel

Hay que intentar representar la imagen inferior. Para ello hay que tener en cuenta que cuando pasemos por encima de cada imagen el borde cambiará.

El Hostal Empúries es una casa de huéspedes, con un espíritu de la sostenibilidad y respeto por el entorno, situada en el corazón de la Costa Brava. Tiene una ubicación excepcional, detrás de las ruinas del primer asentamiento griego en la Península Ibérica y dominando una de las playas de Cataluña más bellas. El Hostal Empúries siempre se intenta superar para ofrecer una estancia del más alto nivel mientras interactúa respetuosamente con su entorno natural. Los servicios y edificios del Hostal Empúries se integran en el ciclo biólogico de un entorno natural único. Con su diseño auténtico y de elegantes líneas, conservando su significado histórico, el Hostal Empúries ofrece una oportunidad perfecta para descansar el cuerpo y el alma en interiores e instalaciones completamente modernizados. Puede disfrutar del centro de bienestar, de restaurantes de comida orgánica, inicitivas ecologistas, zona para niños y programa de solidaridad. El edificio principal, que cuenta con una extensa historia de hospitalidad, fue construido para acomodar a los arqueólogos que habian venido a excavar las cercanas ruinas griegas y romanas descubiertas a principios de 1900. Al igual que los grandes monasterios y otros edificios históricos, este especial hotel fue construido en etapas y pasó por diferentes manos, pero todavía, aislado en la costa, disfruta de la misma maravillosa ubicación que tenía el día que se colocó la primera piedra, a comienzos del siglo pasado.

Típica masia Catalana situada en una zona de gran belleza en la comarca del Alt Empordà. Disponemos de 8 habitaciones de 2 a 4 personas, cada una de ellas identificada con el nombre de plantas y árboles autóctonos. También tiene a su disposición Can Fernando, un espacio independiente que consta de una habitación quádruple y una habitación doble con baño, además de una sala muy confortable.

Hotel en un edificio histórico declarado patrimonio cultural de Barcelona. El H10 Racó del Pi se encuentra en el corazón de Barcelona, en su famoso Barrio Gótico. H10 Racó del Pi goza de una ubicación ideal para disfrutar de la zona más viva y ambientada de la ciudad, en plena Ciutat Vella, una zona llena de tiendas, bares y restaurantes, cerca de los lugares más históricos e interesentes de Barcelona.

<!DOCTYPE html>

<head>

<title>Hotel</title>

<style>

margin: 0; padding: 0; border: 0; outline: 0;

}

div img{

width:100%;height:100%;

}

body{

background-color:#f2f2f2;

}

.redes{

float:left;width:38px;height:38px;

}

.hotel{

width:33.3%;float:left;

}

.foto{

height:250px;border: 4px solid #C5F7CA; border-radius: 10px 10px 10px 10px;overflow:hidden;margin:10px 3px 0px 3px;box-shadow: black 3px 3px 3px;

}

.foto:hover{border: 4px solid #FC7C7C;box-shadow: #B57575 4px 4px 3px;

}

.des{

padding:10px;

}

#contenedor{

width:95%;height:100%;position:absolute;left:2.5%;

}

#cabecera{

background-color:#fafafa;border: 4px solid #fff; height:140px;

border-radius: 15px 15px 15px 15px;

}

#logo{

float:left;width:80px;height:60px;

}

#redes{

float:right;width:200px;height:40px;top:20px;

}

#nombre{

width:100%;height:80px;text-align:center;color: red; text-shadow: black 3px 3px 3px;font-size:4em;top:60px;float:left;

}

#pie{

width:100%;text-align:center;font-size:1.5em;float:left;

}

</style>

</head>

<body>

</div>

</div>

<p>Grupo de Hoteles Victor</p>

</div>

<div>

</div>

<p>El Hostal Empúries es una casa de huéspedes, con un espíritu de la sostenibilidad y respeto por el entorno, situada en el corazón de la Costa Brava. Tiene una ubicación excepcional, detrás de las ruinas del primer asentamiento griego en la Península Ibérica y dominando una de las playas de Cataluña más bellas. El Hostal Empúries siempre se intenta superar para ofrecer una estancia del más alto nivel mientras interactúa respetuosamente con su entorno natural. Los servicios y edificios del Hostal Empúries se integran en el ciclo biólogico de un entorno natural único. Con su diseño auténtico y de elegantes líneas, conservando su significado histórico, el Hostal Empúries ofrece una oportunidad perfecta para descansar el cuerpo y el alma en interiores e instalaciones completamente modernizados. Puede disfrutar del centro de bienestar, de restaurantes de comida orgánica, inicitivas ecologistas, zona para niños y programa de solidaridad. El edificio principal, que cuenta con una extensa historia de hospitalidad, fue construido para acomodar a los arqueólogos que habian venido a excavar las cercanas ruinas griegas y romanas descubiertas a principios de 1900. Al igual que los grandes monasterios y otros edificios históricos, este especial hotel fue construido en etapas y pasó por diferentes manos, pero todavía, aislado en la costa, disfruta de la misma maravillosa ubicación que tenía el día que se colocó la primera piedra, a comienzos del siglo pasado.

</p>

</div>

</div>

<p>Típica masia Catalana situada en una zona de gran belleza en la comarca del Alt Empordà. Disponemos de 8 habitaciones de 2 a 4 personas, cada una de ellas identificada con el nombre de plantas y árboles autóctonos. También tiene a su disposición Can Fernando, un espacio independiente que consta de una habitación quádruple y una habitación doble con baño, además de una sala muy confortable.</p>

</div>

</div>

<p>Hotel en un edificio histórico declarado patrimonio cultural de Barcelona. El H10 Racó del Pi se encuentra en el corazón de Barcelona, en su famoso Barrio Gótico. H10 Racó del Pi goza de una ubicación ideal para disfrutar de la zona más viva y ambientada de la ciudad, en plena Ciutat Vella, una zona llena de tiendas, bares y restaurantes, cerca de los lugares más históricos e interesentes de Barcelona.</p>

</div>

</div>

</body>

</html>

Listas flotantes CSS

Son tres columnas y las tres en conjunto ocupan el 80% del espacio y están centradas. Son 15 cajas que están flotando.

<!DOCTYPE html>

<html>

<head>

<title>Listas flotantes</title>

<style>

body {

color:blue;

}

.contenedor {

width:80%;

margin:0px auto;

}

ul,ol {

float:left;

width:28%;

}

ul.flecha {

list-style-image: url("flecha.png");

clear:left;

}

ul.flecha2 {

list-style-image: url("flecha_abajo.png");

}

ul.flecha3 {

list-style-image: url("flecha_arriba.png");

}

</style>

</head>

<body>

<li>3 elementos tipo cuadrado</li>

<li>Elemento</li>

</ul>

<li>3 elementos tipo círculo</li>

<li>Elemento</li>

</ul>

<li>3 elementos tipo disco</li>

<li>Elemento</li>

</ul>

<li>3 elementos tipo romano</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo ordenado</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo armenio</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo ideográfico</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo hebreo</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo japonés</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo katakana</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo normal</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo nada</li>

<li>Elemento</li>

</ol>

<li>3 elementos tipo flecha</li>

<li>Elemento</li>

</ul>

<li>3 elementos tipo flecha</li>

<li>Elemento</li>

</ul>

<li>3 elementos tipo flecha</li>

<li>Elemento</li>

</ul>

</div>

</body>

</html>

Web sencilla CSS

<!DOCTYPE html>

<html>

<head>

<style>

ul {

margin:0;

padding:0;

}

li {

border:1px solid black;

text-align:center;

padding:20px;

background-color:lightgrey;

}

li:hover {

background-color:grey;

}

.uno {

width:25%;

float:left;

}

.dos {

width:75%;

float:left;

}

</style>

</head>

<body>

<ul>

<li>Inicio</li>

<li>Animales</li>

<li>Ventas</li>

<li>Promociones</li>

<li>Contacto</li>

</ul>

</div>

<p>Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.</p>

<p>Aunque no posee actualmente fuentes para justificar sus hipótesis, el profesor de filología clásica Richard McClintock asegura que su uso se remonta a los impresores de comienzos del siglo XVI.1 Su uso en algunos editores de texto muy conocidos en la actualidad ha dado al texto lorem ipsum nueva popularidad.</p>

<p>El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Cicerón en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que solo es una demostración o prueba, pero se inspira en la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) que comienza con:</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Existen múltiples variantes del texto original, algunas casi sin parecido con él. Estas versiones incluyen letras adicionales que no son comunes en latín (como la k, w y z) o palabras sin sentido como zzril, takimata y gubeergren que intentan hacer la distribución aún más parecida al inglés.</p>

</div>

</body>

</html>

jueves, 15 de febrero de 2024

Tablas CSS

Para hacer el siguiente ejercicio necesitamos que cuando pasemos por encima de una caja, esta haga algo diferente, y se hace con hover: https://www.w3schools.com/cssref/sel_hover.php

Cuando queremos dar automáticamente un color a las filas, en vez de hacerlo con clases lo más rápido es hacerlo con estilos, concretamente con nth-child. https://www.w3schools.com/css/css_table_style.asp

Revisad en el w3schools la propiedad linear-gradient() que nos permite hacer gradientes de unos colores dados. Con esa información realizar la tabla que aparece a continuación, que muestra el gradiente cuando pasamos por encima de una fila de la tabla.

Tabla 1:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<title>Tablas</title>
</head>
<body>
<table>
<tr>
<th class="borraborde"></th>
<th>Alicante</th>
<th>Castellón</th>
<th>Valencia</th>
<th>C. Valenciana</th>
</tr>
<tr>
<td class="borraborde">Nacimientos</td>
<td>13.879</td>
<td>456502</td>
<td>54655</td>
<td>546555</td>
</tr>
<tr>
<td class="borraborde">Defunciones</td>
<td>15459</td>
<td>546545</td>
<td>44884</td>
<td>555643</td>
</tr>
<tr>
<td class="borraborde">Matrimonios</td>
<td>15459</td>
<td>546545</td>
<td>44884</td>
<td>555643</td>
</tr>
<tr>
<td class="borrabordebajo2">Crecimiento vegetativo</td>
<td class="borrabordebajo">15459</td>
<td class="borrabordebajo">546545</td>
<td class="borrabordebajo">44884</td>
<td class="borrabordebajo">555643</td>
</tr>
</table>
</body>
</html>

Código CSS:

table, th, td {
border:1px solid black;
border-collapse: collapse;
}

table {
border-style: none solid none none;
}

th {
border-style: none solid solid solid;
}

.borraborde {
border-style: none solid solid none;
text-align: center;
}

table {
width: 30%;
text-align: right;
}

.borrabordebajo {
border-style: solid solid none none;
}

.borrabordebajo2 {
border-style: solid solid none none;
text-align: center;
}

Tabla 2:

<table class="table2">
<tr>
<td rowspan="2" class="borde3">Población</td>
<td colspan="3" class="borraborde">Poblacion de derecho, 1996</td>
<td colspan="3" class="borraborde4">Poblacion de derecho, 1998</td>
</tr>
<tr>
<td class="bordebajo">Total</td>
<td class="bordebajo">Hombres</td>
<td class="bordebajo2">Mujeres</td>
<td class="bordebajo">Total</td>
<td class="bordebajo">Hombres</td>
<td class="bordebajo">mujeres</td>
</tr>
<tr>
<td class="borde2">Castellón</td>
<td>456.727</td>
<td>22.406</td>
<td class="borraborde">231.321</td>
<td class="borraborde4">461.712</td>
<td>228.231</td>
<td>233.481</td>
</tr>
<tr>
<td class="borde2">Valencia</td>
<td>2.172.840</td>
<td>1.059.657</td>
<td class="borraborde">1.113.183</td>
<td class="borraborde4">2.172.796</td>
<td>1.060.156</td>
<td>1.112.640</td>
</tr>
<tr>
<td class="borde2">Alicante</td>
<td>1.379.762</td>
<td>677.118</td>
<td class="borraborde">702.644</td>
<td class="borraborde4">1.388.933</td>
<td>682.380</td>
<td>706.553</td>
</tr>
<tr>
<td class="bordes3">*TOTALES</td>
<td></td>
<td></td>
<td class="borraborde"></td>
<td class="borraborde4"></td>
<td></td>
<td></td>
</tr>
</table>

CSS:

.table2, .table2 th, .table2 td{

border:1px solid black;

border-collapse: collapse;

text-align: center;

}

.table2 .borde2 {

border-width: 1px 4px 1px 1px;

border-style: solid solid solid solid;

}

.table2 .borde3 {

border-width: 1px 4px 4px 1px;

border-style: solid solid solid solid;

}

.table2 .bordes3{

border-width: 1px 4px 1px 1px;

border-style: solid solid solid solid;

}

.table2 .borraborde {

border-width: 1px 0px 1px 1px;

border-style: solid none solid solid;

}

.table2 .borraborde4 {

border-width: 1px 1px 1px 0px;

border-style: solid solid solid none;

}

.table2 .bordebajo {

border-width: 1px 1px 4px 0px;

border-style: solid solid solid solid;

}

.table2 .bordebajo2 {

border-width: 1px 0px 4px 0px;

border-style: solid none solid solid;

}

.table2 td{

width: 100px;

}

Tabla 3:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSStabla.css">
<title>Pána</title>
</head>
<body>
<table class="table4">
<caption>¿Sabe ud. lo que es Internet?</caption>
<tr>
<td class="izda"> </td>
<td class="borde">%</td>
</tr>
<tr>
<td class="izda">Lo sabe y lo utiliza</td>
<td>17,3</td>
</tr>
<tr>
<td class="izda">No lo sabe</td>
<td>60,3</td>
</tr>
<tr>
<td class="izda">Lo sabe pero no lo utiliza</td>
<td>22,1</td>
</tr>
<tr>
<td class="izda">N.C.</td>
<td>0,3</td>
</tr>
</table>
</body>
</html>

CSS:

.table4, .table4 th{
border:3px solid #eeeeee;
border-collapse: collapse;
}

.table4 td{
height: 30px;
}

.izda {
background-color:#dddddd;
}

.table4 .borde {
border-bottom:4px double black;

border-left:4px double black;

}

Tabla 4:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
<table>
<tr>
<th>País</th>
<th>Proyección 07/2015</th>
<th>% Mundial</th>
<th>Censo</th>
<th>Fecha</th>
</tr>
<tr>
<th>China</th>
<td>1 370 793 000</td>
<td>18,83</td>
<td>1 370 134 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>India</th>
<td>1 299 499 000</td>
<td>17,85</td>
<td>1 210 854 977</td>
<td>1/03/2011</td>
</tr>
<tr>
<th>USA</th>
<td>321 234 000</td>
<td>4,41</td>
<td>320 984 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Indonesia</th>
<td>255 462 000</td>
<td>3,51</td>
<td>255 461 700</td>
<td>2015</td>
</tr>
<tr>
<th>Brasil</th>
<td>204 519 000</td>
<td>2,81</td>
<td>204 324 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Pakistán</th>
<td>191 785 000</td>
<td>2,63</td>
<td>190 323 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Nigeria</th>
<td>184 264 000</td>
<td>2,53</td>
<td>174 000 000</td>
<td>2013</td>
</tr>
<tr>
<th>Bangladés</th>
<td>158 762 000</td>
<td>2,18</td>
<td>158 593 000</td>
<td>31/05/2015</td>
</tr>
<tr>
<th>Rusia</th>
<td>144 031 000</td>
<td>1,98</td>
<td>146 267 288</td>
<td>1/01/2015</td>
</tr>
<tr>
<th>Japón</th>
<td>126 806 000</td>
<td>1,74</td>
<td>126 880 000</td>
<td>1/01/2015</td>
</tr>
</table>

</body>
</html>

CSS:

table, th, td {
border:1px black solid;
border-collapse:collapse;
text-align:center;
}

th, td {
padding:5px;
}

tr:hover td {
background:linear-gradient(red,blue);
}

tr:nth-child(odd) {
background-color: #f2f2f2;
}