Carmen Ansio's banner
Carmen Ansio's profile picture

Carmen Ansio

@carmenansio • 67,159 subscribers

Design Systems @stripe

Shorts

A "Pull to Dark" toggle

A "Pull to Dark" toggle

102,998 görüntüleme

📣 Generador de colores accesibles Randoma11y genera pares de colores para diseños que respetan la regla del contraste. 👉 👈

📣 Generador de colores accesibles Randoma11y genera pares de colores para diseños que respetan la regla del contraste. 👉 👈

208,464 görüntüleme

Generador de estructuras HTML y CSS con Flexbox y Grid Layout 🤘🏻

Generador de estructuras HTML y CSS con Flexbox y Grid Layout 🤘🏻

103,577 görüntüleme

🚀 Acaban de lanzar que será el nuevo sitio, dominio y hogar para el desarrollo de Angular. El lanzamiento de hoy incluye nuevos tutoriales, un playground y documentación actualizada que nos ayudará a la hora de construir con las últimas features de Angular.

🚀 Acaban de lanzar que será el nuevo sitio, dominio y hogar para el desarrollo de Angular. El lanzamiento de hoy incluye nuevos tutoriales, un playground y documentación actualizada que nos ayudará a la hora de construir con las últimas features de Angular.

88,713 görüntüleme

Os comparto mi herramienta favorita ❤️ Animista es una librería creada por Ana Travas con una gran colección de animaciones CSS prefabricadas. Las podéis customizar y obtener el código generado para añadirlo a vuestra web 👇

Os comparto mi herramienta favorita ❤️ Animista es una librería creada por Ana Travas con una gran colección de animaciones CSS prefabricadas. Las podéis customizar y obtener el código generado para añadirlo a vuestra web 👇

101,416 görüntüleme

Con Compress Image podrás: 🤏 Reducir el tamaño de tus imágenes hasta en un 90% 🧪 Comprimir imágenes JPG y PNG 🏎 Convertir tus imágenes en formato webp 💰 100% gratis y sin límites de conversión

Con Compress Image podrás: 🤏 Reducir el tamaño de tus imágenes hasta en un 90% 🧪 Comprimir imágenes JPG y PNG 🏎 Convertir tus imágenes en formato webp 💰 100% gratis y sin límites de conversión

87,487 görüntüleme

🐝 Mega listado de APIs públicas 👀 Puedes explorar la lista por categoría 📟 Puedes utilizar el buscador para encontrar las mejores APIs

🐝 Mega listado de APIs públicas 👀 Puedes explorar la lista por categoría 📟 Puedes utilizar el buscador para encontrar las mejores APIs

55,418 görüntüleme

🗡️ ¿Qué relación tiene CSS con Zelda? ¡Si quieres saberlo no te pierdas mañana mi charla en la miduConf! 🤯 La conferencia de Programación y Tecnología que organiza Miguel Ángel Durán 👩‍💻 7 Speakers TOP 💬 Charlas para todos los niveles 🎁 +256 regalos y premios ...¡y muchas sorpresas!

🗡️ ¿Qué relación tiene CSS con Zelda? ¡Si quieres saberlo no te pierdas mañana mi charla en la miduConf! 🤯 La conferencia de Programación y Tecnología que organiza Miguel Ángel Durán 👩‍💻 7 Speakers TOP 💬 Charlas para todos los niveles 🎁 +256 regalos y premios ...¡y muchas sorpresas!

41,191 görüntüleme

¿Quieres aprender a construir componentes con la ayuda de CSS flexbox? 🤘🏻

¿Quieres aprender a construir componentes con la ayuda de CSS flexbox? 🤘🏻

36,855 görüntüleme

🔮 Cero JS. 100% CSS. Cards que hacen morph, cambio de tema claro/oscuro con toggle animado, y transiciones fluidas con :has(), attr() y variables CSS. →

🔮 Cero JS. 100% CSS. Cards que hacen morph, cambio de tema claro/oscuro con toggle animado, y transiciones fluidas con :has(), attr() y variables CSS. →

21,944 görüntüleme

¿Te cuesta elegir colores para tus proyectos? 🎨 → Paletas listas aplicadas en tiempo real. → Inspírate y afina tu UI. ¡Prueba Happy Hues!

¿Te cuesta elegir colores para tus proyectos? 🎨 → Paletas listas aplicadas en tiempo real. → Inspírate y afina tu UI. ¡Prueba Happy Hues!

23,827 görüntüleme

✨ ¡Hice esta animación en p5.js con partículas que rebotan y cambian de color! Aquí tienes el código y una explicación paso a paso para que tú también puedas hacerlo ↓

✨ ¡Hice esta animación en p5.js con partículas que rebotan y cambian de color! Aquí tienes el código y una explicación paso a paso para que tú también puedas hacerlo ↓

23,741 görüntüleme

Descubre cómo crear un texto degradado y responsive en CSS ↓

Descubre cómo crear un texto degradado y responsive en CSS ↓

27,407 görüntüleme

🎉 ¡Entusiastas del CSS, atención! 🚀 🎄 ¡El #AdventOfCSS está de vuelta y este diciembre Amy Dutton nos trae algo especial! 🌟 👩‍💻 Un desafío único de 24 días, con un proyecto integral. Vas a sumergirte en la creación de un sistema de diseño completo usando el increíble framework de Storybook. 🖥️✨ 🎁 ¡Construye la interfaz de una aplicación de Amigo Secreto! 🎅 Prepárate para interfaces intuitivas, gestión del inicio de sesión, añadir listas de deseos e intercambiar regalos. ¡Muy pronto, capturas de pantalla para abrir el apetito! 🔓 Este año, con RedwoodSDK como patrocinador, ¡todos los desafíos y soluciones son GRATIS! 🎊

🎉 ¡Entusiastas del CSS, atención! 🚀 🎄 ¡El #AdventOfCSS está de vuelta y este diciembre Amy Dutton nos trae algo especial! 🌟 👩‍💻 Un desafío único de 24 días, con un proyecto integral. Vas a sumergirte en la creación de un sistema de diseño completo usando el increíble framework de Storybook. 🖥️✨ 🎁 ¡Construye la interfaz de una aplicación de Amigo Secreto! 🎅 Prepárate para interfaces intuitivas, gestión del inicio de sesión, añadir listas de deseos e intercambiar regalos. ¡Muy pronto, capturas de pantalla para abrir el apetito! 🔓 Este año, con RedwoodSDK como patrocinador, ¡todos los desafíos y soluciones son GRATIS! 🎊

31,975 görüntüleme

🔥 Guía visual de los selectores CSS más populares con ejemplos de código

🔥 Guía visual de los selectores CSS más populares con ejemplos de código

31,763 görüntüleme

Colección de mejores prácticas de diseño UX para tener en cuenta al crear interfaces. →

Colección de mejores prácticas de diseño UX para tener en cuenta al crear interfaces. →

10,540 görüntüleme

Estándares de color y nomenclaturas @codepen de David Aerne 👉 👈

Estándares de color y nomenclaturas @codepen de David Aerne 👉 👈

12,818 görüntüleme

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

Puedes diseñar tu logotipo con inteligencia artificial en 👉 👈
0:29
carmenansio's profile picture

Puedes diseñar tu logotipo con inteligencia artificial en 👉 👈

Carmen Ansio

289,901 görüntüleme • 3 yıl önce

Rebuilding 90s nostalgia with modern native APIs for
0:20
carmenansio's profile picture

Rebuilding 90s nostalgia with modern native APIs for

Carmen Ansio

47,308 görüntüleme • 5 ay önce

🎨 El generador de paletas de colores más rápido, incluye categorías para generar la combinación de colores que mejor encaje con tu proyecto. 👉 👈
0:23
carmenansio's profile picture

🎨 El generador de paletas de colores más rápido, incluye categorías para generar la combinación de colores que mejor encaje con tu proyecto. 👉 👈

Carmen Ansio

233,624 görüntüleme • 3 yıl önce

MEGA directorio de recursos y herramientas de diseño UX / UI para ayudar a diseñar y desarrollar mejores interfaces de usuario. 👉 👈
0:27
carmenansio's profile picture

MEGA directorio de recursos y herramientas de diseño UX / UI para ayudar a diseñar y desarrollar mejores interfaces de usuario. 👉 👈

Carmen Ansio

127,579 görüntüleme • 3 yıl önce

Generador de tipografías que funcionan juntas👇
0:23
carmenansio's profile picture

Generador de tipografías que funcionan juntas👇

Carmen Ansio

130,551 görüntüleme • 3 yıl önce

🚨 anime.js se ha renovado por completo Nueva docu, demos interactivas y una UI que da gusto explorar. Si estabas esperando una excusa para ponerte con animaciones, es esta. →
0:54
carmenansio's profile picture

🚨 anime.js se ha renovado por completo Nueva docu, demos interactivas y una UI que da gusto explorar. Si estabas esperando una excusa para ponerte con animaciones, es esta. →

Carmen Ansio

42,824 görüntüleme • 1 yıl önce

🚀 ¿Necesitas una tipografía para tu proyecto? 🥰 Free faces es una colección de tipografías gratuitas con una web hermosa 👇
0:24
carmenansio's profile picture

🚀 ¿Necesitas una tipografía para tu proyecto? 🥰 Free faces es una colección de tipografías gratuitas con una web hermosa 👇

Carmen Ansio

73,061 görüntüleme • 2 yıl önce

🚀 Colección de recursos sobre diseño UI/UX en un solo lugar, donde puedes encontrar: - Libros recomendados - Generadores de colores - Iconos gratis - Sistemas de diseño
0:20
carmenansio's profile picture

🚀 Colección de recursos sobre diseño UI/UX en un solo lugar, donde puedes encontrar: - Libros recomendados - Generadores de colores - Iconos gratis - Sistemas de diseño

Carmen Ansio

69,979 görüntüleme • 2 yıl önce

🚀 Si estas empezando en el mundo del desarrollo web, te he encontrado el tutorial más bonito de todo internet 👇
0:32
carmenansio's profile picture

🚀 Si estas empezando en el mundo del desarrollo web, te he encontrado el tutorial más bonito de todo internet 👇

Carmen Ansio

64,402 görüntüleme • 2 yıl önce

Sigue pareciéndome el tutorial más bonito de HTML y CSS que hay online ✨ Claro, bien escrito, y perfecto si estás comenzando →
0:32
carmenansio's profile picture

Sigue pareciéndome el tutorial más bonito de HTML y CSS que hay online ✨ Claro, bien escrito, y perfecto si estás comenzando →

Carmen Ansio

32,853 görüntüleme • 1 yıl önce

🚀 ¿Quieres entender cómo se construyen los SVG? Este es el mejor tutorial interactivo de internet 😍
0:34
carmenansio's profile picture

🚀 ¿Quieres entender cómo se construyen los SVG? Este es el mejor tutorial interactivo de internet 😍

Carmen Ansio

52,777 görüntüleme • 2 yıl önce

🎨 ¿Necesitas poner un poco de orden en tus documentos de diseño? Aprende buenas prácticas con este tutorial sobre: - Diseño UI - Sistemas de diseño - Colores - Tipografía ℹ️ Guárdalo para más tarde porque tiene tanta info que hoy no te lo acabas 🔖
0:34
carmenansio's profile picture

🎨 ¿Necesitas poner un poco de orden en tus documentos de diseño? Aprende buenas prácticas con este tutorial sobre: - Diseño UI - Sistemas de diseño - Colores - Tipografía ℹ️ Guárdalo para más tarde porque tiene tanta info que hoy no te lo acabas 🔖

Carmen Ansio

41,792 görüntüleme • 2 yıl önce

Still can’t believe this happened 🥹 My talk from #Config2025 is now live! Massive thanks to the Figma team and all the mind-blowing speakers for making it unforgettable 💜 Special shoutout to Maxime Davo Christine Vallaure miggi from figgi ˗ˏˋ rogie xcx ˎˊ˗ you made it extra magical. Go give it a watch if you wanna see me geek out about motion & Figma ✨ →
0:28
carmenansio's profile picture

Still can’t believe this happened 🥹 My talk from #Config2025 is now live! Massive thanks to the Figma team and all the mind-blowing speakers for making it unforgettable 💜 Special shoutout to Maxime Davo Christine Vallaure miggi from figgi ˗ˏˋ rogie xcx ˎˊ˗ you made it extra magical. Go give it a watch if you wanna see me geek out about motion & Figma ✨ →

Cosmic Red

19,811 görüntüleme • 1 yıl önce

Crea imágenes SVG con la ayuda de la IA de forma gratuita Convierte mensajes de texto en imágenes SVG que puedes descargar. 🤘🏻
0:21
carmenansio's profile picture

Crea imágenes SVG con la ayuda de la IA de forma gratuita Convierte mensajes de texto en imágenes SVG que puedes descargar. 🤘🏻

Carmen Ansio

32,934 görüntüleme • 2 yıl önce

Año nuevo, web nueva → Échale un vistazo!
0:26
carmenansio's profile picture

Año nuevo, web nueva → Échale un vistazo!

Carmen Ansio

22,097 görüntüleme • 1 yıl önce

¿Crear y probar paletas de colores en una interfaz? Usa Tintmint, con IA. Genera paletas con un prompt y úsalas en tiempo real en distintas vistas. ¡Fácil y rápido! 🤘🏻
0:30
carmenansio's profile picture

¿Crear y probar paletas de colores en una interfaz? Usa Tintmint, con IA. Genera paletas con un prompt y úsalas en tiempo real en distintas vistas. ¡Fácil y rápido! 🤘🏻

Carmen Ansio

27,612 görüntüleme • 2 yıl önce

¡Interactividad CSS! 🔥 Con :has(), el contenedor "detecta" si una .shape tiene :hover. Luego, con :not(:hover), hacemos que solo las demás se encojan, roten y difuminen. →
0:20
carmenansio's profile picture

¡Interactividad CSS! 🔥 Con :has(), el contenedor "detecta" si una .shape tiene :hover. Luego, con :not(:hover), hacemos que solo las demás se encojan, roten y difuminen. →

Carmen Ansio

15,730 görüntüleme • 1 yıl önce

🎨 Herramienta para crear escalas proporcionales para tipografía, iconografía, espaciado y componentes en sistemas de diseño.
0:22
carmenansio's profile picture

🎨 Herramienta para crear escalas proporcionales para tipografía, iconografía, espaciado y componentes en sistemas de diseño.

Carmen Ansio

27,955 görüntüleme • 2 yıl önce

🚀 Este es el articulo interactivo más increíble que he leido sobre animación y SVG Te ayudará a comprender la lógica subyacente que hay detrás del comportamiento de las curvas Bezier tan usadas en animación y SVG. Gracias Richard Ekwonye ❤️ 👉 👈
0:38
carmenansio's profile picture

🚀 Este es el articulo interactivo más increíble que he leido sobre animación y SVG Te ayudará a comprender la lógica subyacente que hay detrás del comportamiento de las curvas Bezier tan usadas en animación y SVG. Gracias Richard Ekwonye ❤️ 👉 👈

Carmen Ansio

25,599 görüntüleme • 2 yıl önce

🎨 ¿Buscas la ilustración perfecta? Descubre CocoMaterial, la biblioteca de ilustraciones dibujadas a mano de código abierto con casi 3000 imágenes. Listas para personalizar y descargar 🚀 👉 👈
0:24
carmenansio's profile picture

🎨 ¿Buscas la ilustración perfecta? Descubre CocoMaterial, la biblioteca de ilustraciones dibujadas a mano de código abierto con casi 3000 imágenes. Listas para personalizar y descargar 🚀 👉 👈

Carmen Ansio

21,400 görüntüleme • 2 yıl önce