


Mungkin sudah lama y saya tidak meng-update blog ini di karenakan aktifitas sekolah yang sibuk dan PC terjangkit virus, oke saya ceritakan sebentar y kenapa blog saya terjangkit virus. Begini ceritanya, pada suatu hari di hari yang cerah untuk ngeblogging dan menulis




Begitulah cerita yang tidak penting dan tak berguna, sekarang kembali lagi ke Border Lengkung. Disini saya tidak menjelaskan cara pemasangan pada template namun disini saya akan menjelaskan nilai-nilai dari Garis Bengkok (Border Radius), sebelumnya garis bengkok ini hanya bisa di lihat di firefox saja (Percobaan saya).
Pada dasarnya Border ditulis dengan border: 1px solid #0f0; kurang lebih seperti itu sekarang karna sudah populernya CSS3 yang bisa mengurangi penggunaan JS dan berdampak pada keringanan pada template. Pada CSS3 border lengkung di tulis seperti : -moz-border-radius: 30px; dan dapat di atur dengan menambahkan topleft, topright, bottomleft, atau bottomright dan nilai dari border lengkung tersebut adalah px jadi semakin besar px maka semakin lengkung border tersebut, seandainya sobat ingin melengkungkan border di bagian atas kiri maka sobat harus menulis seperti -moz-border-radius-topleft: 30px; dan hasilnya akan menjadi seperti di bawah ini :
Contoh dari Border lengkungan atas kiri
Kode yang di gunakan :
<div style="padding-top:40px;height:50px;background: none repeat scroll 0% 0% rgb(0, 0, 0); -moz-border-radius-topleft: 30px;color: rgb(0, 255, 0); -moz-box-shadow: 3px 3px 4px rgb(88, 88, 88); text-align: center;">Contoh dari Border lengkungan atas kiri</div>
Nah kalau untuk memasangkan ke dalam Template saya akan contohkan Cara pemasangan di Main-Wrapper
kode umum main-wrapper kurang lebih seperti di bawah ini :
#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
dan apabila ingin memberi lengkungan akan menjadi seperti
#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
-moz-border-radius-topleft: 30px;color: rgb(0, 255, 0);
}
Nah mungkin di atas adalah sebagian contoh kecilnya saja, kalau sobat dapat menguasai border lengkung mungkin sobat dapat menggunakannya bukan hanya di daerah main-wrapper saja namun di bagian lain-lainnya, mungkin hanya sekian saja dari Border lengkung yang dapat saya jelaskan. Termia kasih





CSS
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Membuat Gradient Effect dengan CSS
- CSS Shadow - Membuat Bayangan Dengan CSS
- Trik Rotasi Gambar Dengan CSS
- Image Gallery With CSS3
- Membuat Back To Top Dengan CSS
- Membuat Arsip dan Label Blog model Scroll
- Membuat Gambar Melayang di Blog
- CARA MEMBUAT TOOLTIPS DI BLOG...
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
Border Lengkung
0 komentar:
Posting Komentar