Share
En el tutorial anterior, echamos un vistazo a la creación de formas CSS, lo que nos permite definir la verdadera forma de un elemento. Tocamos sobre lo básico; creando un círculo y envolviendo unas pocas líneas de texto a su alrededor. Ahora exploremos formas más complejas, haciendo que nuestros diseños de página sean más ricos y menos cuadrados..
Más allá de formas simples como círculos y rectángulos también podemos crear polígonos; formas que consisten en lados múltiples (típicamente cinco o más), como un pentágono o un hexágono. Para crear uno, usamos el CSS. polígono() función que toma múltiples valores separados por comas que definen las coordenadas de la forma:
Accentsconagua
.forma flotador: izquierda; tamaño de fondo: contener; repetición de fondo: no repetición; margen: 30px; ancho: 265px; altura: 265px; forma-margen: 20px; .pentagon background-image: url ('… /img/pentagon.svg'); forma fuera: polígono (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Con el código anterior, 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í sucesivamente.
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 que la creación de formas CSS sea más intuitiva.
CSS Shapes Editor es una extensión de Chrome. Una vez instalado, agrega una nueva pestaña llamada Formas en DevTools bajo el Elementos pestaña, en línea con las otras sub-pestañas (Estilos, Computadora, etc.)
los Formas la pestaña contiene un forma fuera propiedad emparejada con un plus + Iniciar sesión para ayudarnos a agregar funciones de forma CSS. Vamos a seleccionar el polígono() y el elemento en la página, entonces podemos comenzar a dibujar la forma directamente en el navegador como una aplicación de gráficos.
A medida que 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 en línea al elemento. Una vez hecho esto, copie el código generado y péguelo en su hoja de estilo.
Coordenadas poligonales generadasUsando esta misma técnica, podemos dibujar y aplicar fácilmente cualquier forma o forma en nuestra página web, por ejemplo:
Imagen de Cómo agregar drama a una escena lluviosa con Adobe PhotoshopOtro posible valor que podemos usar en el forma fuera la propiedad es la url () función; la misma función que usamos en otras partes de CSS para agregar una imagen de fondo. En este caso el url () función habilita la forma fuera Propiedad para definir una forma de elemento basada en la imagen..
Puede optar por utilizar el url () función en lugar de polígono() cuando tiene un gráfico particularmente complejo, con muchas curvas y esquinas y desea que su contenido se ajuste sin problemas. O, cuando se trata de contenido generado por el usuario en el que definir la forma podría ser complicado.
Vamos a utilizar este loro guacamayo de Unsplash. Primero, deberá crear una versión con transparencia, por ejemplo:
La forma de nuestro loro guacamayo.La imagen de loro original se agrega al contenedor como una imagen de fondo:
.contenedor fondo-repetición: no-repetición; imagen de fondo: url ('… /img/parrot.png'); Para la forma en sí, la agregaremos a otro elemento dentro del contenedor, y esta vez usaremos otra propiedad de Forma de CSS llamada forma-imagen-umbral.
.shape shape-margin: 15px; shape-outside: url ('… /img/parrot-shape.png'); forma-imagen-umbral: 0; Esta propiedad particular establece el umbral de transparencia mínima que define la forma de la imagen; se necesita un número entre 0 a 1 como el valor. Por lo tanto, si tiene una imagen ligeramente transparente, es posible que desee establecerla en 0.8 o 0.5. Hemos establecido nuestro valor en 0 Ya que el área que rodea la forma de loro es completamente transparente..
El resultado debería ser algo como:
El soporte del navegador para CSS Shapes es decente; aunque no esperes mucho de Firefox, Internet, Explorer o Edge. Además, respondiendo a la pregunta de Stephen en el tutorial anterior, tenemos varias opciones.
“Esta es una pregunta genial, pero genuina: ¿cuál es el respaldo para IE / FF? Parece que ir todo incluido con un diseño de forma terminaría en algunos lugares extraños para muchos usuarios ". - Stephen Bateman
En primer lugar, podemos utilizar Modernizr. Modernizr es una biblioteca confiable de JavaScript para la prueba de características del navegador. Asegúrese de que ha incluido el Formas CSS y el Añadir CSS Opción de clases al descargar la biblioteca. Luego puede especificar los estilos de diseño cuando la Forma CSS no es compatible, de la siguiente manera:
/ ** * Cuando el navegador no es compatible con "CSS Shape". * / .no-shapes .shape shape-outside: polygon (); / ** * Estilos cuando el navegador admite "Forma CSS". * / .shapes .shape
Si la carga de Modernizr parece demasiado, ya que solo necesita probar si el navegador tiene CSS habilitado, puede agregar las siguientes líneas de JavaScript.
if ('undefined' === typeof document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Cada propiedad en CSS viene con su equivalente en el objeto Estilo de JavaScript, que nos permite agregar estilos dinámicamente a través de JavaScript. Este código detecta si el navegador tiene la forma fuera método, entonces donde ese no es el caso añadimos el forma no-css Clase que podemos utilizar para agregar los estilos de respaldo..
.shape shape-outside: polygon (); .no-formas. forma
Por último, podemos utilizar el CSS. @apoyo sintaxis en la hoja de estilo, por ejemplo.
@supports (shape-outside: circle ()) .shape shape-outside: circle ();
Depende de usted decidir qué enfoque se ajusta mejor a su proyecto..
Una gran cosa acerca de CSS Shapes es que tiene un respaldo natural. No biggie Tener un cuadrado. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@jensimmons) 11 de febrero de 2015
En este tutorial, descubrimos cómo usar el polígono() Funciona en CSS Shape y aprendió cómo podemos dibujar polígonos fácilmente usando una extensión de Chrome. También aprendimos a aprovechar una imagen para dibujar formas para nosotros; Particularmente útil con formas excesivamente complejas. Por último, a pesar de la compatibilidad razonable del navegador con CSS Shapes, hablamos sobre el uso de alternativas elegantes para los navegadores no compatibles..
