Tips dan Tricks CSS (Cascading Style Sheets)

Saya tadinya sangat awam dan sangat malas untuk belajar Cascading Style Sheets atau CSS karena sering bikin pusing dan sangat membosankan, tapi setelah mengenal internet apalagi setelah mempunyai blog, mau tidak mau (awalnya terpaksa) harus mulai belajar dan mengenal apa itu css dan seluk beluknya. Ternyata belajar CSS itu mulai mengasikkan dan bisa betah ber-jam-jam di depan komputer, sampai-sampai kadang malah sedikit mengabaikan untuk mengupdate blog atau membuat postingan.

Supaya tidak lupa dari sedikit yang pernah saya pelajari, ijinkan saya untuk mengarsipkannya, dan siapa tahu malah mungkin bermanfaat untuk pengunjung blog ini.

1. CSS Drop Caps

p:first-letter {
       font-size : 300%;
       font-weight : bold;
       float : left;
       width : 1em;
}

2. Capitalize Text

{text-transform: capitalize;}
{text-transform: lowercase;}
{text-transform: uppercase:}

capitalize = Mentransformasi karakter pertama dari setiap kata menjadi huruf besar.
lowercase = Mentransformasi semua karakter menjadi huruf kecil
uppercase = Mentransformasi semua karakter menjadi huruf besar

3. CSS Text Shadow

Regular text shadow kodenya :
{ text-shadow: 1px 1px 1px #000; }
Multiple shadows :
{ text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

4. Rounded Corners tanpa gambar.

Berikut ini adalah cara sederhana untuk membuat bulatan sudut DIV menggunakan beberapa atribut css. Cara ini bisa berfungsi di Firefox, Safari, Chrome dan browser CSS3-lain yang kompatibel, untuk saat ini belum suport di Internet Explorer (IE).

div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}

Untuk membuat bulatan/lengkungan pada sudut tertentu, misalkan sudut kiri atas.

div {
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
}

5. Browser Opacity.

.transparent_class {
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

6. Rotate Text menggunakan CSS.

.rotate-style {
  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Dan masih banyak lagi yang belum sempat saya arsipkan, insya Allah di postingan berikutnya akan saya lengkapi.