• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

CSS 3 untuk border dan background

24‘11
October

info59.jpg

CSS3 adalah standar untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada.

Walaupun CSS 3 adalah sebuah standard CSS baru yang membantu kita dalam memudahkan desain web, tidak semua browser ternyata mensupport CSS 3, misalnya MS Internet Explorer yang sampai artikel ini saya tulis masih belum mendukung CSS 3.

Dibawah saya coba terangkan beberapa Modul CSS 3 yang sudah umum dipakai banyak designer yaitu CSS 3 untuk border dan background,

Membuat sudut lengkung pada box model (Rounded Corners)

Jaman dulu kala (lebay) sebelum ada CSS3 kita perlu menggunakan gambar dan trik untuk membuat sudut lengkung pada box model seperti div, p dan sebagainya, sekarang dengan CSS 3 anda hanya perlu beberapa detik untuk membuat sudut lengkung, berikut ini tag CSS3 yang kita perlukan untuk membuat sudut lengkung :

div.contoh {
	background:#0CF;
    height:40px;
    width:400px;
    border:2px solid #F90;
 
    /* Property untuk membuat sudut lengkung : */
    
    -moz-border-radius:25px; /* Firefox */
    border-radius:25px;
}

Hasilnya adalah sebagai berikut

border-radius

Membuat Bayangan Box pada CSS3 (box shadow)

Untuk menambahkan bayangan pada sebuah elemen div dan atau elemen HTML lainnya maka pada CSS3 kita bisa menggunakan property box-shadow, pada contoh di atas mari kita tambahkan bayangan

div.contoh {
	background:#0CF;
    height:40px;
    width:400px;
    border:2px solid #F90;
    
    /* Property untuk membuat sudut lengkung : */
    
    -moz-border-radius:25px; /* Firefox */
    border-radius:25px;
 
    /* Property untuk bayangan : */
    -moz-box-shadow: 4px 4px 10px #999; /* Firefox */
    -webkit-box-shadow: 4px 4px 10px #999; /* Safari and Chrome */
    box-shadow: 4px 4px 10px #999;
}

Hasilnya adalah sebagai berikut:

box-shadow

Membuat Border dengan Gambar pada CSS3 (border image)

Untuk membuat border dengan gambar pada CSS3 kita dapat menggunakan property border-image, berikut ini saya memiliki gambar sebagai berikut

div.contoh {
    height:40px;
    width:400px;
    
    /* Property untuk membuat border dengan gambar: */
    
    -moz-border-image:url(border.gif) 30 30 round; /* Firefox */
    -webkit-border-image:url(border.gif) 30 30 round; /* Safari and Chrome */
    border-image:url(border.gif) 30 30 round;
}

Hasilnya adalah sebagai berikut:

-moz-border-radius:25px; border-radius:25px;

CSS3 untuk Background

Ada tambahan property untuk background yang bisa membantu kita untuk lebih dapat mengontrol background pada website:

  • background-size
  • background-origin

Lagi-lagi browser super kuno Internet explorer pada saat saya menulis artikel ini belum support CSS3 untuk background. pada firefox kita harus menambahkan -moz- tapi sayang firefox tidak support property background-origin, pada chrome dan safari juga opera sudah support CSS3 untuk background.

  IE Firefox Chrome Safari Opera
background-size X -moz-      
background-origin X X      

Membuat ukuran background Gambar pada CSS3

Dengan property background-size dari CSS3 kita dapat menentukan ukuran besar background. Sebelum ada CSS3 background ditentukan oleh besar ukuran gambar aslinya dan kita tidak bisa memanipulasi tampilan background

Anda bisa menentukan nilai property background-size dengan prosentase gambar atau pixel (x y), misalnya saya memiliki gambar dengan ukuran asli 460pixel x 300pixel sebagai berikut

Untuk menaruh gambar diatas pada div atau elemen HTML yang lain sebagai background dan menentukan ukurannya tambahkan property background-size

div.contoh {
	background:url(gambar.jpg);
	background-repeat:no-repeat;
    height:120px;
    width:200px;
    
	/* Menentukan ukuran Background */
	-moz-background-size:200px 120px; /* Firefox */
	background-size:200px 120px;
}

Hasilnya adalah sebagai berikut:

background-size

Menentukan posisi gambar background pada Box model dengan CSS3 (background-origin)

property background-origin membuat kita dapat menentukan dimana gambar ingin di posisikan. Gambar background dapat di tempatkan didalam area content-box, padding-box, atau border-box

apabila lupa dengan box model dalam HTML silahkan baca : Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
gambaran box model adalah sebagai berikut:

Contoh kita ingin menempatkan background di posisi content-box

div.contoh {
    background:url(gambar.jpg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

Menempatkan multiple Background pada satu elemen HTML

Satu tambahan lain pada CSS3 yang harus di catat adalah kita dapat menempatkan Background gambar lebih dari satu pada Elemen HTML

Contohnya bila anda ingin menempatkan 3 gambar di body HTML maka CSSnya adalah sebagai berikut

body {
	background-image:url(gambar1.gif), url(gambar2.gif), url(gambar_seterusnya.jpg);
}

Selamat Mencoba

Widi Mawardi

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  2. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  3. Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
  4. Pengertian CSS dan Cara Penerapan CSS pada HTML
  5. 3 Langkah Membuat Desain Web Responsif (Responsive Design)

Komentar

  • amx (14 Mar 2013 02:19:51)

    makasih banyak gan atas infonya...bermanfaat bgt nih bwt gw yang lg belajar

  • ivans (21 Feb 2013 02:57:36)

    SUIIIIIIIIIIIIPPPPPPPPPPPP......BUAGUS BGT MAS N SIMPLE BGT

  • sagitariuz (19 Jun 2012 06:58:18)

    wah keren gan, tapi masih bingung bagaimana cara mendapatkan script2 seperti berikut ? melalui aplikasi apa emang pake cara lain ?

  • bintangk3cil (28 Dec 2011 07:06:13)

    wah...mantap bgt...makasi bgt neh dah share.!!

  • Andy (28 Oct 2011 06:20:32)

    makasih banget, saya masih newbie masalah CSS. untung banget nemu blog ini ^_^ makasih mas

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff