Paaiškintos CSS formos: kaip nupiešti ratą, trikampį ir dar daugiau naudojant gryną CSS

Prieš pradedant. Jei norite daugiau nemokamo turinio, bet vaizdo įrašo formatu. Nepraleiskite mano „YouTube“ kanalo, kuriame kas savaitę skelbiu vaizdo įrašus „FrontEnd“ kodavimu.

//www.youtube.com/user/Weibenfalk

----------

Ar pirmą kartą naudojatės interneto svetainių kūrimu ir CSS? Ar kada susimąstėte, kaip daromos tos gražios formos, kurias matote visame internete? Neįdomu. Jūs atėjote į reikiamą vietą.

Toliau paaiškinsiu pačius figūrų kūrimo CSS pagrindus. Yra daug ką pasakyti šia tema! Todėl nenagrinėsiu visų (toli gražu ne visų) įrankių ir formų, tačiau tai turėtų suteikti jums pagrindinę idėją, kaip formos kuriamos naudojant CSS.

Kai kurioms figūroms reikia daugiau „taisymo ir triukų“ nei kitoms. Formų kūrimas naudojant CSS paprastai yra pločio, aukščio, viršaus, dešinės, kairės, kraštinės, apačios, transformacijos ir pseudoelementų, tokių kaip : prieš ir po, derinys . Mes taip pat turime modernesnes CSS savybes, kad galėtume kurti figūras su panašiais formos išorės ir įrašo keliais. Apie juos taip pat parašysiu žemiau.

CSS formos - pagrindinis būdas

Naudojant keletą gudrybių CSS mes visada galėjo sukurti pagrindines figūras kaip kvadratų , apskritimų , ir trikampių su reguliariais CSS savybių. Pažvelkime į keletą jų dabar.

Kvadratai ir stačiakampiai

Kvadratai ir stačiakampiai yra bene lengviausiai pasiekiami pavidalai. Pagal numatytuosius nustatymus div visada yra kvadratas arba stačiakampis.

Jūs nustatote plotį ir aukštį, kaip parodyta žemiau esančiame kode. Tada tereikia suteikti elementui fono spalvą. Galite turėti bet kokias kitas norimas elemento savybes.

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

Draugų ratai

Beveik taip pat lengva sukurti ratą. Norėdami sukurti apskritimą, galime nustatyti elemento krašto spindulį. Tai sukurs išlenktus elemento kampus.

Jei nustatysime 50%, jis sukurs ratą. Jei nustatysite kitą plotį ir aukštį, vietoj to gausime ovalą.

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

Trikampiai

Trikampiai yra šiek tiek sudėtingesni. Mes turime nustatyti elemento kraštines, kad atitiktų trikampį. Nustačius elemento plotį ir aukštį iki nulio, tikrasis elemento plotis bus kraštinės plotis.

Atminkite, kad elemento kraštinės kraštinės yra 45 laipsnių įstrižainės viena kitai. Štai kodėl šis metodas sukuria trikampį. Nustačius, kad viena iš kraštų bus vientisa spalva, o kitos - skaidrios, bus trikampio formos.

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

Jei norite, kad trikampis / rodyklė būtų nukreipta kita kryptimi, galite pakeisti kraštines, atsižvelgdami į tai, kurioje pusėje norite būti matomi. Arba galite pasukti elementą su savybe „ transformuoti“, jei norite būti tikrai įmantrus.

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

Gerai - tai pagrindinių CSS formų įvadas. Tikriausiai yra begalinis skaičius figūrų, kurias galite sugalvoti sukurti. Tai tik pagrindai, tačiau turėdami šiek tiek kūrybiškumo ir ryžto, galite daug pasiekti tik pagrindinėmis CSS savybėmis.

Kai kuriais atvejais, naudojant pažangesnes formas, prieš pseudo selektorius taip pat verta naudoti: after ir:. Šis straipsnis nepatenka į šio straipsnio taikymo sritį, tačiau, kadangi aš ketinu apžvelgti pagrindus, kad galėtumėte pradėti.

Trūkumas

Aukščiau minėtam požiūriui yra vienas didelis trūkumas. Pavyzdžiui, jei norite, kad jūsų tekstas tekėtų ir apgaubtų jūsų formą. Įprastas HTML div su fonu ir kraštinėmis, kad sudarytų figūrą, to neleis. Tekstas nebus pritaikytas ir neteks aplink jūsų formą. Vietoj to jis tekės aplink patį div (kuris yra kvadratas arba stačiakampis).

Žemiau yra iliustracija, rodanti trikampį ir kaip tekės tekstas.

Laimei, mes galime naudoti keletą šiuolaikinių CSS savybių.

CSS formos - kitas būdas

Šiais laikais CSS turime savybę, vadinamą shape-outside . Ši savybė leidžia apibrėžti figūrą, kurią tekstas apvynios / apjuos.

Kartu su šia nuosavybe turime keletą pagrindinių formų:

įdėklas ()

apskritimas ()

elipsė ()

poligonas()

Štai patarimas : taip pat galite naudoti „ clip-path“ ypatybę. Jūs galite sukurti savo figūrą tuo pačiu būdu, bet tai neleis, kad tekstas apgaubtų jūsų figūrą, kaip tai daro formos išorė.

Elementas, kuriam pritaikysime formą su savybe formos išorė, turi būti plūduriuojantis. Jis taip pat turi turėti apibrėžtą plotį ir aukštį. Tai tikrai svarbu žinoti!

Daugiau apie tai galite sužinoti čia. Žemiau taip pat yra tekstas, kurį paėmiau iš pateiktos nuorodos į developer.mozilla.org.

shape-outsideTurtas detalizuojamos naudojant reikšmes iš sąrašo, kurie apibrėžia float plotas float elementų. Plūdės plotas nustato formą, aplink kurią apvyniojamas vidinis turinys (plūduriuojantys elementai).

įdėklas ()

Įterpimo () tipą galima naudoti stačiakampio / kvadrato sukūrimui su pasirinktiniu įvyniojimo teksto poslinkiu. Tai leidžia pateikti reikšmes, kiek norite, kad įvyniojamasis tekstas sutaptų su forma.

Galite nurodyti, kad poslinkis būtų vienodas visoms keturioms kryptims: intarpas (20 taškų). Arba galima atskirai nustatyti kiekvienai krypčiai: įdėklas (20 taškų 5 taškų 30 taškų 10 taškų) .

Taip pat galite naudoti kitus vienetus, kad nustatytumėte poslinkį, pavyzdžiui, procentus. Reikšmės atitinka taip: įdėklas (viršuje dešinėje apačioje kairėje) .

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

Savo formai sukurti taip pat galite naudoti vaizdus su skaidriu fonu. Kaip šis apačioje gražus mėnulis.

Tai yra .png vaizdas su skaidriu fonu.

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

Štai ir viskas! Ačiū, kad skaitėte.

Apie šio straipsnio autorių

Mano vardas Thomas Weibenfalkas ir aš esu kūrėjas iš Švedijos. Savo „Youtube“ kanale reguliariai kuriu nemokamas pamokas. Taip pat yra keletas aukščiausios klasės kursų „React“ ir „Gatsby“. Nedvejodami apsilankykite pas mane šiose nuorodose:

„Twitter“ - @weibenfalk,

„Weibenfalk“ „Youtube“,

„Weibenfalk“ kursų svetainė.