Antes que empecemos. Si quieres más contenido gratuito pero en formato de video. No se pierda mi canal de Youtube donde publico videos semanales en codificación FrontEnd.
//www.youtube.com/user/Weibenfalk
----------
¿Eres nuevo en el desarrollo web y CSS? ¿Alguna vez te has preguntado cómo se hacen esas bonitas formas que ves en Internet? Extrañar más. Has venido al lugar correcto.
A continuación, explicaré los conceptos básicos de la creación de formas con CSS. ¡Hay mucho que contarte sobre este tema! Por lo tanto, no cubriré todas (ni mucho menos todas) las herramientas y formas, pero esto debería darle una idea básica de cómo se crean las formas con CSS.
Algunas formas requieren más "arreglos y trucos" que otras. La creación de formas con CSS suele ser una combinación de uso de ancho, alto, superior, derecha, izquierda, borde, fondo, transformación y pseudoelementos como : antes y : después. También tenemos propiedades CSS más modernas para crear formas con formas similares al exterior y al trazado de recorte. También escribiré sobre ellos a continuación.
Formas CSS: la forma básica
Mediante el uso de algunos trucos de CSS que siempre hemos sido capaces de crear formas básicas como cuadrados , círculos , y triángulos regulares con propiedades CSS. Veamos algunos de ellos ahora.
Cuadrados y rectángulos
Los cuadrados y rectángulos son probablemente las formas más fáciles de lograr. Por defecto, un div es siempre un cuadrado o un rectángulo.
Establece el ancho y el alto como se muestra en el siguiente código. Entonces es solo cuestión de darle al elemento un color de fondo. Puede tener cualquier otra propiedad que desee en el elemento.
#square { background: lightblue; width: 100px; height: 100px; }
Círculos
Es casi tan fácil crear un círculo. Para crear un círculo, podemos establecer el radio del borde en el elemento. Esto creará esquinas curvas en el elemento.
Si lo configuramos al 50%, creará un círculo. Si establece un ancho y alto diferente, obtendremos un óvalo en su lugar.
#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }
triangulos
Los triángulos son un poco más complicados. Tenemos que establecer los bordes del elemento para que coincidan con un triángulo. Al establecer el ancho y el alto en cero en el elemento, el ancho real del elemento será el ancho del borde.
Tenga en cuenta que los bordes del borde de un elemento son diagonales de 45 grados entre sí. Es por eso que este método funciona para crear un triángulo. Al establecer uno de los bordes en un color sólido y los otros bordes en transparente, tomará la forma de un triángulo.
#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }
Si desea que un triángulo / flecha apunte en otra dirección, puede cambiar los valores del borde correspondientes a qué lado desea que sea visible. O puede rotar el elemento con la propiedad transform si quiere ser realmente elegante.
#triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }
Muy bien, esa es una introducción a las formas básicas con CSS. Probablemente haya una cantidad infinita de formas que se le ocurran crear. Estos son solo los fundamentos, pero con un poco de creatividad y determinación puede lograr mucho con solo propiedades básicas de CSS.
En algunos casos, con formas más avanzadas, también es una buena idea usar los pseudo selectores: after y: before. Sin embargo, esto está fuera del alcance de este artículo, ya que mi intención es cubrir los conceptos básicos para que pueda comenzar.
Desventaja
Existe una gran desventaja con el enfoque anterior. Por ejemplo, si desea que su texto fluya y envuelva su forma. Un div HTML normal con fondo y bordes para crear la forma no lo permitirá. El texto no se adaptará ni fluirá alrededor de su forma. En su lugar, fluirá alrededor del div en sí (que es un cuadrado o un rectángulo).
A continuación se muestra una ilustración que muestra el triángulo y cómo fluirá el texto.
Afortunadamente, tenemos algunas propiedades CSS modernas para usar en su lugar.
Formas CSS: al revés
Hoy en día tenemos una propiedad llamada shape-outside para usar en CSS. Esta propiedad le permite definir una forma que el texto envolverá / fluirá alrededor.
Junto con esta propiedad tenemos algunas formas básicas:
recuadro()
circulo()
elipse()
polígono()
Aquí tienes un consejo : también puedes usar la propiedad clip-path . Puede crear su forma con eso de la misma manera, pero no permitirá que el texto se ajuste a su forma como lo hace la forma exterior.
El elemento al que vamos a aplicar la forma con la propiedad shape-outside tiene que flotar. También debe tener un ancho y un alto definidos. ¡Es muy importante saberlo!
Puedes leer más sobre por qué aquí. A continuación también se muestra un texto que he tomado del enlace proporcionado a developer.mozilla.org.
Lashape-outsidepropiedad se especifica utilizando los valores de la lista siguiente, que definen el área flotante para los elementos flotantes. El área flotante determina la forma alrededor de la cual se envuelve el contenido en línea (elementos flotantes).
recuadro()
El tipo inset () se puede utilizar para crear un rectángulo / cuadrado con un desplazamiento opcional para el texto de ajuste. Le permite proporcionar valores sobre cuánto desea que el texto de ajuste se superponga a la forma.
Puede especificar que el desplazamiento sea el mismo para las cuatro direcciones de esta manera: inset (20px). O se puede configurar individualmente para cada dirección: inserción (20px 5px 30px 10px) .
También puede utilizar otras unidades para establecer la compensación, por ejemplo, el porcentaje. Los valores se corresponden así: recuadro (arriba a la derecha abajo a la izquierda) .
Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.
#square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }
It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:
#square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }
circle()
In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.
The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.
#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }
In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.
The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.
In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.
I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.
#circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }
ellipse()
Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px 50px).
The same as a circle, it also takes a position value as the last value.
#ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }
polygon()
A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.
#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }
Images
You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.
This is a .png image with a transparent background.
#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }
And that's it! Thank you for reading.
About the author of this article
My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:
Twitter — @weibenfalk,
Weibenfalk on Youtube,
Weibenfalk Courses Website.