Section separator merupakan salah satu hal yang biasanya dipergunakan untuk membuat halaman desain web anda lebih menarik. Untuk membuat section separator, anda dapat memanfaatkan generator online seperti Shape Divider. Namun kekurangannya adalah anda tidak dapat membuat separator tersebut benar-benar seperti yang anda inginkan. Anda hanya disuguhkan dengan separator bawaan dari generator tersebut.
Nah dalam artikel ini, saya akan menyajikan cara membuat section separator yang dapat anda custom sendiri bentuk dan warnanya menggunakan salah satu format vector yaitu svg. Sebenarnya ada banyak cara yang dapat anda pergunakan, namun saya lebih sering menggunakan format vector karena lebih mudah dalam customisasinya.
Sebelum memulai, anda diwajibkan untuk sudah memiliki aplikasi yang dapat digunakan untuk memanipulasi file svg. Anda dapat menggunakan Adobe Illustrator atau Inkscape. Dalam artikel ini, saya akan menggunakan Inkscape. Selain itu, anda juga sudah harus terbiasa menggunakan html dan css. Nah apabila sudah terpenuhi, anda dapat lanjut ke tahap selanjutnya.
Tahap pertama, anda harus membuat bentuk separator yang anda inginkan. Buka aplikasi Inkscape kemudian mulailah dengan project baru.
Klik pada tombol Create Rectangle and Square pada sidebar. Kemudian buatlah sebuah kotak dengan tools tersebut.
Anda dapat mewarnai kotak tersebut dengan warna random untuk sementara. Selanjutnya, Convert Object tersebut menjadi Path dengan cara menekan object tersebut kemudian pilih menu Path → Object to Path. Tujuan dari konversi ini adalah agar anda dapat mengubah-ubah bentuk dari kotak yang telah anda buat.
Untuk mengubah bentuk kotak tersebut, anda dapat menggunakan fitur Edit Path by Nodes.
Atur bentuk kotak tersebut sesuai yang anda inginkan, sebagai contoh saya akan membuat bentuk dari separator saya menjadi seperti berikut.
Sampai disini, anda sudah memiliki bentuk separator yang anda inginkan. Tahap selanjutnya adalah pewarnaan. Ganti warna dari bentuk tersebut sesuai dengan warna background dari website anda. https://inkscape-manuals.readthedocs.io/en/latest/color.html
Saya akan mewarnai separator tersebut dengan warna abu muda seperti berikut
Ubah ukuran dokumen dari project ini sesuai dengan ukuran object tersebut, dengan menggunakan menu File → Document Properties atau menggunakan shortcut Ctrl + Shift + R
sehingga project akhir vector anda akan berbentuk seperti ini
Apabila sudah seperti demikian, anda tinggal menyimpannya dalam bentuk svg
.
Setelah separator berhasil disimpan dalam bentuk svg, saatnya anda memasukannya ke html anda. Caranya, buka file *.svg
yang telah anda buat, dengan menggunakan editor code seperti vscode. Kurang lebih file yang ditampilkan adalah seperti berikut
<svg
width="252.06961mm"
height="70.412544mm"
viewBox="0 0 252.06961 70.412544"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
...
...
...
Dari sini, copy seluruh code yang tampil dari file *.svg
tersebut ke html tempat anda akan menambahkan section separator. Atur juga property width
menjadi 100%
dan hilangkan property height
dalam tag
<section class="feature">
<!-- Contoh Kenapa anda harus memilih saya? -->
</section>
<svg
width="100%"
viewBox="0 0 252.06961 34.631702"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.49976852"
inkscape:cx="880.40759"
inkscape:cy="-27.012506"
inkscape:window-width="1366"
inkscape:window-height="704"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(14.346254,-185.36395)">
<path
id="rect31"
style="fill:#f9fafb;fill-opacity:1;stroke-width:0.264999;stroke-linecap:square;paint-order:markers stroke fill"
d="M -14.346254,185.36395 H 237.72336 v 22.09361 c -80.05846,48.48596 -188.750799,-63.79252 -252.069614,0 z"
sodipodi:nodetypes="ccccc" />
</g>
</svg>
<section class="portolio">
<!-- Contoh PORTFOLIO -->
</section>
Hasil akhir dari project ini adalah sebagai berikut:
Nah, seperti itu kira-kira cara untuk membuat custom section separator pada project html anda menggunakan svg. Kelebihan dari penggunakan svg adalah, apabila halaman anda diperbesar sedemikian rupa, separator anda tidak akan menjadi blur. Hal ini dikarenakan svg adalah salah satu format vector. Ukuran file dalam penggunaan svg relatif lebih kecil dibanding menggunakan format gambar seperti jpg
dan png
.
Sekian yang dapat sampaikan untuk artikel kali ini, akhir kata saya ucapkan terimakasi.
Selain menggunakan fitur standar dari framework, sebagai developer juga memerlukan plugin atau package tambahan untuk mengembangkan project tergantung dari fitur yang diperlukan project tersebut maupu...
Pernahkan anda memilliki project yang secara terjadwal melakukan suatu aksi? Misalkan anda memiliki sebuah website yang menampung data user termasuk tanggal lahirnya. Anda menambahkan suatu fitur tamb...
Setelah kita selesai mengembangkan website, perlu halnya untuk mendeploy aplikasi tersebut ke VPS maupun share hosting. Nah disesi kali ini, saya akan menampilkan bagaimana langkah-langkah untuk mende...
Saya bisa membuatkan anda Aplikasi berkualitas Tertarik mengembangkan aplikasi? Hubungi saya sekarang untuk mendapatkan penawaran terbaik