Categoría: 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:

https://alvarotrigo.com/blog/css-text-animations/

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:

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/

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771