Ciri-ciri (properties) CSS3 yang anda perlu biasakan

Border-radius

Ianya merupakan ciri-ciri CSS3 yang paling popular di mana ia memberikan sudut melengkung pada elemen anda .

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

Box-shadow

Box-shadow akan membenarkan anda mengenakan bayang pada elemen anda.

-webkit-box-shadow: 1px 1px 3px #292929;

-moz-box-shadow: 1px 1px 3px #292929;

box-shadow: 1px 1px 3px #292929;

Text-shadow

Seperti box-shadow, tetapi ianya khas untuk teks. Text-shadow juga menerima empat parameter :

• x-offset
• y-offest
• Kabur (Blur)
• Warna Bayang

h1 {

   text-shadow: 0 1px 0 white;

   color: #292929;

}

Text-overflow

Pada asalnya ianya dibangunkan oleh Internet Explorer. Ciri ini boleh menerima dua nilai iaitu:

• Clip
• Ellipsis

Ciri ini boleh digunakan untuk memotong teks yang melebihi bekasnya (container), tetapi masih lagi membekalkan sedikit maklum balas kepada pengguna seperti ellipsis.

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;

   overflow:hidden;
   white-space:nowrap;

   border: 1px solid black;
   width: 400px;
   padding: 20px;

   cursor: pointer;
}

Kemudian, pengguna boleh memaparkan keseluruhan teks apabila menjalankan (hover) tetikus keatas bekas ‘container’ yang mengandungi sedikit maklum balas kepada pengguna.

.box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

Flexible Box Model

Ciri ini akhirnya membenarkan kita untuk melepaskan diri daripada apungan (floats).  Mari cuba demonstrasi mudah ini. Mula-mula bina susun atur dua lajur seperti dibawah.

<div id="container"> 
 <div id="main"> Main content here </div>
 <aside> Aside content here </aside> 
</div>

Untuk CSS pula, ‘container’ akan dianggap sebagai sebuah kotak dengan tinggi dan lebar yang umum.

#container {
   width: 960px;
   height: 500px; /* just for demo */

   background: #e3e3e3;
   margin: auto;

   display: -moz-box;
   display: -webkit-box;
   display: box;
}

Kemudian, berikan warna yang unik kepada ‘#main div’ dan ‘aside’ untuk membezakannya.

#main { 
   background: yellow;
}    
aside {
   background: red;
}

Paparan anda akan jadi seperti rajah dibawah.

Apabila lebar bagi  ‘main’ ditambah, perkara seperti dibawah akan terjadi.

#main {
  background: yellow;
  width: 800px;
}

Ianya nampak lebih baik, tetapi ‘aside’ tidak mengambil kesemua ruang yang tertinggal. Anda boleh menetapkannya menggunakan ciri box-flex.

aside { 
   display: block; /* HTML5 element */
   background: red;

  /* take up all available space */
   -moz-box-flex: 1; 
   -webkit-box-flex: 1;
   box-flex: 1; 
}

Dengan ciri box-flex, ‘aside’ akan memenuhi setiap ruang yang ada. Anda juga tidak perlu bimbang mengenai isu apungan seperti susunan elemen apungan akan berada dibawah kandungan utama.

Resize

‘Resize’ merupakan sebahagian daripada modul CSS3 yang membenarkan anda untuk menentukan bagimana ‘textarea’ boleh disaiz semula.

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

Nila-nilai yang boleh digunakan:

• Kedua-duanya (Both): Menegak dan mendatar
• Mendatar (Horizontal): Terhad kepada mendatar sahaja
• Menegak (Vertical): Terhad kepada menegak sahaja
• Tiada (None): Saiz semula dinyahdaya (disable)

Transition

Penambahan yang paling menarik bagi CSS3 mungkin ialah keupayaannya untuk mengaplikasikan animasi kepada elemen tanpa menggunakan JavaScript.

Mari cuba demo mudah ini, apabila anda menjalankan (hover) pada pautan bar sisi (sidebar), teks akan gelongsor (slide) sedikit ke kanan.

HTML

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

CSS

ul a {
   -webkit-transition: padding .4s; 
   -moz-transition: padding .4s;
   -o-transition: padding .4s;
   transition: padding .4s;
}

a:hover { 
   padding-left: 6px;  
}

Transition menerima tiga parameter iaitu: 

• Ciri transition (Setkan nilai ini kepada semua jika diperlukan)
• Tempoh (duration)
• Jenis pelonggaran (Easing type)

*Transition tidak dikenakan ke atas ‘hover’ secara terus kerana animasi akan berlaku ketika mouseover sahaja. Ketika mouseout, elemen akan kembali kepada keadaan asal serta-merta.

Informasi ini telah diterjemahkan daripada Jeffrey Way