Hola, este es el artículo sobre la charla que dí en la #MeetupWPValencia el día 24 de abril de 2025, dejaré aquí las diapositivas, algún comentario, extras y por supuesto a todos los enlaces y recursos nombreados en la misma. Si quieres dejar algún comentario puedes hacerlo al final del post (cómo siempre).
Muchas gracias al grupo de la Meetup y a todos los que asistieron:
Esta charla no ha sido ningún taller ni masterclass, simplemente me gustaba hacer un pequeño recorrido sobre el CSS (Cascade Style Sheet) y qué es para el desarrollo web, y algunos tips para usar CSS en el entorno de WordPress. Puse en el título WordPress pero sirve también para quien use otro constructor, digase Elementor o Bricks, etc.
¿Por qué la presentación con astronautas? Me gusta la ciencia ficción y el videoclip de una canción de Moby «We are made of stars»
El lenguaje CSS y HTML es la base, con estos 2 ya se pueden hacer webs.
CSS (Cascading Style Sheets) fue creado por Håkon Wium Lie en 1994 mientras trabajaba en el CERN junto a Tim Berners-Lee, con el objetivo de separar la estructura del contenido (HTML) del diseño visual de las páginas web. Antes de CSS, los estilos se aplicaban directamente en el HTML, lo que dificultaba el mantenimiento y la coherencia visual. En 1996, la W3C (World Wide Web Consortium) publicó la primera especificación oficial de CSS (CSS1), permitiendo controlar colores, fuentes y márgenes de forma más eficiente. Con el tiempo, surgieron nuevas versiones (CSS2, CSS3 y ahora CSS4 en desarrollo), añadiendo capacidades avanzadas como animaciones, transiciones, diseño responsivo (media queries) y variables. Hoy en día, CSS es uno de los pilares fundamentales del desarrollo web moderno, junto a HTML y JavaScript.
Una imagen vale más que mil palabras. El CSS está en todas partes.
El «Inspector de código» de los navegadores en la herramienta por excelencia para saber que está pasando en realidad debajo de lo que vemos en el frontend. Su atajo de teclado es la tecla F12.
Luego tenemos extensiones interesantes que nos pueden dar un extra, como por ejemplo disponer de guardado para modificaciones que estemos haciendo directamente en el navagador sobre la página y otros.
Stylebot: https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=es
Visual CSS Editor: https://chromewebstore.google.com/detail/visual-css-editor/cibffnhhlfippmhdmdkcfecncoaegdkh?hl=es
Atrévete con las animaciones con CSS Brio: https://chromewebstore.google.com/detail/css-brio/jobnjchaapmooplimahhnailldelmmed?hl=es
Para cualquier duda o consulta sobre CSS, reglas, ejemplos… tenemos las clásicas:
En esta web podemos crear formas «Blob» y nos da el código SVG que podemos utilizar para fondos por ejemplo.
Esta web tiene varias herramientas de las que destaco su generador de formas para la propiedad «Clip-Path» de CSS, para recortar DIVs como querais, puedes hacer máscaras a tus fondos o utilizar un SVG.
Se pueden hacer animaciones con estos «recortes» siempre que se mantenga el mismo número de vertices
10015.io : navaja suiza de los códigos CSS y unas cuantas cosas más
Y aquí alguna página más interesante:
css.glass, para experimentar con el efecto de glassmorphism
web code tools, CSS Generator by Netlify, unas cuantas herramientas generadoras de CSS, hasta con IA Workik
Crear un «Child-Theme» (tema hijo), personalmente no me gusta depender de las actualizaciones del tema padre, pueden cambiar cosas al actualizarlo. Se pierden todos los cambios si cambiamos de tema.
Personalizador: los temas clásicos en las opciones de su «Personalizador» disponen de un apartado para introducir CSS, podemos ver los cambios al instante, afecta globalmente y no se mantiene si cambiamos de Theme.
Bloque HTML: Podemos crear un bloque HTML en el contenido que estemos creando e intruducir código CSS dentro de las etiquetas <style>…</style>. Como está dentro del contenido siempre permanece ahí aunque cambiemos de tema.
Simple Custom CSS , como en el personalizador pero mantienes tu CSS aunque cambies de tema
Simple Custom CSS & JS, más control, puedes elegir donde incrustarlo, head ó footer, o si en el frontend o en el backend
WP Headers And Footers, si lo utilizas para insertar etiquetas aprovechalo para introducir tu CSS también
Code Snippets o WPCode , te ayudan a insertar tu código PHP, HTML, JS y por supuesto CSS y darle lógica condicional, carga código sólo en las páginas que quieras, y todo muy bien organizadito.
Site Origin, editor visual de CSS y CSS Hero, otro editor CSS completísimo (de pago) y algo complejo.
Blocks CSS, simplemente añade a los bloques de gutenberg un apartado para CSS personalizado
Pattern CSS, otro plugin para personalizar CSS por bloque
Editor Plus, añade opciones visuales de personalización CSS a los insulsos bloques por defecto, y alguna cosa más (lleva un año sin actualizarse, pero cumple lo que dice)
Core Frame Work, crea tus estilos, guardate tus widgets, reutilizalos, utiliza tus propias variables.
WindPress y Draft integran el framework Tailwind CSS y sus clases de utilidad
Bootscore.me, si estás familiarizado con Bootstrap este Starter Theme es para ti, también hay un conjunto de bloques para Gutenberg basado en Bootstrap: All Bootstrap Blocks
Change class in Viewport: Super ligero, si tenemos ya la animación CSS, asignemos su clase css cuando aparezca en el contenido de la página.
Lo último de WordPress, el Full Site Editing, tiene una curva de aprendizaje un poco alta al principio, pero se supone que será la modularización total y ayudará al desarrollo personalizado.
Podemos editar directamente en las opción de «Apariencia» la hoja de estilos general, estilos personalizados para los bloques de Gutenberg y podemos también añadir CSS extra.
Nexter.com, tiene el tema Nexter en formato clásico o FSE, si le añades la extensión que también proporcionan nos da un montón de funcionalidades para empezar una buena base. Disponen también de una colección de bloques para Gutenberg y Elementor bastante avanzada.
GreenShift, Tema FSE, super optimizado y pensado para quien tiene mano con el CSS. Su colección de bloques parea Gutenberg es una pasada, optando por las animaciones e interacciones avanzadas.
Un placer haber realizado esta charla!
Ahora te toca a tí comentar.
Super interesante César, que pena que ayer me surgió un imprevisto y finalmente no pude acudir. Un cordial saludo.
Gracias Emilio, lo primero es lo primero. Nos vemos la siguiente.