CSS-muodot selitetty: Kuinka piirtää ympyrä, kolmio ja paljon muuta käyttämällä puhdasta CSS: ää

Ennen kuin aloitamme. Jos haluat enemmän ilmaista sisältöä, mutta videomuodossa. Älä missaa Youtube-kanavaani, jossa julkaisin viikoittaisia ​​videoita FrontEnd-koodauksessa.

//www.youtube.com/user/Weibenfalk

----------

Oletko uusi web-kehitystyössä ja CSS: ssä? Oletko koskaan miettinyt, kuinka ne hienot muodot tehdään, joita näet kaikkialla Internetissä? Ei ihme enää. Olet tullut oikeaan paikkaan.

Seuraavassa selitän muodot CSS: llä. Tästä aiheesta on paljon kerrottavaa! Siksi en aio käsitellä kaikkia (kaukana kaikista) työkaluja ja muotoja, mutta tämän pitäisi antaa sinulle perusajatus siitä, miten muodot luodaan CSS: llä.

Jotkut muodot vaativat enemmän "korjauksia ja temppuja" kuin toiset. Muodon luominen CSS: llä on yleensä yhdistelmä leveyden, korkeuden, ylä-, oikean-, vasemman-, reunan-, ala-, muunnos- ja pseudoelementtien kuten : ennen ja jälkeen. Meillä on myös nykyaikaisempia CSS-ominaisuuksia, joiden avulla voimme luoda muotoja, kuten muoto-ulkopuoli ja leikkauspolku. Kirjoitan heistä myös alla.

CSS-muodot - perustapa

Käyttämällä muutamia temppuja CSS olemme aina pystyneet luomaan perusmuotoja, kuten neliöt , ympyrät , ja kolmiot säännöllisesti CSS-ominaisuuksia. Katsotaanpa nyt muutama niistä.

Neliöt ja suorakulmiot

Neliöt ja suorakulmiot ovat luultavasti helpoimmin saavutettavissa olevia muotoja. Oletuksena div on aina neliö tai suorakulmio.

Asetat leveyden ja korkeuden alla olevan koodin mukaisesti. Sitten on vain annettava elementille taustaväri. Elementillä voi olla mitä tahansa muita ominaisuuksia.

#square { background: lightblue; width: 100px; height: 100px; }

Piirit

Piirin luominen on melkein yhtä helppoa. Ympyrän luomiseksi voimme asettaa elementin reunan säteen. Tämä luo elementille kaarevat kulmat.

Jos asetamme sen arvoon 50%, se luo ympyrän. Jos asetat eri leveyden ja korkeuden, saamme sen sijaan soikean.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

Kolmioita

Kolmiot ovat hieman hankalampia. Meidän on asetettava elementin reunat vastaamaan kolmiota. Asettamalla elementin leveys ja korkeus nollaksi, elementin todellinen leveys tulee olemaan reunan leveys.

Muista, että elementin reunareunat ovat 45 asteen lävistäjät toisiinsa nähden. Siksi tämä menetelmä toimii kolmion luomiseksi. Asettamalla yksi reunoista yksiväriseksi ja muut reunat läpinäkyväksi, se on kolmion muotoinen.

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

Jos haluat, että kolmio / nuoli osoittaa toiseen suuntaan, voit muuttaa reunan arvoja vastaavan sivun mukaan. Tai voit kiertää elementtiä muunnosominaisuudella, jos haluat olla todella fancy.

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

Selvä - se on intro perusmuodoista CSS: n avulla. Muotoja on luultavasti loputon määrä ajatella luoda. Nämä ovat vain perustekijöitä, mutta pienellä luovuudella ja päättäväisyydellä voit saavuttaa paljon vain CSS-perusominaisuuksilla.

Joissakin tapauksissa edistyneemmillä muodoilla on myös hyvä käyttää: jälkeen ja: ennen pseudovalitsimia. Tämä ei kuulu tämän artikkelin soveltamisalaan, vaikka aikomuksenani on käsitellä perusteet, jotta pääset alkuun.

Haitta

Edellä esitetyllä lähestymistavalla on yksi suuri haitta. Esimerkiksi, jos haluat tekstisi virtaavan ja käärimään muotosi. Tavallinen HTML-div, jossa on tausta ja reunat muodon muodostamiseksi, ei salli sitä. Teksti ei sovi eikä virtaa muotosi ympärillä. Sen sijaan se virtaa itse div: n (joka on neliö tai suorakulmio) ympäri.

Alla on kuva, joka näyttää kolmion ja kuinka teksti kulkee.

Onneksi meillä on sen sijaan joitain moderneja CSS-ominaisuuksia.

CSS-muodot - toinen tapa

Nykyään meillä on ominaisuus nimeltä shape-outside, jota voidaan käyttää CSS: ssä. Tämän ominaisuuden avulla voit määrittää muodon, jonka teksti kiertää / kulkee.

Tämän ominaisuuden lisäksi meillä on joitain perusmuotoja:

sisäkkäin ()

ympyrä()

ellipsi()

monikulmio()

Tässä on vinkki : Voit käyttää myös clip-path- ominaisuutta. Voit luoda muodon tällä samalla tavalla, mutta se ei anna tekstin kiertyä muotosi ympärille kuten muoto-ulkopuoli.

Elementti, johon aiotaan soveltaa muotoa muodon ulkopuolisella ominaisuudella, on kellettava. Sillä on myös oltava määritelty leveys ja korkeus. Se on todella tärkeää tietää!

Voit lukea lisää miksi täältä. Alla on myös teksti, jonka olen ottanut toimitetusta linkistä osoitteeseen developer.mozilla.org.

shape-outsideOmaisuus on määritetty käyttäen arvoja alla olevasta listasta, jotka määrittävät float alue float elementtejä. Kelluva alue määrittää muodon, jonka ympärille sisäinen sisältö (uimurielementit) kiertyy.

sisäkkäin ()

Inset () -tyyppiä voidaan käyttää luomaan suorakulmio / neliö, jossa on valinnainen offset käärittävälle tekstille. Sen avulla voit antaa arvoja siitä, kuinka paljon haluat käärittävän tekstin päällekkäisen muodon.

Voit määrittää siirtymän olevan sama kaikille neljälle suunnalle, kuten tämä: inset (20px). Tai se voidaan asettaa erikseen kullekin suunnalle: lisäys (20px 5px 30px 10px) .

Voit käyttää muita yksiköitä myös siirtymän asettamiseen, esimerkiksi prosentteina. Arvot vastaavat näin: lisäys (oikea ylhäältä alhaalta vasemmalta) .

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

Voit luoda muodon myös käyttämällä läpinäkyvän taustan omaavia kuvia. Kuten tämä pyöreä kaunis kuu alla.

Tämä on .png-kuva, jonka tausta on läpinäkyvä.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

Ja siinä se! Kiitos, että luit.

Tietoja tämän artikkelin kirjoittajasta

Nimeni on Thomas Weibenfalk ja olen kehittäjä Ruotsista. Luon säännöllisesti ilmaisia ​​opetusohjelmia Youtube-kanavalleni. Reactilla ja Gatsbyllä on myös muutama premium-kurssi. Voit vapaasti käydä luonani näillä linkeillä:

Twitter - @weibenfalk,

Weibenfalk Youtubessa,

Weibenfalk-kurssien verkkosivusto.