Recto o hacia abajo, ese es el orden proverbial de los controles de usuario en una pantalla. Como una lista de elementos del menú. Pero, ¿qué pasa si cambiamos eso a un diseño más fluido con curvas, curvas y recovecos? Podemos lograrlo con solo unas pocas líneas de código. En la era de los diseños minimalistas modernos, los diseños curvos para los controles de usuario agregan la cantidad justa de energía a un diseño web.
Y codificarlos no podría ser más fácil, gracias a CSS Shapes.
Formas CSS (en particular, el shape-outside propiedad) es un estándar que asigna formas geométricas a elementos flotantes. Luego, el contenido envuelve el elemento flotante a lo largo de los límites de esas formas.
Los casos de uso de este estándar generalmente se muestran como diseños para contenido editorial textual, donde el texto sin formato fluye a lo largo de las formas que flotan a sus lados. Sin embargo, en esta publicación, en lugar de solo texto sin formato, usamos controles de usuario para ver cómo estas formas pueden insuflar algunas siluetas fluidas en sus diseños.
Para la primera demostración, aquí hay un diseño que se puede usar en las páginas de productos, donde los controles de acción relacionados con el producto se pueden alinear a lo largo de la forma del producto en sí.
<form>
<img src="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/./img/bottle.png" alt="A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.">
<div>
<input type="radio" id="one" name="coke" checked>
<label for="one">One Bottle</label>
</div>
<div>
<input type="radio" id="six" name="coke">
<label for="six">Six Pack</label>
</div>
<div>
<input type="radio" id="twelve" name="coke">
<label for="twelve">Twelve Pack</label>
</div>
<div>
<input type="radio" id="crate" name="coke">
<label for="crate">Entire Crate</label>
</div>
</form>img {
height: 600px;
float: left;
shape-outside: url("bottle.png");
filter: brightness(1.5);
}
input {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
margin-left: 20px;
box-sizing: content-box;
border: 10px solid #231714;
border-radius: 50%;
background: linear-gradient(45deg, pink, beige);
cursor: pointer;
}La imagen de la botella se flota a la izquierda y se le da un límite de forma utilizando el shape-outside propiedad. Se hace referencia a la imagen en sí para la forma.
Nota: Solo las imágenes con fondos transparentes pueden producir formas de acuerdo con las siluetas de las imágenes.
El estilo predeterminado de los botones de opción se reemplaza por un estilo personalizado. Una vez que el navegador aplica la forma a la imagen flotante, los botones de radio se alinean automáticamente a lo largo de la forma de la botella.
Así, no tenemos que molestarnos en asignar posiciones individualmente para cada botón de radio para crear tal diseño. Los botones que se agreguen posteriormente se alinearán automáticamente con los botones anteriores a ellos de acuerdo con la forma de la botella.
Aquí hay otro ejemplo, inspirado en la página de inicio de Wikipedia. Este es un ejemplo perfecto del tipo de diseños de menú principal poco convencionales que estamos viendo.
No es demasiado loco para hacer con shape-outside:
<div>
<img src="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/earth.png">
<div class="left">
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Formation</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Atmosphere</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Heat</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Gravitation</a>
</div>
</div>
<div>
<img src="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/earth.png">
<div class="right">
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Moon</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Climate</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Rotation</a><br>
<a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Orbit</a>
</div>
</div>img {
height: 250px;
float: left;
shape-outside: circle(40%);
}
/* stack both sets of menus on the same grid cell */
main > div { grid-area: 1/1; }
/* one set of menus is flipped and moved sideways over the other */
.right { transform: rotatey(180deg) translatex(250px); }
/* links inside the flipped set of menus are rotated back */
.right > a {
display: inline-block;
transform: rotateY(180deg) translateX(-40px);
}
/* hide one of the images */
main > div:nth-of-type(2) img { visibility: hidden; }Un elemento solo flota hacia la izquierda o hacia la derecha. No hay un elemento flotante central donde el contenido se envuelva alrededor de ambos lados. Para lograr el diseño donde los enlaces se envuelven en ambos lados de la imagen, hice dos conjuntos de enlaces y volteé uno de los conjuntos horizontalmente. Usé la misma imagen con un circle() Valor de forma CSS en ambos conjuntos para que las formas coincidan incluso después de la rotación. El texto de los enlaces del conjunto invertido aparecerá al revés de lado, por lo que se girará hacia atrás.
Aunque ambas imágenes pueden colocarse una encima de la otra sin un desbordamiento visible, es mejor ocultar una de ellas con la propiedad de opacidad o visibilidad.
El tercer ejemplo es un poco animado gracias al uso de uno de los elementos HTML dinámicos, <details>. Esta demostración es un buen ejemplo para que los diseños muestren información adicional sobre productos que, por defecto, están ocultos a los usuarios.
<img src="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/diamond.png">
<details>
<summary>Click to know more!</summary>
<ul>
<li>The diamond is now known as the Sancy
<li>It comprises two back-to-back crowns
<li>It's likely of Indian origin
</ul>
</details>img {
height: 200px;
float: left;
shape-outside: url("https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/diamond.png");
shape-margin: 20px;
}
summary {
background: red;
color: white;
cursor: pointer;
font-weight: bold;
width: 80%;
height: 30px;
line-height: 30px;
}La imagen flota a la izquierda y se le da una forma CSS que es la misma que la imagen. El shape-margin La propiedad agrega espacio de margen alrededor de la forma asignada al elemento flotante. Cuando el <summary> se hace clic en el elemento, el padre <details> elemento revela su contenido que se envuelve automáticamente a lo largo de la forma de la imagen del diamante flotante.
El contenido de la <details> elemento no tiene que ser necesariamente una lista, como en la demostración. Cualquier contenido en línea se ajustaría a la forma de la imagen flotante.
El ejemplo final funciona con una forma de polígono en lugar de imágenes o formas simples como círculo y elipse. Los polígonos nos brindan formas geométricas más angulares que se pueden doblar fácilmente agregando solo otra coordenada en la forma.
<img src="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/nasa.png">
<div><!-- triangle --></div>
<ul>
<li><a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Home</a>
<li><a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Projects</a>
<li><a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Shop</a>
<li><a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Contact</a>
<li><a href="https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/#">Media</a>
</ul>div {
width: 0;
height: 0;
--d: 200px;
/* red triangle */
border-right: var(--d) solid transparent;
border-bottom: var(--d) solid transparent;
border-left: var(--d) solid red;
float: left;
/* triangle CSS shape */
shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}
ul {
list-style: none;
padding-top: 25px;
}Se crea un triángulo rojo flotante a la izquierda utilizando propiedades de borde. Para crear una forma CSS triangular que coincida con el triángulo rojo, estamos usando la función polígono como un valor para el shape-outside propiedad. El valor de la polygon() La función son las tres coordenadas del triángulo, separadas por comas. Los enlaces se alinean automáticamente alrededor del triángulo flotante, formando un diseño de menú inclinado por la hipotenusa del triángulo.
Como puede ver, incluso para un diseño diagonal simple de los controles de usuario, las formas CSS hacen un buen trabajo agregando un poco de dinamismo a un diseño. Usar CSS Shapes es una opción mucho mejor que rotar una línea de controles de usuario: la alineación de los controles individuales y el texto también rotan, lo que crea un diseño extraño. Por el contrario, una forma CSS simplemente establece los controles individuales a lo largo del límite de la forma proporcionada.