SASS
https://www.w3schools.com/sass/default.php
https://medium.com/@kish.siva/how-to-start-using-sass-in-visual-studio-code-5469787f18bf
https://tutorialzine.com/2016/01/learn-sass-in-15-minutes
https://www.tutorialspoint.com/sass/index.htm
https://css-tricks.com/the-sass-ampersand/
Tutorial muy bueno con ejemplos
Ejercicio media query
En la plantilla del landscape añadid un media query para que cuando la resolución sea menor de 768 todos los flex tengan orientación columna. Probad a hacer pequeña la pantalla y comprobad que funciona bien.
CSS avanzado
Usamos los pseudoelementos, principalmente, para insertar contenido antes y después de los elementos ¿Con que objeto? Para hacer flipadas.
Si los usamos junto con hover se consiguen cosas increíbles:
Tutorial pseudoelementos y animaciones
CSS3 incorpora funciones matemáticas que nos permiten poner valores que sean el resultado de un cálculo:
https://css-tricks.com/a-complete-guide-to-calc-in-css/
Aplicar máscaras a imágenes:
Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:
La función attr:
En content funciona en todos los navegadores, pero de momento no está completamente implementada para usarla en otros sitios.
Media queries para dispositivos
En w3school:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Ejemplos:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Tutorial bastante completo:
https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/
En css trick:
https://css-tricks.com/a-complete-guide-to-css-media-queries/
Lista de resoluciones para todos los dispositivos:
Las más comunes:
Un artículo muy bueno sobre uso de media query.
Qué es el diseño responsive:
https://i.workana.com/glosario/que-es-el-diseno-responsive/
Ejemplos responsive:
https://web.dev/responsive-web-design-basics/
9 principios del diseño responsive:
https://blog.froont.com/9-basic-principles-of-responsive-web-design/
Menú hamburguesa solo CSS:
https://codepen.io/alvarotrigo/pen/MWEJEWG
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
Modificación ejercicio
En la plantilla que ya casi tenemos acabamos lo que nos quede (si es que queda algo) y añadimos:
– Transiciones para las fotos al hacer hover. Podéis buscar inspiración en alguno de los ejemplos que hemos visto.
– Una animación para el texto de color verde en el primer párrafo. Que aparezca de alguna manera (a vuestro gusto) y se coloque en su sitio.
– Un div en plan ‘Suscríbete a nuestra newsletter’ que aparezca a los 5 segundos de entrar en la página. Puede, simplemente, aparecer, o bien os podéis flipar y meterle una animación guapa.
Galería imágenes
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería de Fotos</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Galería de Fotos</h1>
</header>
<main>
<div class="gallery">
<!-- Ejemplo de una tarjeta de foto -->
<div class="photo-card">
<img src="https://picsum.photos/300?random=1" alt="Ejemplo 1">
<h3>Título de la Foto 1</h3>
<p>Una breve descripción de la foto 1.</p>
</div>
<div class="photo-card">
<img src="https://picsum.photos/300?random=2" alt="Ejemplo 2">
<h3>Título de la Foto 2</h3>
<p>Una breve descripción de la foto 2.</p>
</div>
<div class="photo-card">
<img src="https://picsum.photos/300?random=3" alt="Ejemplo 1">
<h3>Título de la Foto 1</h3>
<p>Una breve descripción de la foto 3.</p>
</div>
<div class="photo-card">
<img src="https://picsum.photos/300?random=4" alt="Ejemplo 2">
<h3>Título de la Foto 2</h3>
<p>Una breve descripción de la foto 4.</p>
</div>
<div class="photo-card">
<img src="https://picsum.photos/300?random=5" alt="Ejemplo 1">
<h3>Título de la Foto 1</h3>
<p>Una breve descripción de la foto 1.</p>
</div>
<div class="photo-card">
<img src="https://picsum.photos/300?random=6" alt="Ejemplo 2">
<h3>Título de la Foto 2</h3>
<p>Una breve descripción de la foto 2.</p>
</div>
<div class="view view-first">
<img src="https://picsum.photos/300?random=1">
<div class="mask">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://picsum.photos/300?random=8">
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://picsum.photos/300?random=12">
<div class="mask">
<h2>Hover Style #6</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://picsum.photos/300?random=11">
<div class="mask">
<h2>Hover Style #7</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://picsum.photos/300?random=9">
<div class="mask">
<h2>Hover Style #8</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://picsum.photos/300?random=10">
<div class="mask">
<h2>Hover Style #10</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</main>
</body>
</html>
/* Estilos generales */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
/* Cabecera fija */
header {
position: fixed;
top: 0;
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
padding: 15px 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
header h1 {
margin: 0;
font-size: 2rem;
}
/* Estilo del contenedor principal */
main {
margin-top: 80px; /* Altura de la cabecera */
padding: 20px;
}
/* Estilo de la cuadrícula */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Estilo de cada tarjeta de foto */
.photo-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
transition: transform 1s, box-shadow 0.3s;
}
.photo-card:hover {
transform: translateY(-15px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.photo-card img {
max-width: 100%;
border-radius: 8px;
}
.photo-card h3 {
margin: 10px 0 5px;
font-size: 18px;
color: #444;
}
.photo-card p {
font-size: 14px;
color: #666;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
}
.view a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
filter: alpha(opacity=100);
opacity: 1;
transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
filter: alpha(opacity=0);
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
}
.view-fifth:hover p {
filter: alpha(opacity=100);
opacity: 1;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
.view-eighth:hover p {
transform: translateY(0px);
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
transform: translateY(0px);
transition-delay: 0s;
}
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.2s linear;
}
.view-first:hover img {
transform: scale(1.1,1.1);
}
.view-first a.info {
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
filter: alpha(opacity=100);
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
.view-tenth img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
filter: alpha(opacity=0);
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth a.info {
filter: alpha(opacity=0);
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.view-tenth:hover img {
transform: scale(10);
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
transform: scale(1);
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh img {
transition: all 0.5s ease-out;
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
transform: rotate(0deg) scale(1);
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh p {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
transform: rotate(720deg) scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
transform: translateY(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
transform: translateY(0px);
transition-delay: 0.7s;
}
.view-seventh:hover p {
transform: translateY(0px);
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-sixth img {
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
background-color: rgba(146,96,91,0.5);
filter: alpha(opacity=0);
opacity: 0;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
filter: alpha(opacity=0);
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
filter: alpha(opacity=0);
opacity: 0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
filter: alpha(opacity=0);
opacity: 0;
transform: translateY(100px);
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
transition-delay: 0s;
}
.view-sixth:hover img {
transition-delay: 0s;
}
.view-sixth:hover h2 {
filter: alpha(opacity=100);
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}
.view-sixth:hover p {
filter: alpha(opacity=100);
opacity: 1;
transform: scale(1);
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
filter: alpha(opacity=100);
opacity: 1;
transform: translateY(0px);
transition-delay: 0.3s;
}
CSS Animaciones
https://www.w3schools.com/css/css3_animations.asp
https://themeisle.com/blog/css-animations-tutorial/
https://www.lambdatest.com/blog/css-animations-tutorial/
https://blog.hubspot.com/website/css-animation-examples
Ejemplos:
https://1stwebdesigner.com/css-effects/
https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c
Galería de fotos
Con grid haced una galería similar a esta: