Con solo CSS:
Cómo se hizo:
https://css-tricks.com/css-only-infinite-and-circular-image-slider/
Categoría: CSS
Enlaces JS
Seis juegos con solo CSS
https://codepen.io/jh3y/pen/KKNwpzN
https://codepen.io/M_J_Robbins/full/XpQZOG
Ejercicio bootstrap
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.
Bootstrap
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
Ejercicios CSS
Probad a hacer el primer ejercicio de esta web:
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
Flipadas CSS
https://codepen.io/finnhvman/pen/xXpzVN
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://github.com/xieranmaya/blog/issues/12
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:
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.