https://www.sitepoint.com/css-grid-center-element/?utm_source=rss
Mes: septiembre 2022
Tutoriales CSS
Ejercicio efectos y animaciones
Vamos a hacer una página para manejar una galería de fotos.
Al entrar veremos una cabecera con logo y menú y solo veremos textos gordos con estilo acordeón:
https://codepen.io/vinsongrant/full/qbGKed
Al ampliar los elementos del acordeon veremos una galería de imágenes de 4 imágenes de ancho.
Al ponerse encima de cada imagen deberíamos ver un efecto como los de tympanus:
https://tympanus.net/Tutorials/OriginalHoverEffects/index1.html
Cada imagen con su texto.
En la cabecera tendremos como menú los mismos textos que en el acordeón, al pulsarlos se ampliará su sección de acordeón.
Cada texto del acordeón debería tener una animación ‘to guapa’. Ejemplos:
Los enlaces son ejemplos para ver, no tienen que usarse eso.
Se valorará que la web quede bien, recordad que menos es más.
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/
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:
Efectos
Mini ejercicio transformación
Vamos a coger el layout de los dos que hemos hecho el que más nos guste(flex o grid) y vamos añadir transformaciones en el hover de las imágenes. A vuestro gusto. ¡Sorprendedme!
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/
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/
Ejercicio Grid
Crear el siguiente template con grid:
Estadísticas web
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!