{"id":28411,"date":"2024-06-25T15:41:46","date_gmt":"2024-06-25T13:41:46","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28411"},"modified":"2024-06-25T15:41:48","modified_gmt":"2024-06-25T13:41:48","slug":"la-nueva-ola-de-css","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/","title":{"rendered":"La nueva ola de CSS:"},"content":{"rendered":"\n<p>El CSS est\u00e1 experimentando un renacimiento, gracias frameworks innovadores, amplias contribuciones de la comunidad y la constante evoluci\u00f3n de las pr\u00e1cticas de desarrollo web. Considerado en el pasado como limitado y aburrido, en los \u00faltimos a\u00f1os, el CSS ha experimentado una transformaci\u00f3n espectacular, convirti\u00e9ndose en una herramienta poderosa capaz de crear dise\u00f1os web interactivos e impresionantes. <\/p>\n\n\n\n<p>Ahora, el CSS permite a los desarrolladores realizar interfaces complejas y creativas que antes parec\u00edan imposibles.<\/p>\n\n\n\n<p>Imagina dise\u00f1ar algo tan complejo y <a href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">visualmente cautivador como la interfaz PipBoy de Fallout<\/a>, un proyecto que hemos realizado con \u00e9xito hace un par de semanas.<\/p>\n\n\n\n<p>Hoy en d\u00eda, los marcos y bibliotecas de CSS permiten a los desarrolladores extender los l\u00edmites del dise\u00f1o web, haciendo que la tarea, una vez mon\u00f3tona, no solo sea m\u00e1s f\u00e1cil, sino tambi\u00e9n emocionante. <strong>Bienvenidos a la nueva era del CSS,<\/strong> donde las posibilidades son tan ilimitadas como tu creatividad.<\/p>\n\n\n\n<p>Aqu\u00ed tienes cinco de los mejores repos de CSS que deber\u00edas explorar para mantenerte al d\u00eda en 2024:<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-9db265ce      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#bulma\" class=\"uagb-toc-link__trigger\">Bulma<\/a><li class=\"uagb-toc__list\"><a href=\"#animatecss\" class=\"uagb-toc-link__trigger\">Animate.css<\/a><li class=\"uagb-toc__list\"><a href=\"#tailwind-css\" class=\"uagb-toc-link__trigger\">Tailwind CSS<\/a><li class=\"uagb-toc__list\"><a href=\"#font-awesome\" class=\"uagb-toc-link__trigger\">Font Awesome<\/a><li class=\"uagb-toc__list\"><a href=\"#50-projects-50-days\" class=\"uagb-toc-link__trigger\">50 Projects 50 Days<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusi\u00f3n-el-css-est\u00e1-de-vuelta\" class=\"uagb-toc-link__trigger\">Conclusi\u00f3n: El CSS est\u00e1 de vuelta<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bulma\">Bulma<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repositorio: <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/jgthms\/bulma\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">jgthms\/bulma<\/a><\/li>\n\n\n\n<li><strong>Estrellas<\/strong>: 48.8k<\/li>\n\n\n\n<li> <strong>Descripci\u00f3n<\/strong>: Bulma es un marco de trabajo CSS moderno basado en Flexbox. Est\u00e1 dise\u00f1ado para ser f\u00e1cil de usar y personalizar, convirti\u00e9ndose en el favorito entre los desarrolladores para crear dise\u00f1os web responsivos y limpios.<\/li>\n\n\n\n<li><strong>Puntos destacados<\/strong>: Bulma proporciona un amplio conjunto de clases CSS para crear una variedad de componentes web sin necesidad de JavaScript. Esto lo convierte en una excelente opci\u00f3n para desarrolladores que prefieren mantener separadas las capas de dise\u00f1o y funcionalidad.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-animate-css\">Animate.css<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Repositorio<\/strong>: <a href=\"https:\/\/github.com\/animate-css\/animate.css\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">animate-css\/animate.css<\/a><\/li>\n\n\n\n<li><strong>Estrellas<\/strong>: 78.5k<\/li>\n\n\n\n<li><strong>Descripci\u00f3n<\/strong>: Animate.css es una biblioteca de animaciones listas para usar y compatibles con varios navegadores, ideal para ser utilizada en tus proyectos web. Excelente para \u00e9nfasis, p\u00e1ginas de aterrizaje, sliders y sugerencias que gu\u00edan la atenci\u00f3n.<\/li>\n\n\n\n<li><strong>Puntos destacados<\/strong>: La biblioteca es incre\u00edblemente f\u00e1cil de integrar y ofrece una amplia gama de animaciones aplicables con simples nombres de clase. Admite configuraciones personalizadas para las animaciones, como retrasos e iteraciones.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tailwind-css\">Tailwind CSS<\/h2>\n\n\n\n<p><strong>Repositorio<\/strong>: <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss\" target=\"_blank\" aria-label=\"tailwindlabs\/tailwindcss\n (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">tailwindlabs\/tailwindcss<br><\/a><strong>Estrellas<\/strong>: 71.3k<br><strong>Descripci\u00f3n<\/strong>: Tailwind CSS es un marco de trabajo CSS de utilidad primero que est\u00e1 repleto de clases como flex, pt-4, text-center y rotate-90 que pueden combinarse para construir cualquier dise\u00f1o, directamente en el marcado.<br><strong>Puntos destacados<\/strong>: El enfoque de Tailwind es \u00fanico porque anima a los desarrolladores a pensar en t\u00e9rminos de clases de utilidad en lugar de CSS personalizado. Este m\u00e9todo puede acelerar significativamente el proceso de desarrollo y garantizar la coherencia entre proyectos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-font-awesome\">Font Awesome<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Repositorio<\/strong>: <a href=\"https:\/\/github.com\/FortAwesome\/Font-Awesome\" target=\"_blank\" aria-label=\"FortAwesome\/Font-Awesome  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">FortAwesome\/Font-Awesome <\/a><\/li>\n\n\n\n<li><strong>Estrellas<\/strong>: 73.2k<\/li>\n\n\n\n<li><strong>Descripci\u00f3n<\/strong>: Font Awesome es un conjunto de iconos y herramientas popular utilizado por millones de dise\u00f1adores y desarrolladores. Proporciona iconos vectoriales escalables que pueden personalizarse instant\u00e1neamente: tama\u00f1o, color, sombra y cualquier cosa que se pueda hacer con CSS.<\/li>\n\n\n\n<li><strong>Puntos destacados<\/strong>: Font Awesome facilita la adici\u00f3n de iconos a tus proyectos. Con una documentaci\u00f3n extensa y una gran comunidad, es f\u00e1cil encontrar ayuda y ejemplos para casi cualquier caso de uso. Se integra perfectamente con varios marcos de trabajo y se actualiza constantemente con nuevas iconos y caracter\u00edsticas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-50-projects-50-days\">50 Projects 50 Days<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Repositorio<\/strong>: <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/bradtraversy\/50projects50days\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">bradtraversy\/50projects50days<\/a> <\/li>\n\n\n\n<li><strong>Estrellas<\/strong>: 27.9k <\/li>\n\n\n\n<li><strong>Descripci\u00f3n<\/strong>: Este repositorio ofrece 50 mini proyectos en HTML, CSS y JavaScript, perfectos para desarrolladores nuevos que quieran mejorar sus habilidades a trav\u00e9s de ejemplos pr\u00e1cticos.<\/li>\n\n\n\n<li><strong>Puntos destacados<\/strong>: Los proyectos cubren una amplia gama de funcionalidades y patrones de dise\u00f1o, proporcionando una experiencia pr\u00e1ctica con escenarios del mundo real. Esta es una excelente recurso para aprender haciendo.<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion-el-css-esta-de-vuelta\">Conclusi\u00f3n: El CSS est\u00e1 de vuelta<\/h2>\n\n\n\n<p>El CSS ha experimentado una evoluci\u00f3n significativa a lo largo de los a\u00f1os. La introducci\u00f3n de una<strong> nueva sintaxis <\/strong>para consultas y frameworks como <strong>Bulma <\/strong>y <strong>Tailwind CSS <\/strong>ha revolucionado la forma en que los desarrolladores piensan sobre la estilizaci\u00f3n de aplicaciones web. Estos marcos no solo proporcionan un conjunto robusto de herramientas, sino que tambi\u00e9n promueven las mejores pr\u00e1cticas a trav\u00e9s de su desarrollo liderado por la comunidad y una documentaci\u00f3n completa.<\/p>\n\n\n\n<p>Adem\u00e1s, bibliotecas como <strong>Animate.css<\/strong> y herramientas como <strong>Font Awesome<\/strong> reflejan el compromiso continuo de la comunidad para mejorar tanto la est\u00e9tica como la funcionalidad de los proyectos de desarrollo web. Proporcionan soluciones f\u00e1ciles de implementar que pueden mejorar significativamente la experiencia del usuario y la presentaci\u00f3n.<\/p>\n\n\n\n<p>En conclusi\u00f3n, explorar estos repos de CSS puede mantenerte actualizado en el desarrollo frontend, permiti\u00e9ndote crear aplicaciones web modernas, receptivas y visualmente atractivas con facilidad. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>El CSS est\u00e1 experimentando un renacimiento, gracias frameworks innovadores, amplias contribuciones de la comunidad y la constante evoluci\u00f3n de las pr\u00e1cticas de desarrollo web. Considerado en el pasado como limitado y aburrido, en los \u00faltimos a\u00f1os, el CSS ha experimentado una transformaci\u00f3n espectacular, convirti\u00e9ndose en una herramienta poderosa capaz de crear dise\u00f1os web interactivos e&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":28361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10632],"tags":[11742],"collections":[],"class_list":{"0":"post-28411","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-es","8":"tag-css-es","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Repos de CSS que debes conocer - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La nueva ola de CSS:\" \/>\n<meta property=\"og:description\" content=\"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-25T13:41:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T13:41:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"La nueva ola de CSS:\",\"datePublished\":\"2024-06-25T13:41:46+00:00\",\"dateModified\":\"2024-06-25T13:41:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/\"},\"wordCount\":781,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/\",\"name\":\"Repos de CSS que debes conocer - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp\",\"datePublished\":\"2024-06-25T13:41:46+00:00\",\"dateModified\":\"2024-06-25T13:41:48+00:00\",\"description\":\"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp\",\"width\":1792,\"height\":1024,\"caption\":\"css repos\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/la-nueva-ola-de-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/es\\\/frontend-es\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La nueva ola de CSS:\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Repos de CSS que debes conocer - Codemotion Magazine","description":"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/","og_locale":"en_US","og_type":"article","og_title":"La nueva ola de CSS:","og_description":"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-06-25T13:41:46+00:00","article_modified_time":"2024-06-25T13:41:48+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp","type":"image\/webp"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"La nueva ola de CSS:","datePublished":"2024-06-25T13:41:46+00:00","dateModified":"2024-06-25T13:41:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/"},"wordCount":781,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp","keywords":["CSS"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/","name":"Repos de CSS que debes conocer - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp","datePublished":"2024-06-25T13:41:46+00:00","dateModified":"2024-06-25T13:41:48+00:00","description":"Descubre estos repos de CSS y observa c\u00f3mo ha evolucionado de ser percibido como tedioso a convertirse en innovador, permitiendo la creaci\u00f3n de dise\u00f1os extraordinarios.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp","width":1792,"height":1024,"caption":"css repos"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/la-nueva-ola-de-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/"},{"@type":"ListItem","position":3,"name":"La nueva ola de CSS:"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-600x600.webp","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-24-17.23.54-A-super-widescreen-image-featuring-CSS-as-a-character.-CSS-is-portrayed-as-a-cool-trendy-and-swag-figure-with-a-stylish-outfit-sunglasses-and-a-co-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"El CSS est\u00e1 experimentando un renacimiento, gracias frameworks innovadores, amplias contribuciones de la comunidad y la constante evoluci\u00f3n de las pr\u00e1cticas de desarrollo web. Considerado en el pasado como limitado y aburrido, en los \u00faltimos a\u00f1os, el CSS ha experimentado una transformaci\u00f3n espectacular, convirti\u00e9ndose en una herramienta poderosa capaz de crear dise\u00f1os web interactivos e&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28411"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28411\/revisions"}],"predecessor-version":[{"id":28413,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28411\/revisions\/28413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/28361"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=28411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28411"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}