Colección de experimentos, ejemplos y apuntes sobre HTML y CSS. El repositorio sirve como laboratorio personal para probar formas, animaciones, imágenes, layouts y componentes visuales que puedan reutilizarse en otros proyectos.
Los ejemplos son independientes y, en general, pueden ejecutarse abriendo directamente su archivo .html en un navegador moderno.
- Elipses y formas
- Imágenes dentro de
div - Botón Whimsical
- Pruebas y apuntes
- Cómo probar los ejemplos
- Compatibilidad
- Cómo añadir contenido
- Recursos
La carpeta elipses/ contiene ejemplos de formas creadas con CSS:
index.html: elipses fijas, una elipse animada y un recorte conclip-path.index_responsive.html: alternativas adaptables usando porcentajes,vw,aspect-ratioy una media query.
Conceptos principales: border-radius, clip-path: ellipse(), @keyframes, transform y diseño responsive.
La carpeta img-div/ reúne ejemplos para mostrar imágenes en contenedores y controlar su encuadre con object-fit o background-size:
index.html: imágenes usadas como fondos de distintos contenedores.Object-Fit.html: ejemplo general deobject-fit.Object-Fit-Flexbox.html: galería con Flexbox.Object-Fit-CSSGrid.html: galería con CSS Grid.Object-Fit-Absolute.html: imagen posicionada conposition: absolute.README.md: explicación y fragmentos reutilizables de los tres enfoques.
Esta carpeta también contiene las imágenes locales usadas por las demos.
La carpeta whimsical-button/ contiene un botón con partículas animadas alrededor de su borde:
whimsical-button.html: demo interactiva.INFO_Whimsical_Button.md: características, estructura, personalización y compatibilidad.
El componente utiliza CSS moderno, incluyendo offset-path, oklch(), light-dark() y estados :hover y :focus-visible.
La carpeta PRUEBAS-PARA-BORRAR/ contiene material experimental o temporal:
README.md: referencia breve a React y su documentación oficial.Quick_Start.md: apuntes sobre componentes, JSX, estilos y renderizado en React.
Su contenido no forma parte de una aplicación ejecutable del repositorio y puede cambiar o eliminarse durante la limpieza de pruebas.
- Clona o descarga el repositorio.
- Abre la carpeta en VS Code o en tu navegador.
- Abre cualquiera de los archivos
.htmlindicados en las secciones anteriores. - Para una experiencia de desarrollo más cómoda, usa una extensión de servidor local, como Live Server, y abre el archivo desde ese servidor.
No hay dependencias ni comandos de compilación definidos actualmente.
Los ejemplos básicos funcionan en navegadores modernos. El botón Whimsical y algunos experimentos de CSS dependen de características relativamente recientes, por lo que conviene usar una versión actualizada de Chrome, Edge, Firefox o Safari.
Cuando una característica no sea compatible, el navegador puede mostrar el HTML sin el efecto visual avanzado. La funcionalidad básica del documento debería mantenerse siempre que sea posible.
Para mantener el repositorio fácil de ampliar:
- Crea una carpeta con un nombre descriptivo.
- Añade una demo HTML autocontenida y, si hace falta, sus imágenes o estilos.
- Incluye un README dentro de la carpeta cuando el ejemplo tenga varias variantes o decisiones importantes.
- Añade aquí una nueva subsección con una descripción breve y enlaces a los archivos principales.
- Indica las propiedades CSS destacadas y cualquier requisito de compatibilidad.
Plantilla para futuras entradas:
## Nombre del experimento
Descripción breve del objetivo del ejemplo.
- [`demo.html`](ruta/demo.html): demo principal.
- [`README.md`](ruta/README.md): notas y decisiones de implementación.
Conceptos principales: `propiedad-css`, `otra-propiedad` y `técnica`.- MDN Web Docs: CSS
- MDN Web Docs: HTML
- React
- React Learn
- WallpaperCave: fuente de referencia para algunos recursos visuales.
Consulta el archivo LICENSE para conocer las condiciones de uso de este repositorio.