I-BEGO

Assalamualaikum Wr Wb....

Bagi Seorang web Designer penguasaan CSS pasti sungguh sangat dibutuhkan, terutama mengetahui fitur2 terbaru dari dunia CSS... Mungkin CSS3 sudah bukan berita baru lagi, namun banyak sekali hal yang ingin saya bahas tentang hal ini di sini, di sub forum yang untuk sementara penghuninya masih belum aktif

Maaf kalau dalam penjelasan yang saya buat sedikit membingungkan atau tidak bagus karena saya memang tidak sejago Om Pujangga Bageur dalam mengolah kata2 . Tutorial disini juga tidak sepenuhnya saya buat sendiri, saya mencuplik dari berbagai sumber dengan modifikasi yang sanggup saya lakukan agar dapat lebih tersampaikan....

1. Rounded Corner Boxes CSS
Css ini dapat digunakan untuk membuat sudut dari sebuah tampilan 'block' menjadi bulat.

-Syntax dasar dari css3
.box{
border-radius : 5px;
}

Ukuran pixel menunjukkan seberapa besar sudut yang akan dibuat bulat.
Namun dalam pengaplikasiannya dibutuhkan beberapa penyesuaian untuk browser-browser tertentu seperti firefox dengan menambahkan awalan -moz
.box{
-moz-border-radius : 5px;
}

Untuk syntax standart seperti ini akan berlaku perubahan pada semua sudut object, oleh sebab itu css3 menyediakan beberapa opsi syntax agar dapat melakukan perubahan pada sudut-sudut yang diinginkan

CSS3 standart :
border-radius : Untuk keseluruhan sudut
border-top-left-radius : Untuk sudut bagian atas kiri
border-top-right-radius : Untuk sudut bagian atas kanan
border-bottom-right-radius : Untuk sudut bagian bawah kanan
border-bottom-left-radius : Untuk sudut bagian bawan kiri
CSS3 for firefox :
-moz-border-radius : Untuk keseluruhan sudut
-moz-border-radius-topleft : Untuk sudut bagian atas kiri
-moz-border-radius-topright : Untuk sudut bagian atas kanan
-moz-border-radius-bottomright : Untuk sudut bagian bawah kanan
-moz-border-radius-bottomleft : Untuk sudut bagian bawan kiri

Contoh :

Code: Select all

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

2. Text Shadow
Css ini dapat digunakan untuk membuat font dengan efek bayangan, mungkin ini sudah cukup untuk menggantikan efek font menggunakan photoshop

Syntax :
.font{
text-shadow: 2px 2px 2px #000;
}

Keterangan :
text-shadow : x y z w;
x : koordinat kiri, nilai positif akan membuat bayangan tergeser ke arah kanan, nilai negatif membuat bayangan tergeser ke arah kiri
y : koordinat atas, nilai positif membuat bayangan tergeser kebawah, nilai negatif sebaliknya
z : kadar blur dari bayangan
w : warna bayangan

yang asyik dari css ini adalah kita dapat menambahkan efek bayangan dengan jumlah bayangan sesuai keiinginan kita, saya sendiri baru mencoba sampai 3 bayangan.. Silahkan dicoba sendiri
Cth :

Code: Select all

.text-shadow{
   text-shadow:1px -1px 10px #F00, 1px -4px 5px #C90, 1px -6px 6px #FF0;
   font-size:36px;
}

Tampak hasil :


Catatan : Oia ternyata css ini sudah ada dari css versi 2...

3. Box Shadow
Yang ini lebih keren lagi, untuk membuat tampilan block memiliki efek bayangan.

Syntax dasar dari CSS3:
#example1 {
box-shadow: 10px 10px 5px #888;
}

Untuk aturan parameter sama dengan css text-shadow

Untuk beberapa penyesuaian diperlukan prefix tertentu pada css ini -moz dan -webkit
jadi akan lebih berfungsi jika ketiga syntaxnya kita tulis sekaligus
#example1 {
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
}

Cth:

Code: Select all

.box-shadow {
box-shadow: 1px -1px 10px #F00, 1px -4px 5px #C90, 1px -6px 6px #FF0;
-moz-box-shadow: 1px -1px 10px #F00, 1px -4px 5px #C90, 1px -6px 6px #FF0;
-webkit-box-shadow: 1px -1px 10px #F00, 1px -4px 5px #C90, 1px -6px 6px #FF0;
display:block;
width:200px;
height:40px
}

4. CSS3 2D Transformation
Css ini berguna untuk membuat efek tranformasi 2Dimensi pada objek, beberapa efek yang didukung adalah translate, rotate, skew, scale

-Bersambung dulu deh- Mo pergi keluar, ada janji ma temen...

Di IE berlaku nggak?

salUtz buat Oom agus..

uzul om, gmn klo Oom bahaz tenTang "Model-View-Controller (MVC)" di PHP

Post Bego4x telah mendapat kopi dari:

errodayroanda

pujanggabageur wrote:Di IE berlaku nggak?

yup, cross browser compatible problem

Mati-matian ane bikin rounded box atau text shadow di IE gak bisa-bisa

Oya, kenapa gak sekalian kasih contoh gradasi warna (color gradient) ?

pujanggabageur wrote:Di IE berlaku nggak?

Untuk border-radiuz di IE terbaru dah support kok...

Bego4x wrote:salUtz buat Oom agus..

uzul om, gmn klo Oom bahaz tenTang "Model-View-Controller (MVC)" di PHP

Em....Kayaknya dah ada yang bahas tentang CI deh om... InsyaAllah nanti

pujanggabageur wrote:Oya, kenapa gak sekalian kasih contoh gradasi warna (color gradient) ?

Ia, masih berlanjut....

AgoesTri wrote:1. Rounded Corner Boxes CSS[/b][/color]
Css ini dapat digunakan untuk membuat sudut dari sebuah tampilan 'block' menjadi bulat.

-Syntax dasar dari css3
.box{
border-radius : 5px;
}

Ukuran pixel menunjukkan seberapa besar sudut yang akan dibuat bulat.
Namun dalam pengaplikasiannya dibutuhkan beberapa penyesuaian untuk browser-browser tertentu seperti firefox dengan menambahkan awalan -moz
.box{
-moz-border-radius : 5px;
}

tambahan sedikit...

browser class safari n chrome :

Code: Select all

-webkit-border-radius: 5px;


browser class opera :

Code: Select all

-khtml-border-radius: 5px;


browser class IE

Code: Select all

behavior: url(border-radius.htc);


download disini file HTCnya

Kereeeeeennnnnn............ kembali ke web programing lagi ah..............

Ok Om boleh di coba ia..