Utilidades CSS

Cargadores con CSS
https://cssloaders.github.io/

Formas geométricas
https://css-tricks.com/the-shapes-of-css/

Sombras:
https://cssdeck.com/labs/16-box-shadows-to-save-your-time

https://www.hongkiat.com/blog/creative-css-shadows/

Generadores CSS de background

UI:

https://uxdesign.cc/how-to-improve-your-product-ui-designers-checklist-58510947e6ab

https://www.refactoringui.com/

100 animaciones increíbles y fáciles de usar:

https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c

https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

https://daneden.github.io/animate.css/

https://1stwebdesigner.com/css-effects/

100.000 iconos gratis, nada menos:

https://www.iconshock.com/freeicons/

Gradientes

https://www.joshwcomeau.com/css/make-beautiful-gradients/

https://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/

https://uigradients.com/#MistyMeadow

https://bennettfeely.com/gradients/

https://cssgradient.io/gradient-backgrounds/

https://webgradients.com/

Usar gradientes para hacer gráficos de tarta:

https://www.sitepoint.com/create-css-conic-gradients-pie-charts/

Animados (muchos usan JS)

https://bashooka.com/coding/30-css-animated-gradient-examples/

Mini ejercicio CSS

En el ejercicio de ayer vamos a modificar varias cosas (todo esto, por supuesto, en la hoja de estilo externa):

1.- Cambiaremos el tipo de letra del h1 a algún tipo ‘display’
2.- Cambiar el tipo de letra de la lista a alguno sin serifa pero diferente
3.- Quitar márgenes superior e inferior a las cabeceras
4.- Añadir padding a las cabeceras
5.- Añadir un <p> con cinco párrafos de lorem ipsum
6.- Ponerle el tipo de letra de la lista
7.- Aumentar el espaciado entre letras, entre palabras y entre líneas.
8.- Poner un indent en la primera línea
9.- Que los h1 tengan un borde lateral verde a la izquierda de 0.5rem de ancho

Añadid cualquier cosa que os parezca que le da calidad a la página ¡Sorprendedme!

Mini ejercicio colores y fondos

Vamos a poner un h1, un h2 y un h3 con colores de fondo/ de texto con alguna paleta que nos guste.

Y debajo una lista de ciudades numerada con una imagen de fondo que no haga scroll, no se repita y que ocupe toda la lista.

Colores e imágenes a vuestro gusto.