Selgitatud CSS-i kujundid: kuidas puhta CSS-i abil ringi, kolmnurka ja muud joonistada

Enne kui alustame. Kui soovite rohkem tasuta sisu, kuid videovormingus. Ära jäta kasutamata minu Youtube'i kanalit, kus avaldan iganädalasi videoid FrontEnd'i kodeerimise kaudu.

//www.youtube.com/user/Weibenfalk

----------

Kas olete veebiarenduse ja CSS-i jaoks uus? Kas olete kunagi mõelnud, kuidas tehakse neid toredaid kujundeid, mida näete kogu Internetis? Ei tea enam. Olete jõudnud õigesse kohta.

Allpool selgitan kujundite CSS-iga loomise põhitõdesid. Sellel teemal on teile palju öelda! Seetõttu ei hõlma ma kõiki (kaugeltki mitte kõiki) tööriistu ja kujundeid, kuid see peaks andma teile põhiidee sellest, kuidas kujundeid CSS-iga luuakse.

Mõni kuju nõuab rohkem "parandusi ja trikke" kui teised. Kujundite loomine CSS-iga on tavaliselt kombinatsioon laiuse, kõrguse, ülemise, parema, vasaku, ääre-, ala-, teisendus- ja pseudoelementide kasutamisest nagu : enne ja : pärast. Meil on ka moodsamad CSS-i omadused, et luua kujundeid, millel on kuju-väljastpoolt ja lõiketee. Nendest kirjutan ka allpool.

CSS-vormid - põhiline viis

Kasutades mõned nipid CSS oleme alati olnud võimalik luua põhikujuks nagu ruudud , ringid , kolmnurgad regulaarselt CSS omadused. Vaatame nüüd mõnda neist.

Ruudud ja ristkülikud

Ruudud ja ristkülikud on ilmselt kõige lihtsam kuju. Vaikimisi on div alati ruut või ristkülik.

Te määrate laiuse ja kõrguse, nagu on näidatud allpool koodis. Siis on küsimus vaid elemendi taustavärvi andmises. Teil võivad olla elemendil muud omadused.

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

Ringid

Ringi loomine on peaaegu sama lihtne. Ringjoone loomiseks saame elemendile määrata piiri raadiuse. See loob elemendile kumerad nurgad.

Kui määrame selle väärtuseks 50%, loob see ringi. Kui määrate erineva laiuse ja kõrguse, saame selle asemel ovaalse.

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

Kolmnurgad

Kolmnurgad on veidi keerukamad. Peame seadma elemendile piirid, et need vastaksid kolmnurgale. Seadistades elemendi laiuse ja kõrguse nulli, saab elemendi tegelik laius piiri laiuse.

Pidage meeles, et elemendi ääreservad on üksteise suhtes 45-kraadised diagonaalid. Sellepärast töötab see meetod kolmnurga loomiseks. Kui üks äärtest määratakse ühevärviliseks ja teine ​​piirid läbipaistvaks, saab see kolmnurga kuju.

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

Kui soovite, et kolmnurk / nool osutaks teises suunas, saate muuta piirväärtusi vastavalt sellele, millist külge soovite näha. Või saate elementi teisendada atribuudiga, kui soovite olla tõeliselt väljamõeldud.

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

Hea küll - see on sissejuhatus CSS-i põhikujunditesse. Kujundeid, mille loomiseks võite mõelda, on ilmselt lõputult palju. Need on vaid põhialused, kuid vähese loovuse ja otsusekindlusega saate CSS-i põhiomadustega palju saavutada.

Mõnel juhul on arenenumate kujundite korral hea kasutada ka pseudovalijaid enne: ja:. See jääb selle artikli reguleerimisalast välja, kuna minu eesmärk on katta põhitõed, et saaksite teiega alustada.

Puudus

Ülaltoodud lähenemisviisil on üks suur puudus. Näiteks kui soovite, et tekst voolaks ringi ja ümbritseks teie kuju. Kuju moodustamiseks tavaline HTML-div, millel on taust ja ääred, seda ei võimalda. Tekst ei kohane ega voola teie kuju ümber. Selle asemel voolab see ümber div enda (mis on ruut või ristkülik).

Allpool on illustratsioon, mis näitab kolmnurka ja kuidas tekst voolab.

Õnneks on meil selle asemel mõned kaasaegsed CSS-i omadused.

CSS-i kujundid - teistpidi

Tänapäeval on meil CSS -is kasutada omadust nimega shape-outside . See omadus võimaldab teil määrata kuju, mille ümber tekst ümbritseb / voolab.

Selle omaduse kõrval on meil mõned põhikujud:

sisestatud ()

ring ()

ellips ()

hulknurk ()

Siin on näpunäide : saate kasutada ka vara clip-path . Sellega saate oma kuju luua samamoodi, kuid see ei lase tekstil teie kuju ümber mähkida nagu kuju-väljast.

Element, millele kuju rakendame koos vara välise atribuudiga, tuleb hõljuda. Samuti peab sellel olema määratletud laius ja kõrgus. Seda on tõesti oluline teada!

Siit saate lähemalt lugeda miks. Allpool on ka tekst, mille olen võtnud lisatud lingilt saidile developer.mozilla.org.

shape-outsideVara on määratud kasutades väärtusi allpool olevast nimekirjast, mis määratlevad float ala float elemente. Ujukiala määrab kuju, mille ümber sisemine sisu (ujukelemendid) ümbritseb.

sisestatud ()

Tüüpi inset () saab luua ristküliku / ruudu koos valikulise nihkega pakkimisteksti jaoks. See võimaldab teil anda väärtused selle kohta, kui palju soovite, et mähkimistekst kuju kattuks.

Nihke saate määrata kõigi nelja suuna jaoks samaks: sisestus (20 pikslit). Või saab seda määrata iga suuna jaoks eraldi: sisestus (20 pikslit 5 pikslit 30 pikslit 10 pikslit) .

Nihke määramiseks võite kasutada ka muid ühikuid, näiteks protsenti. Väärtused vastavad järgmiselt: sisestus (üleval paremal vasakul vasakul) .

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

Kuju loomiseks võite kasutada ka läbipaistva taustaga pilte. Nagu see ümmargune ilus kuu allpool.

See on läbipaistva taustaga .png-pilt.

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

Ja see ongi kõik! Täname lugemast.

Selle artikli autori kohta

Minu nimi on Thomas Weibenfalk ja ma olen arendaja Rootsist. Loon oma Youtube'i kanalil regulaarselt tasuta õpetusi. Reactil ja Gatsbyl on ka mõned lisakursused. Külasta mind julgelt nende linkide kaudu:

Twitter - @weibenfalk,

Weibenfalk Youtube'is,

Weibenfalki kursuste veebisait.