Con el ejercicio del otro día (acordeón galería de imágenes) vamos a modificarlo para incorporar Bootstrap poniendo:
La barra de navegación con navbar.
El acordeón el de bootstrap.
Crear un botón ‘login’ que nos abra un modal con dos cajas de texto usuario y contraseña.
Para empezar, nuestra amiga w3schools:
https://www.w3schools.com/bootstrap4/default.asp
https://www.w3schools.com/bootstrap5/index.php
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php
Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:
https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Novedades de 5.0 respecto a 4:
https://www.pedrodelanube.com/bootstrap-5-que-hay-de-nuevo/
Aquí encontraremos diferentes bootstraps tuneados:
Y aquí templates listos para usar:
https://colorlib.com/wp/free-bootstrap-templates/
En trifulcas hay código de muchos ejemplos:
https://trifulcas.com/ejemplos-bootstrap/
https://trifulcas.com/ejemplo-bootstrap-2/
https://codepen.io/ajaypatelaj/pen/prHjD
Un análisis exhaustivo del grid de bootstrap:
https://trifulcas.com/analisis-del-grid-de-bootstrap/
Ejemplos del grid de bootstrap:
https://coreui.io/docs/layout/grid/
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
Probad a hacer el primer ejercicio de esta web:
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
https://codepen.io/finnhvman/pen/xXpzVN
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://github.com/xieranmaya/blog/issues/12
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:
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.
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.
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: