Share
Esto va a parecer una obviedad para muchos de ustedes, pero veo que sucede tan a menudo que pensé que valía la pena mencionarlo. Vamos a llamar a este problema esquinas incorrectamente anidadas; Un pequeño detalle que puede arruinar un diseño brillante.!
Las esquinas anidadas incorrectamente se pueden encontrar en diseños de todo tipo, pero los veo más a menudo en iconos e interfaces. Si aún no tienes idea de lo que estoy hablando, echa un vistazo a estas dos imágenes de una maqueta de lightbox, ¿cuál de ellas me hace rechinar los dientes??
Sí, es el segundo en el que perderé el sueño..
En pocas palabras; Si tiene dos esquinas redondeadas paralelas, la esquina exterior debe tener un radio más grande que "fluya" alrededor de la que está en el interior..
Sin querer entrar en fórmulas matemáticas (¿alguien dijo tarta?) Intente visualizar un punto central, el "origen", alrededor del cual se curva su primer radio. Ahora usa ese mismo punto para redondear tu esquina exterior:
Forma tus curvas de esta manera y encontrarás el resultado final mucho más fácil para el ojo.
Piense en el efecto que está creando como doblar una tubería:
Artesano doblando una pipa Las interfaces construidas en html / css pueden ser tan culpables de esquinas anidadas incorrectamente. Piense en elementos de formulario dentro de un fieldset, o botones dentro de un cuadro de alerta.
Sin embargo, no es difícil ser exacto con eso; la diferencia en el radio del borde de sus dos objetos debe ser igual al espacio entre ellos. Sencillo!
Y esto también puede ser flexible, por ejemplo:
.interior ancho: 5em; altura: 5em; fondo: negro; radio del borde: 1em; .outer display: inline-block; fondo: azul claro; relleno: 3em; radio del borde: 4em; / * desplazamiento + radio de .inner * /
Tubo perfectamente doblado (mira la demo).
Como todos los aspectos del diseño, no hay reglas concretas, siempre encontrarás excepciones. Es una cuestión de instinto..
Tome esta interfaz por ejemplo; el espacio entre el botón de contacto y el menú desplegable no se parece en nada a un tubo doblado. Dicho esto, todas las esquinas de esta interfaz tienen un radio uniforme, por lo que nada parece fuera de lugar:
Navegación del menú desplegable - UI / UX con CSS3 por Jonathan Moreira Creo que probablemente ya has tenido suficiente de escucharme que me enrede por algo tan trivial. En lugar de llamar la atención sobre ejemplos en los que lo he visto torpemente, ahora echemos un vistazo a algunos trabajos inspiradores de Dribbblers que lo hacen bien.!
Ícono de mesa de billar por JJ-Maxer 
Postale Icon App por Aditya Nugraha Putra 
Icono por chnvan 
UI encontrada por Martin Karasek 
Icono de la aplicación Veggie Meals por Max Rudberg 
Botón subir por Fares Farhan 
Botón de bloqueo BPM (ON) de Paul Flavius Nechita 
Botón de inicio de sesión por Brad Haynes
Accentsconagua