بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Kali ini dengan trik yang berbeda. Saya akan mencoba memberikan sedikit cara membuat border atau garis tepi pada tulisan atau kalimat yang ada di artikel blog.
Border ini memberikan makna bahwa sebuah tulisan akan menempati area tengah dengan dibatasi oleh tepian. Tepi garis yang biasa kita buat bisa dikreasikan dengan berbagai macam gaya.
Baca Juga : Hover Image Box Shadow and Radius Pada CSS3
Hal ini dilakukan supaya kesan yang didapat dari itu adalah kesan yang tidak monoton sehingga akan ada variasinya. Pembuatannya pun tidak sesulit yang kita bayangkan. Hanya membubuhkan sedikit kode CSS dan border akan terlihat sempurna.
Oke langsung saja kita buat saja ya tutorialnya. Kita praktekkan sama-sama.
Baca Juga : Cara Membuat Background Posting Menjadi Berwarna-warni
Bila kamu seorang yang sudah ahli dalam bahasa pemrograman, skip saja tutorial ini. Untuk kalian yang masih ingin belajar, ayo saja kita sama-sama berbagi ilmu pengetahuan. Toh nanti juga tidak akan habis meski kita bagi. Sebaliknya bisa mendapatkan ladang pahala karena ilmu semakin banyak tersebar akan semakin bertambah bukan berkurang ::-->>
Sudut Melengkung Border Radius CSS dan Variasinya
<div style="background:#ffffff; border:groove 10px #f0113e; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius:30px; border-bottom-right-radius:30px;"><font color="black" size="3">Sample border radius dengan gaya border groove. </font></div>>
<div style="background:#ffffff; border:ridge 10px #f0113e; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-right-radius: 35px; border-bottom-left-radius: 35px;"><font color="black" size="3">Sample border radius dengan gaya border ridge.</font></div>
<div style="background:#ffffff; border:inset 10px #11f0d2; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-radius-bottom-left: 35px; border-radius-bottom-right: 35px;"><font color="black" size="3">Sample border radius dengan gaya border inset.</font></div>
<div style="background:#ffffff; border:outset 10px #11f0d2; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-left-radius: 35px; border-top-right-radius: 35px;"><font color="black" size="3">Sample border radius dengan gaya border outside.</font></div>Sample border radius dengan gaya border outside.
<div style="background:#ffffff; border:solid 10px #FF1000; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-left-radius: 35px; border-top-right-radius:35px; border-bottom-left-radius:35px; border-bottom-right-radius:35px;"><font color="black" size="3">Sample border radius dengan gaya border solid.</font></div>Sample border radius dengan gaya border solid.
<div style="background:#ffffff; border:double 10px #FF1000; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-left-radius: 35px; border-bottom-left-radius: 35px;"><font color="black" size="3">Sample border radius dengan gaya border double.</font></div>
<div style="background:#ffffff; border:dotted 10px #A0522D; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-radius: 0px;"><font color="black" size="3">Sample border radius dengan gaya border dotted.</font></div>
<div style="background:#ffffff; border:dashed 10px #4169E1; padding:15px 15px 15px 15px; margin:15px 15px 15px 15px; border-top-right-radius: 55px; border-bottom-left-radius: 55px;"><font color="black" size="3">Sample border radius dengan gaya border dashed.</font></div>
Seperti yang pernah kita tahu, dalam dunia coding, kecepatan sebuah pemrograman ketika ditampilkan dalam sebuah website adalah mutlak, cepat dan tanpa jeda. Dan dengan kode CSS, semua itu terjawab sudah, karena CSS begitu powerfull meski kita memasang ribuan kode dalam blog kita. Agak berbeda dengan Javascript yang memakan bandwith lumayan besar.
Baca Juga : Membuat Scrollbar Mode Persen dengan CSS
Dengan menggunakan Javascript, maka kecepatan loading blog akan berkurang dan semakin lambat. Padahal kecepatan loading blog dijaman yang serba canggih sekarang ini telah menjadi parameter penting untuk mendapatkan kedudukan dan posisi blog kita di Search Engine. Dan cara itu salah satunya adalah menggunakan CSS radius border sehingga border menjadi melengkung yang sedang kita pelajari sekarang ini. Lebih asyik khan dengan CSS.
Gambarannya seperti ini ::-->>
border:dotted 10px #000000;
-moz-border-radius: 10px; == agar bisa dibaca di Firefox
-webkit-border-radius: 10px; == agar bisa dibaca di Chrome
border-radius: 10px;
Sehingga jadinya akan seperti ini ::-->>
<div -->> open syntax
style="background:#ffffff; -->> bentuk alas, background
border:dashed 10px #4169E1; -->> jenis, tebal, warna border
-moz-border-radius: 10px; -->> untuk Firefox
-webkit-border-radius: 10px; -->> untuk Chrome
border-radius: 10px; -- kode awal radius
padding:5px; -->> jarak tulisan dan border
margin:20px 20px;"> -->> jarak border dan garis pembatas luar posting
bla bla bla
</div> -->> close syntax
Contohnya ::
<div style="background:#ffffff; border:dashed 10px #4169E1; border-radius: 10px; padding:5px; margin:20px 20px;">bla bla bla</div>
Nah sudah khan editnya. Sekarang saatnya kamu untuk mencoba sekali lagi. Dengan sering berlatih, kemungkinan membuat kode seperti diatas bukan hal yang sulit. Malah sebaliknya, kalian bisa membuat perbedaan dari model yang sudah tertera. Silakan dicoba. Dan terima kasih ya kalian mau mampir disini dan membaca artikel Sudut Melengkung Border Radius CSS dan Variasinya. Wassalam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Sudut Melengkung Border Radius CSS dan Variasinya . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
