Sebelum kita memulakan. Sekiranya anda mahukan lebih banyak kandungan percuma tetapi dalam format video. Jangan terlepas saluran Youtube saya di mana saya menerbitkan video mingguan pada pengekodan FrontEnd.
//www.youtube.com/user/Weibenfalk
----------
Adakah anda baru dalam pembangunan web dan CSS? Pernahkah anda terfikir bagaimana bentuk-bentuk yang bagus itu dapat anda lihat di seluruh internet? Tidak hairan lagi. Anda telah sampai ke tempat yang betul.
Di bawah ini saya akan menerangkan asas-asas membuat bentuk dengan CSS. Ada banyak untuk memberitahu anda mengenai topik ini! Oleh itu, saya tidak akan merangkumi semua (jauh dari semua) alat dan bentuk tetapi ini akan memberi anda idea asas tentang bagaimana bentuk dibuat dengan CSS.
Beberapa bentuk memerlukan lebih banyak "fix and tricks" daripada yang lain. Membuat bentuk dengan CSS biasanya merupakan gabungan penggunaan lebar, tinggi, atas, kanan, kiri, sempadan, bawah, transformasi dan unsur-unsur pseudo seperti : sebelum dan : selepas. Kami juga mempunyai sifat CSS yang lebih moden untuk membuat bentuk dengan bentuk seperti luar dan jalur klip. Saya akan menulis mengenai mereka di bawah juga.
Bentuk CSS - Cara asas
Dengan menggunakan beberapa trik dalam CSS, kami selalu dapat membuat bentuk asas seperti kotak , bulatan , dan segitiga dengan sifat CSS biasa. Mari lihat beberapa daripadanya sekarang.
Petak dan segi empat tepat
Kotak dan segi empat tepat mungkin bentuk paling mudah dicapai. Secara lalai, div selalu berbentuk segi empat sama atau segi empat tepat.
Anda menetapkan lebar dan tinggi seperti yang ditunjukkan dalam kod di bawah. Maka hanya sekadar memberi warna latar kepada elemen. Anda boleh memiliki apa sahaja sifat lain yang anda mahukan pada elemen tersebut.
#square { background: lightblue; width: 100px; height: 100px; }
Bulatan
Hampir semudah membuat bulatan. Untuk membuat bulatan, kita dapat menetapkan radius sempadan pada elemen. Ini akan membuat sudut melengkung pada elemen.
Sekiranya kita menetapkannya kepada 50%, ia akan membuat bulatan. Sekiranya anda menetapkan lebar dan ketinggian yang berbeza, kami akan mendapat bujur sebagai gantinya.
#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }
Segitiga
Segitiga agak sukar. Kita harus menetapkan batas pada elemen agar sesuai dengan segitiga. Dengan menetapkan lebar dan tinggi ke sifar pada elemen, lebar elemen yang sebenarnya akan menjadi lebar sempadan.
Perlu diingat bahawa tepi sempadan pada elemen saling menyerong 45 darjah. Itulah sebabnya kaedah ini berfungsi untuk membuat segitiga. Dengan menetapkan salah satu sempadan menjadi warna padat dan satu lagi sempadan menjadi telus ia akan berbentuk segitiga.
#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }
Sekiranya anda ingin segitiga / anak panah menunjuk ke arah lain Anda boleh mengubah nilai sempadan yang sesuai dengan sisi mana yang anda mahu kelihatan. Atau anda boleh memutar elemen dengan sifat transformasi jika anda ingin benar-benar mewah.
#triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }
Baiklah - itulah pengenalan bentuk asas dengan CSS. Mungkin ada banyak bentuk yang tidak dapat anda fikirkan untuk dibuat. Ini hanya asas, tetapi dengan sedikit kreativiti dan kesungguhan, anda dapat mencapai banyak dengan hanya sifat asas CSS.
Dalam beberapa kes, dengan bentuk yang lebih maju, sebaiknya gunakan: selepas dan: sebelum pemilih semu. Ini di luar ruang lingkup artikel ini kerana tujuan saya adalah untuk merangkumi asas-asas untuk membuat anda terus maju.
Kekurangan
Terdapat satu kelemahan besar dengan pendekatan di atas. Contohnya, jika anda mahu teks anda mengalir dan membungkus bentuk anda. Div HTML biasa dengan latar belakang dan sempadan untuk membentuknya tidak akan membenarkannya. Teks tidak akan dapat disesuaikan dan mengalir di sekitar bentuk anda. Sebaliknya ia akan mengalir di sekitar div itu sendiri (yang berbentuk segi empat sama atau segi empat tepat).
Di bawah ini adalah ilustrasi yang menunjukkan segitiga dan bagaimana teks akan mengalir.
Nasib baik kami mempunyai beberapa sifat CSS moden untuk digunakan sebagai gantinya.
Bentuk CSS - Dengan cara lain
Pada masa ini kita mempunyai harta yang disebut bentuk luar untuk digunakan dalam CSS. Properti ini membolehkan anda menentukan bentuk yang akan dibungkus / dialirkan oleh teks.
Bersama dengan harta tanah ini, kami mempunyai beberapa bentuk asas:
sisipan ()
bulatan ()
elips ()
poligon ()
Inilah petua : Anda juga boleh menggunakan harta klip . Anda boleh membuat bentuk anda dengan bentuk yang sama, tetapi tidak akan membiarkan teks membungkus bentuk anda seperti bentuk luar.
Elemen yang akan kita gunakan bentuk dengan sifat bentuk-luar harus diapungkan. Ia juga harus mempunyai lebar dan tinggi yang ditentukan. Itu sangat penting untuk diketahui!
Anda boleh membaca lebih lanjut mengenai mengapa di sini. Di bawah ini juga terdapat teks yang saya ambil dari pautan yang disediakan ke developer.mozilla.org.
Theshape-outsidehartanah dinyatakan menggunakan nilai daripada senarai di bawah, yang menentukan kawasan apungan untuk unsur-unsur terapung. Kawasan apungan menentukan bentuk di mana kandungan sebaris (elemen apungan) membungkus.
sisipan ()
Jenis inset () dapat digunakan untuk membuat persegi panjang / persegi dengan ofset pilihan untuk teks pembungkus. Ini membolehkan anda memberikan nilai berapa banyak teks pembungkus anda bertindih bentuknya.
Anda boleh menentukan offset yang sama untuk keempat-empat arah seperti ini: inset (20px). Atau ia boleh ditetapkan secara individu untuk setiap arah: sisipan (20px 5px 30px 10px) .
Anda juga boleh menggunakan unit lain untuk menetapkan offset, misalnya, peratus. Nilai sesuai seperti ini: sisipan (kiri kanan atas kiri) .
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.