Mielőtt nekilátnánk. Ha több ingyenes tartalmat szeretne, de videó formátumban. Ne hagyja ki a Youtube csatornámat, ahol heti videókat teszek közzé a FrontEnd kódolással.
//www.youtube.com/user/Weibenfalk
----------
Még nem ismeri a webfejlesztést és a CSS-t? Gondolkodott már azon, hogy hogyan készülnek azok a szép formák, amelyeket az egész interneten lát? Nem csoda többé. Jó helyre jöttél.
Az alábbiakban ismertetem az alakzatok CSS-sel történő létrehozásának alapjait. Nagyon sok mindent el kell mondani erről a témáról! Ezért nem fogok kitérni az összes (korántsem minden) eszközre és alakzatra, de ennek alapvető képet kell adnia arról, hogy miként jönnek létre a formák a CSS-sel.
Egyes alakzatok több "javítást és trükköt" igényelnek, mint mások. Alakzatok CSS-sel történő létrehozása általában a szélesség, a magasság, a felső, a jobb, a bal, a szegély, az alsó, a transzformáció és az álelemek kombinációja, mint például : before és : after. Korszerűbb CSS tulajdonságokkal is rendelkezünk, hogy olyan alakzatokat hozzunk létre, mint a külső alak és a klip-útvonal. Az alábbiakban írok róluk is.
CSS-alakzatok - az alapvető módszer
Segítségével néhány trükköt CSS mi mindig képes volt létrehozni az alapvető formák, mint a négyzet , kör , háromszögek és rendszeres CSS tulajdonságok. Most nézzünk meg néhányat közülük.
Négyzetek és téglalapok
A négyzetek és a téglalapok valószínűleg a legkönnyebben elérhető alakzatok. Alapértelmezés szerint a div mindig négyzet vagy téglalap.
A szélességet és a magasságot az alábbi kód szerint állíthatja be. Akkor csak arról van szó, hogy az elemnek háttérszínt adjunk. Bármilyen más tulajdonságot megadhat az elemen.
#square { background: lightblue; width: 100px; height: 100px; }
Körök
Szinte ugyanolyan könnyű kört létrehozni. Kör létrehozásához beállíthatjuk a szegély sugarát az elemen. Ez görbült sarkokat hoz létre az elemen.
Ha 50% -ra állítjuk, akkor kört fog létrehozni. Ha más szélességet és magasságot állít be, akkor helyette ovális képet kapunk.
#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }
Háromszögek
A háromszögek kicsit trükkösebbek. Be kell állítanunk az elem határait, hogy megfeleljenek egy háromszögnek. Ha a szélességet és a magasságot nullára állítja az elemen, akkor az elem tényleges szélessége a határ szélessége lesz.
Ne felejtsük el, hogy egy elem határszélei 45 fokos átlósak egymástól. Ezért működik ez a módszer egy háromszög létrehozására. Ha az egyik szegélyt egyszínűre, a másikat átlátszóra állítja, akkor ez háromszög alakú lesz.
#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }
Ha azt szeretné, hogy egy háromszög / nyíl egy másik irányba mutasson, megváltoztathatja a határértékeket annak megfelelően, hogy melyik oldalon szeretne láthatóvá válni. Vagy elforgathatja az elemet a transzformációs tulajdonsággal, ha igazán divatos akar lenni.
#triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }
Rendben - ez a CSS alapformáinak bevezetője. Valószínűleg végtelen mennyiségű alakzat létezik, amelyek létrehozására gondolhat. Ezek csak az alapok, de egy kis kreativitással és elszántsággal nagyon sok mindent el lehet érni csak az alapvető CSS-tulajdonságokkal.
Bizonyos esetekben fejlettebb formák esetén is célszerű az álválasztókat használni: after és: előtt. Ez azonban nem tartozik a cikk hatálya alá, mivel az a szándékom, hogy bemutassam az alapokat, hogy elindulhasson.
Hátrány
A fenti megközelítéssel egy nagy hátrány van. Például, ha azt szeretné, hogy a szövege körbejárjon, és beburkolja az alakját. Az alakot alkotó, szabályos HTML div háttérrel és szegélyekkel nem teszi lehetővé. A szöveg nem fog alkalmazkodni, és az alakja körül fog folyni. Ehelyett maga a div körül fog áramlani (ami négyzet vagy téglalap).
Az alábbiakban bemutatjuk a háromszöget és azt, hogy a szöveg hogyan fog folyni.
Szerencsére van néhány modern CSS tulajdonságunk, amelyeket helyette használhatunk.
CSS-alakzatok - a másik út
Manapság van egy alak-kívül nevű tulajdonságunk, amelyet a CSS-ben használhatunk. Ez a tulajdonság lehetővé teszi egy olyan alakzat megadását, amelyet a szöveg körbefuttat / körbefuttat.
Ezen tulajdonság mellett néhány alapvető alakzatunk is van:
betét ()
kör()
ellipszis()
poligon()
Íme egy tipp : Használhatja a clip-path tulajdonságot is. Ezzel ugyanúgy létrehozhatja az alakját, de ez nem engedi, hogy a szöveg körbevegye az alakját, mint az alakzat kívül.
Meg kell lebegtetni azt az elemet, amelyre az alakzatot a formakülső tulajdonsággal fogjuk alkalmazni. Meghatározott szélességgel és magassággal kell rendelkeznie. Ezt nagyon fontos tudni!
A miértekről itt olvashat bővebben. Az alábbiakban egy olyan szöveg is található, amelyet a megadott linkről a developer.mozilla.org webhelyre vettem át.
Ashape-outsidetulajdonság megadása az alábbi lista értékeinek felhasználásával történik, amelyek meghatározzák az úszó elemek úszó területét. Az úszó terület határozza meg azt az alakot, amely körül az inline tartalom (úszó elemek) körbefut.
betét ()
A inset () típusú téglalap / négyzet létrehozására választható eltolással használható a csomagoló szöveg. Ez lehetővé teszi értékek megadását arról, hogy mennyire szeretné, hogy a csomagoló szöveg átfedje az alakzatot.
Megadhatja, hogy az eltolás azonos legyen mind a négy irányban: beszúrás (20 kép). Vagy egyedileg beállítható minden irányhoz: beillesztés (20px 5px 30px 10px) .
Használhat más egységeket az eltolás beállításához is, például százalék. Az értékek a következőképpen felelnek meg: beillesztés (jobb felső bal alsó) .
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.