Recursos CSS Súper Útiles 🌈 (70 seleccionados a mano)

Recursos CSS Súper Útiles :rainbow:

Si te gusta esto, visita el sitio de Alicia para más. Enlace al final del artículo. :heart:


Una colección de 70 herramientas seleccionadas a mano, basadas en web, que son realmente útiles.
Cada una generará CSS puro sin necesidad de JS o ninguna biblioteca externa.

Todo el crédito va a los autores detrás de cada una de estas aplicaciones (donde fue posible, he vinculado a su GH/ redes sociales)

Contents

Generadores de Propiedades

1. Neumorphism

Genera estilos CSS Soft-UI usando sombras internas, por @adamgiebl

screenshot

2. Shaddows Brumm

Crea y obtén una vista previa de sombras suave y hermosas, por @brumm

screenshot

3. Fancy Border Radius

Genera objetos con formas interesantes usando border-radius, por @9Elements. Similar a BlobMaker

screenshot

4. Glow Generator

Genera efectos de brillo CSS puro y compatibles con navegadores cruzados

screenshot

5. Clothoid Corners

Genera esquinas redondeadas clothoid mediante CSS clip-path, por Takehiko Ono

screenshot

6. Glassmorphism

Construye fondos semitransparentes y borrosos tipo vidrio. Similar a ui.glass/generator

screenshot

7. Clipy

Genera objetos con formas complejas usando clip-path, por @bennettfeely

screenshot

8. CSS Filters

Genera y obtén una vista previa de filtros de fotos CSS puro estilo Instagram, por @ghosh

screenshot

9. Base64 Image

Codifica una imagen directamente en tu CSS en Base64

screenshot

10. Quantity Queries

Genera consultas CSS basadas en cantidad, por @drewminns


Animaciones

11. Animista

Área de juegos y generador de animaciones CSS, por Ana T

screenshot

12. Cubic-Bezier

Obtén una vista previa y genera animaciones cubic bezier avanzadas, por @LeaVerou

screenshot

13. Keyframes

Creador avanzado de animaciones de fotogramas clave, por @mitchas

14. Wait Animate

Usa animation-delay para simular retrasos, por @will-stone

15. Transition.Style

Copia y pega animaciones de transición, por @argyleink

screenshot


Fondos

16. Hero Patterns

Encuentra y personaliza fondos con patrones CSS puro simples, por @steveschoger

screenshot

17. Haikei

Genera banners y fondos SVG orgánicos únicos (similar a Shape Divider)

screenshot

18. Pattern Generator

Generador de patrones avanzado

screenshot

19. CSS Pattern

Colección de fondos con patrones CSS puro prefabricados, por @Afif13

screenshot

20. Patternizer

Construye fondos rayados, por @matthewlein

21. Patternify

Construye tu propio patrón de la vieja escuela, por @SachaGreif

screenshot

22. Animated BG

Genera fondos CSS puro animados y borrosos, por @Vincenius

screenshot

23. Trianglify

Diseñador de fondos geométricos (nota: solo semilibre), por @qrohlf

screenshot

24. Animated Backgrounds

Colección de animaciones de fondos CSS puro

25. Magic Pattern CSS Backgrounds

Colección de patrones de fondo reutilizables basados en SVG / CSS puro, con un explorador visual

screenshot


Colores

26. CSS Gradient

Constructor avanzado de gradientes CSS

27. Parametric Mixer

Compositor de colores CSS basado en ecualizador, por @dawidwoldu

screenshot

28. Palettte.

Desarrolla y ajusta esquemas de color

screenshot

29. Paletton

Constructor de paletas usando colores opuestos o atractivos

30. Grabient

Muestrea gradientes.
Similar a CoolHue, WebGradients.com, GradientHunt, GradientButtons y UI gradients

31. Color Hunt

Otro diseñador de paleta de colores

32. Easing Gradients

Gradientes CSS puro estilo cubic-bezier, por @larsenwork

33. Flat UI Colors

Paletas de colores seleccionadas a mano estilo plano, por @ahmetsulek

34. Color Tools

Mezcla, extrae, convierte y genera colores

35. ColorPalettes.Earth

Paletas de colores naturales de la naturaleza


Tipografía

36. Font Joy

Descubre y obtén una vista previa de varios emparejamientos de fuentes, por @Jack000

37. Type set With Me

Área de pruebas de tipografía y legibilidad, por @tsmith512

38. Type Scale

Genera tamaños de fuente de encabezado/cuerpo, por @jeremychurch

39. Glyphter

Crea fuentes de iconos a partir de gráficos SVG

40. Font-Library

Biblioteca etiquetada de Google Fonts, por @katydecorah

41. Glitter

Exportar texto Glitter estilo años 90


Cargadores

42. Spin Kit

Selección de animaciones de carga CSS limpias

screenshot

43. Whirl

100+ animaciones de carga CSS, listas para copiar y pegar

screenshot

44. Loader Generator

Cargadores CSS puros predefinidos y personalizados

screenshot

45. lukehaas - CSS-Loaders

Animaciones de carga CSS puro simples

screenshot

46. CSSLoaders

Cargadores CSS puros complejos

47. loading.io/css

Implementaciones CSS de cargadores comunes


Diseños

48. CSS Grid Garden

Juego interactivo para aprender CSS grid, por @thomaspark

49. FlexboxFroggy

Juego interactivo para aprender flexbox, por @thomaspark

50. Flexplorer

Demostración visual de flexbox, por @bennettfeely

51. Flexulator

Una calculadora interactiva de distribución de espacio CSS Flexbox, por @telagraphic

52. Grid Generator

Crear grillas usando las propiedades CSS grid-template, por @sdras (similar a grid.layoutit.com)

53. Layout Generator

Un creador de diseños CSS moderno

54. Box Model Diagram

Solo una demostración visual del modelo de caja


Informativo

55. CSS Timeline

Una historia de CSS

56. Screen Size Map

Ver tamaños de pantalla populares para diseño responsivo

57. CSS Ruler

Previsualizar varias unidades CSS en relación entre sí

58. bada55

Lista de códigos de color hexadecimal CSS muy divertidos
Ver también, colors.lol para algunas paletas de colores excesivamente descriptivas

59. Who can use?

Verifica la calificación de accesibilidad de combinaciones de colores dadas, similar a Colorable

60. Can I use?

Verificación de compatibilidad del navegador de varias características CSS, JS, HTML y web

61. Can I email?

Similar a Can I use?, pero verifica si una propiedad CSS dada (o elemento HTML) es compatible con clientes de correo electrónico

62. CSS Processing Tools

Convertir hacia y desde cualquier otro lenguaje CSS

63. Unused CSS

Busca en tu sitio CSS no utilizado y muestra estadísticas

64. Component.Gallery

Búsqueda global de componentes

65. Design System Gallery

Una colección de sistemas de diseño abiertos, para inspiración

66. Checklist.design

Una colección de mejores prácticas de diseño organizadas como listas de verificación

67. Glyphs

Una lista de códigos de caracteres glifos CSS (ver también GlyphSearch para iconos de biblioteca)

68. CSS-Tricks.com

El mejor blog de CSS que existe

69. Curated Design Tools

Una lista curada de herramientas de diseño impresionantes

70. Awesome-CSS-Frameworks

Una lista de marcos CSS de código abierto

71. CSS Reference

Una guía visual de propiedades CSS (similar a htmlreference.io)

72. MDN CSS Docs

Excelente documentación de todas las propiedades CSS disponibles

Si te gusta este tipo de cosas,
considera seguir para más :slight_smile:
Follow Lissy93 on GitHubFollow Lissy_Sykes on Twitter