GUÍA DE ESTILO

PARA JUEGOS Y PERFILES

{ 'background': 'linear-gradient(20deg, #000, #304e59)', 'color': '#529ebb', 'border': '2px solid #2f4d58' }

¡Hey! Estás aquí probablemente porque quieres la mejor página del lugar, así que deja que te presente los estilos JSON que usa la web para personalizar el contenido del usuario.

Lo primero que necesitas saber es CSS. Si no sabes nada, ¡visita este enlace y empieza a aprender!

Lo segundo que necesitas hacer es convertir ese CSS en JSON, de esta forma:

¡Hola! Soy un texto.

{ 'key': 'value', 'key': 'value' }

Donde 'key' significa la clave de la propiedad CSS, y 'value' significa el valor de dicha propiedad, por ejemplo: 'background': 'black'.

¡Y lo último que tienes que hacer es ser creativo! Usa tu cerebro y crea cosas increíbles. Colores, degradados complejos, imágenes de fondo... ¡Lo que quieras!

Nota: Por favor, entiende que algunas propiedades CSS como 'height' o 'position' están vetadas debido a su facilidad para crear páginas feas, y no quieres ver una página fea y patas arriba creada por algún troll, ¿verdad?

PLAYGROUND

Si necesitas practicar, o simplemente quieres crear algo desde cero, aquí tienes este editor en directo de CSS-JSON para probar lo que quieras.

Este texto mola.

EJEMPLOS

¡Siéntete libre de usar estos ejemplos donde quieras!

EJEMPLOS BÁSICOS

{ 'background': 'linear-gradient(180deg, pink, #cc5b90)', 'color': '#fff', 'border': '2px solid #cc5b90', 'border-radius': '10px', 'text-shadow': '0px 0px 5px black '}

Algodón de azúcar

{ 'background': '#000', 'color': '#fff', 'border': '1px solid #fff', 'font-family': 'monospace' }

Consola_

{ 'background': 'linear-gradient(#6f6f6f, transparent)', 'color': '#fff', 'border-radius': '20px 20px 0px 0px'}

Fantasma

{ 'background': 'radial-gradient(circle at left, #3c849f, #0c5275 50%) '}

Mar

EJEMPLOS AVANZADOS

Nota: Estos ejemplos podrían no funcionar en algunos navegadores.

{ 'background': '#614402', 'color': '#ffc400', 'border': '1px solid', 'background-image': 'url(https://raccreative.s3.eu-central-1.amazonaws.com/media/hologram.png)', 'text-shadow': '0px 0px 10px orange '}

Forget about libertyman

{ 'background': 'radial-gradient( ellipse farthest-corner at right bottom, #fedb37 0%, #fdb931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80% ), radial-gradient( ellipse farthest-corner at left top, #fff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100% )', 'color': '#000', 'border': '2px solid #685324' }

Oro

{ 'background': 'radial-gradient(circle at top left, green, #0c310b)', 'color': '#2cff00', 'border': '2px solid #6a6', 'box-shadow': '0px 0px 30px lime' }

Tóxico

{ 'background': '#a0a0a026', 'border': '1px solid #393939', 'box-shadow': 'inset 0px 0px 8px black', 'backdrop-filter': 'blur(10px)' }

backdrop filter

{ 'background': 'linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent)', 'color': '#fff', 'background-blend-mode': 'screen' }

Spectrum

{ 'background': 'linear-gradient(20deg, red, purple)', 'border': '2px solid #c6003a', 'box-shadow': '0px 0px 20px red', 'font-weight': '700', 'text-transform': 'uppercase', 'color': 'transparent', 'background-clip': 'text', 'text-shadow': '3px 3px 1px #f700e85e' }

No sé cómo nombrar este diseño, pero mola mucho, ¿verdad?

Motores