Paralelogramo css3. Formas CSS: un curso introductorio

Hola, todos. Hoy vamos a tocar un tema bastante inusual, a saber, el futuro del diseño web, se trata de las formas CSS.

Como sabéis, ahora está muy de moda, pero principalmente se compone de rectángulos, que, a su vez, limitan en gran medida los horizontes de los diseñadores. Y también está la adaptabilidad ... Lo que limita mucho la creatividad. Pero hay una gran ventaja: es más sencillo fluir alrededor de un rectángulo, pero cómo hacer que el texto fluya alrededor de formas redondas o irregulares es más difícil. Porque las imágenes no se pueden hacer redondas.

En este caso, las cifras corren en nuestra ayuda. El popular sitio W3C CSS publicó la primera documentación de formas. Aquí está esta publicación en el módulo de formas CSS en inglés, nivel 1. Este módulo fue lanzado recientemente el 20 de junio. Hasta ahora, esta es una versión beta, que incluye formas como rectángulo, triángulo, elipse, círculo y polígono.

Ahora echemos un vistazo más de cerca a cuál es la ventaja de CSS Shapes por ejemplo.

Para empezar, tomemos un marcado HTML simple, gracias a http://www.webdesignerdepot.com:

Este es un texto de ejemplo

Para elementos absolutamente posicionados, no es necesario especificar ancho y alto cero.

Combinando bordes se pueden conseguir cuatro tipos más de triángulos, que en combinación con los ya mencionados nos da ocho opciones. Su tipo y código requerido se dan en la tabla. 1.

Pestaña. 1. Posibles tipos de triángulos

Vista	Estilo
	borde: 20px sólido transparente; borde superior: 20px verde sólido;
	borde: 20px sólido transparente; borde derecho: 20px verde sólido;
	borde: 20px sólido transparente; borde inferior: 20px verde sólido;
	borde: 20px sólido transparente; borde izquierdo: 20px verde sólido;
	borde: 20px sólido transparente; borde superior: 20px verde sólido; borde derecho: 20px verde sólido;
	borde: 20px sólido transparente; borde derecho: 20px verde sólido; borde inferior: 20px verde sólido;
	borde: 20px sólido transparente; borde inferior: 20px verde sólido; borde izquierdo: 20px verde sólido;
	borde: 20px sólido transparente; borde izquierdo: 20px verde sólido; borde superior: 20px verde sólido;

En la tabla puedes ver que los bordes invisibles ocupan espacio, tenlo en cuenta a la hora de colocar elementos. El estilo también debe rellenarse con cero ancho y alto, o usar la propiedad de posición, como en el ejemplo 1.

El triángulo se puede hacer en una forma diferente, si establece un grosor diferente de los bordes. Entonces, el código para crear el bloque que se muestra en la Fig. 4 se muestra en el ejemplo 2.

Arroz. 4. Triángulo agudo

Ejemplo 2. Triángulo agudo

Con la ayuda del borde obtenemos triángulos de colores sólidos para crear el borde que se muestra en la fig. 5 tienes que ir a por el truco y poner un elemento encima del otro con un ligero desplazamiento. Nuevamente, los pseudo-elementos: before y: after nos ayudarán aquí (ejemplo 3).

Arroz. 5. Marco con esquina

Ejemplo 3. Triángulos superpuestos

Debido al hecho de que estamos superponiendo un elemento de color sólido sobre otro, este método solo es adecuado para rellenos de color sólido y no es adecuado para degradados o fondos.

Usando transformación

Con la ayuda de la transformación podemos rotar el elemento cuadrado 45º y sacarle un rombo. Este no es un triángulo como tal, por lo que dejamos la parte que sobresale que necesitamos a la vista y escondemos el resto detrás de otro elemento (ejemplo 4).

Ejemplo 3. Transformación

El resultado de este ejemplo se muestra en la Fig. 6.

Arroz. 6. Triángulo con sombra