Usa el Vista Previa de Bordes Redondeados gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
De Esquinas Cuadradas a Manchas Orgánicas
El radio de borde es la propiedad CSS que redondea las esquinas de un cuadro. Con un solo valor obtienes una tarjeta simple y redondeada. Con ocho valores, cuatro radios horizontales y cuatro radios verticales, obtienes formas orgánicas de mancha: las formas suaves y redondeadas que se usan en secciones principales modernas, avatares y fondos decorativos. La herramienta de arriba te da ocho controles, uno por valor, y muestra la forma en vivo.
La sintaxis parece rara al principio. Los cuatro números antes de la barra son los radios horizontales de las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. Los cuatro números después de la barra son los radios verticales de las mismas esquinas en el mismo orden. Cuando un radio horizontal y uno vertical difieren, esa esquina se estira en una elipse en lugar de un cÃrculo, y el cuadro empieza a parecer orgánico.
Empieza Con una Mancha y Luego Ajústala
La forma por defecto en la herramienta ya es una mancha suave: los ocho valores están entre el 40 y el 60 por ciento. Desde ahÃ, mueve un control a la vez y observa qué esquina cambia. Subir mucho una esquina y bajar su vecina crea una sensación asimétrica y hecha a mano. Llevar todos los valores hacia el 50 por ciento devuelve la forma hacia un cÃrculo.
El botón de forma aleatoria es una forma rápida de explorar. Cada pulsación genera un nuevo conjunto de valores entre el 30 y el 80 por ciento. Cuando una forma aleatoria te llame la atención, ajústala a mano: acerca la esquina más extrema hacia las demás hasta que la forma se sienta intencionada en lugar de accidental. La aleatoriedad encuentra ideas; la edición las convierte en diseños.
Manchas en Composiciones Reales
Las manchas funcionan mejor como decoración, no como contenedores de texto importante. Una mancha detrás de una imagen principal, un avatar de mancha para una foto de perfil, o una insignia de mancha en una página de inicio aportan calidez y modernidad. El texto dentro de una mancha es arriesgado, porque los bordes curvos recortan el área legible y las lÃneas largas chocan con la forma.
Si colocas contenido dentro de una forma redondeada, mantenlo corto y centrado: una sola palabra, un icono o una insignia pequeña. Para tarjetas que contienen párrafos, usa un radio uniforme modesto, como de 12 a 24 pÃxeles, en lugar de una mancha. Los lectores nunca deben pelear con el contenedor para leer el contenido.
Copia el CSS y Mantenlo Adaptable
Pulsa Copiar CSS y pega la regla en tu hoja de estilos. Los radios en porcentaje escalan con el elemento, asà que una mancha que se ve bien a 280 pÃxeles mantiene su carácter a 400 pÃxeles. Los radios fijos en pÃxeles no escalan igual, y por eso las manchas usan porcentajes. Prueba la forma también con el ancho de un teléfono: una mancha que se ve elegante en grande puede verse apretada en pequeño, y un conjunto de valores algo más simple suele funcionar mejor ahÃ.
Una precaución: las manchas muy extremas pueden recortar contenido y confundir a los lectores de pantalla si esconden texto detrás de curvas. Mantén las manchas decorativas vacÃas o detrás del contenido, nunca envueltas con fuerza alrededor del texto. Y si la forma tiene significado, como una insignia de estado, no dependas solo de la forma: añade una etiqueta o un color que comunique la misma información.
Ideas Más Allá de las Manchas
Los mismos ocho controles crean más que manchas. Ajusta las dos esquinas superiores en alto y las dos inferiores a cero para una forma de arco, útil para marcos de imagen. Ajusta una esquina a cero y el resto en alto para una sensación de bocadillo. Ajusta los ocho iguales para un cÃrculo o una pÃldora. Una vez que entiendes la sintaxis de la barra, toda una familia de formas se abre desde una sola propiedad, y la herramienta es la forma más rápida de aprenderla jugando.
Por último, guarda una pequeña biblioteca de formas que te gusten. Anota los ocho valores de cada favorita, igual que anotarÃas una paleta de colores, y reutilÃzalos en un proyecto. Un conjunto coherente de formas de mancha se convierte en parte del lenguaje de una marca, mientras que una forma aleatoria nueva en cada página solo parece inestable.
Pingback: Border Radius Previewer - Shape Corners with 8 Sliders