Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
En el tutorial anterior, echamos un vistazo a la creación de formas CSS, permitiéndonos definir la verdadera forma de un elemento. Tocamos los básicos; crear un círculo y envolver unas cuantas líneas de texto a su alrededor. Ahora exploremos formas más complejas, haciendo nuestros diseños de página más ricos y menos encajonados.
Creando un Polígono
Más allá de formas simples como círculos y rectángulos también podemos crear polígonos, formas consistentes de múltiples (típicamente cinco o más) lados, tales como un pentágono o un hexágono. Para crear uno, podemos usar la función CSS polygon() la cuál toma múltiples valores separados por comas definiendo las coordenadas de la forma:
1 |
.shape { |
2 |
float: left; |
3 |
background-size: contain; |
4 |
background-repeat: no-repeat; |
5 |
margin: 30px; |
6 |
width: 265px; |
7 |
height: 265px; |
8 |
shape-margin: 20px; |
9 |
}
|
10 |
.pentagon { |
11 |
background-image: url('../img/pentagon.svg'); |
12 |
shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); |
13 |
}
|
Con el código de arriba, hemos agregado cinco coordenadas, generando así una forma de pentágono. Agregar otra coordenada a la función convertirá la forma en un hexágono, una más para un heptágono, otra para un octágono y así por el estilo.
Crear una forma de polígono manualmente no es tan fácil como crear un círculo o una elipse, especialmente si el polígono es complejo e involucra docenas de coordenadas. Afortunadamente, hay una herramienta útil que hace más intuitivo crear Formas CSS.
Usando el Editor de Formas CSS
El Editor de Formas CSS es una extensión de Chrome. Una vez que lo has instalado, este agrega una nueva pestaña llamada Formas en DevTools bajo la pestaña Elementos, en línea con otras sub-pestañas (Estilos, Computadora, etc.)
La pestaña Formas contiene una propiedad shape-outside emparejada con un signo + para ayudarnos a agregar funciones Forma CSS. Podemos seleccionar el polygon() y el elemento en la página, después podemos comenzar a dibujar la forma justo en el navegador tal como una aplicación de gráficos.
Mientras dibujamos, la extensión del navegador actualizará nuestra función de polígono con las coordenadas respectivas de la forma dibujada, agregándola simultáneamente como un estilo inline al elemento. Una vez terminado, copia el código generado y pégalo en tu hoja de estilo.
Usando esta misma técnica podemos fácilmente dibujar y aplicar cualquier forma en nuestra página web, por ejemplo:
Extrayendo la Imagen de Forma
Otro posible valor que podemos usar en shape-outside es la función url(); la misma función que usamos en cualquier otro lugar en CSS para agregar una imagen de fondo. En este caso la función url() habilita a la propiedad shape-outside para definir un elemento de forma basado en la imagen.
Podrías elegir usar la función url() en lugar de polygon() cuando tienes un gráfico particularmente complejo, con muchas curvas y esquinas y quieres que tu contenido se envuelva alrededor de este suavemente. O, cuando se trabaja con contenido generado por los usuarios en los cuales definir la forma puede ser truculento.
Vamos a usar este guacamayo de Unsplash. Primero, necesitarás crear una versión con transparencia, por ejemplo:
La imagen original del perico es agregada al contenedor como una imagen de fondo:
1 |
.container { |
2 |
background-repeat: no-repeat; |
3 |
background-image: url('../img/parrot.png'); |
4 |
}
|
Límite de Transparencia
Para la forma misma, vamos a agregar otro elemento dentro del contenedor, y esta vez vamos a usar otra propiedad de Forma CSS llamada shape-image-threshold.
1 |
.shape { |
2 |
shape-margin: 15px; |
3 |
shape-outside: url('../img/parrot-shape.png'); |
4 |
shape-image-threshold: 0; |
5 |
}
|
Esta propiedad particular establece el límite de transparencia mínima que define la forma de la imagen; toma un número entre 0 y 1 como el valor. Así que si tienes una imagen ligeramente transparente podrías querer establecerlo a 0.8 o 0.5. Hemos establecido nuestro valor a 0 ya que el área rodeando la forma del perico es completamente transparente.
El resultado debería lucir algo como:
Proporcionando Retroceso
El soporte de navegador para Formas CSS es decente; aunque no esperes mucho de Firefox, Internet Explorer o Edge. También, respondiendo a la pregunta de Stephen en el tutorial anterior, tenemos varias opciones.
"Esto es interesante, pero una pregunta genuina: cuál es el retroceso para IE/FF? Parece que ir de lleno con un diseño de forma terminaría en algunos lugares extraños para muchos usuarios."-- Stephen Bateman
Primero, podemos usar Modernizr. Modernizr es una librería confiable de JavaScript para pruebas de características de navegador. Asegúrate de haber incluido las opciones Formas CSS y Agregar clases CSS cuando descargues la librería. Después puedes especificar los estilos de diseño cuando Forma CSS no esté soportada, como sigue:
1 |
/**
|
2 |
* When the browser does not support "CSS Shape".
|
3 |
*/
|
4 |
.no-shapes .shape { |
5 |
shape-outside: polygon(); |
6 |
}
|
7 |
|
8 |
/**
|
9 |
* Styles when the browser supports "CSS Shape".
|
10 |
*/
|
11 |
.shapes .shape { |
12 |
|
13 |
}
|
Si cragar Modernizr parece demasiado, ya que solo necesitas probar si el navegador tiene CSS habilitado, puedes agregar las siguientes líneas JavaScript.
1 |
if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) { |
2 |
document.body.classList.add('no-css-shape');
|
3 |
}
|
Cada propiedad en CSS viene con su equivalente bajo el objeto Estilo JavaScript, el cuál nos permite agregar estilo dinámicamente por medio de JavaScript. Este código detecta si el navegador tiene el método shapeOutside, después en donde no es el caso agregamos la clase no-css-shape la cuál podemos utilizar para agregar los estilos de retroceso.
1 |
.shape { |
2 |
shape-outside: polygon(); |
3 |
}
|
4 |
.no-shapes .shape { |
5 |
|
6 |
}
|
Por último, podemos usar la sintáxis CSS @support en la hoja de estilo, por ejemplo.
1 |
@supports (shape-outside: circle()) { |
2 |
.shape { |
3 |
shape-outside: circle(); |
4 |
}
|
5 |
}
|
Depende de ti decidir cuál aproximación se ajusta mejor a tu proyecto.
Una cosa grandiosa acerca de Formas CSS es que tiene un retroceso natural. No gran cosa. Ten un cuadrado. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
— Jen Simmons (@jensimmons) 11 de febrero de 2015
Concluyendo
En este tutorial, descubrimos cómo usar la función polygon() en Forma CSS y aprendimos cómo podemos dibujar polígonos fácilmente usando una extensión Chrome. También aprendimos cómo sacar ventaja de una imagen para dibujar formas por nosotros; particularmente útil con formas bastante complejas. Por último, a pesar del razonable soporte de navegador de Formas CSS, hemos hablado sobre usar alternativas agraciadas para navegadores no soportados.
Demos
Enlaces útiles
By
