Home » CSS » Tips dan Tricks CSS (Cascading Style Sheets)

Tips dan Tricks CSS (Cascading Style Sheets)

14 Sep. 201077 comments
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.

Mudah-mudahan artikel tentang Tips dan Tricks CSS (Cascading Style Sheets) ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Menggulingkan Top Komentator
  2. CSS Image Sprites Generator
  3. Yesterday, The Beatles
  4. Membuat Text Gradient Dengan CSS
  5. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  6. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  7. Border Style, Border Width, Border Color
  8. Source Code Main Remi Bersama Top Komentator
  9. Custom CSS Per Post
  10. Modifikasi Tampilan Halaman Daftar Isi
  1. 14-9-2010 at 14:05 | #1

    Emng sulit belajar CSS, butuh pemikiran extra….

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
    Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
    Mohon maaf lahir batin

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!
    Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
    Mohon maaf lahir batin

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!
    Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
    Mohon maaf lahir batin

    Reply

    alamendah Reply:

    (Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
    Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
    Mohon maaf lahir batin

    Reply

    toko barcode Reply:

    Turut Ucapkan Minal Aidin Wal Faidzin, Maaf Lahir dan bathin

    Reply

    Muhammad Faisal Aziz Reply:

    Izin nyemplit di keduaxx ya…
    [fl] blogs mengucapkan selamat iedul fitri 1 Syawal 1431 H,Taqabalallahu Minna Wa Minkum Shiyaamanaa wa shiyaamakum..Minal Aidzin wal faidzin mohon maaf lahir dan bathin

    Reply

    Muhammad Faisal Aziz Reply:

    Mohon maaf lahir dan batin

    Reply

    munir ardi Reply:

    akhirnya mas alam back apa kabar mas

    Reply

    Fikri Reply:

    Itu kodenya dipasang dimana mas?

    Reply

    toko barcode Reply:

    iya dipasang dimana ya apa di posting

    Reply

    Muhammad Faisal Aziz Reply:

    saya gak tau cara masangnya dimana

    Reply

    Hari Mulya Reply:

    saya juga kurang tahu, tuh…

    Reply

    Muhammad Faisal Aziz Reply:

    dicoba dulu ah…semoga berhasil

    Reply

    toko barcode Reply:

    aku juga penasaran untuk mencoba

    Reply

    Hari Mulya Reply:

    katanya ga tahu cara masangnya, kok dicoba? :D

    Reply

    Hybrid car Reply:

    Script lagi…
    tapi lumayan, sekarang sudah sedikit bisa mengikuti…. :D

    Reply

    Muhammad Faisal Aziz Reply:

    sekarang gak fokus buat script

    Reply

    Hybrid car Reply:

    Awalnya begitu sob….tapi lama-lama terbiasa juga…

    Reply

    toko barcode Reply:

    rumit tapi menarik untuk di praktekin

    Reply

    Hybrid car Reply:

    betul…betul…betul… :D

    Reply

    Muhammad Faisal Aziz Reply:

    nanti akan dicoba oleh saya

    Reply

    Hari Mulya Reply:

    gampang-gampang susah…

    Reply

  2. 14-9-2010 at 15:33 | #2

    interest !

    bookmark y

    Reply

    M.Niam Reply:

    Silahkan, tak ape-ape kok.

    Reply

    toko barcode Reply:

    sama nih boleh di bookmark ya Kang alwi

    Reply

    Muhammad Faisal Aziz Reply:

    bookmark dulu,sebelum komentar

    Reply

  3. 15-9-2010 at 06:28 | #3

    wah kapan2 kembali kesini bang mau tahu lebih dalam lagi nih…

    Reply

    Hybrid car Reply:

    Salam kenal bung reza…

    Reply

    Muhammad Faisal Aziz Reply:

    salam kenal ya,selamat datang disini

    Reply

    Hybrid car Reply:

    Salam kenal juga bung Faisal…

    Reply

  4. 15-9-2010 at 09:41 | #4

    ha..ha..ha..
    beLajar CSS emang bisa buat artikeL posting..
    keasyikan bikin aneka kreasi CSS, apaLagi pake CSS3..
    dah lama nih saya ga buat artikeL dengan CSS…

    Reply

    Hari Mulya Reply:

    maksudnya: “beLajar CSS emang bisa bikin lupa membuat artikeL posting..”

    Reply

    Muhammad Faisal Aziz Reply:

    bener juga sih,tapi belajar CSS bikin pusing

    Reply

  5. 15-9-2010 at 14:22 | #5

    wah..sy juga lagi cari tau ttg CSS nih.. sambil belajar terus..Thanks 4 share

    Reply

  6. 15-9-2010 at 18:54 | #6

    Ane pernah sampe 1 pekan utak-atik CSS sebuah theme, dari jam 5 pagi ampe jam 11 malem tiap hari, tetep gak mudeng. PUSINGGGGGGGG…

    Reply

    Hybrid car Reply:

    hehehe…menarik nih…bisa jadi bahan penelitian… :D

    Reply

    Muhammad Faisal Aziz Reply:

    sedang menelitinya juga,pusing kalau lihat script nya

    Reply

    munir ardi Reply:

    aku juga nggak tahu apa-apa mas sama dong kalau gitu

    Reply

  7. 16-9-2010 at 00:33 | #7

    kalau sudah ada yang ginian tinggal kopas kan mas
    boleh kan

    Reply

    citromduro Reply:

    terus terang terang terus saya masih pusing dengan css dan html

    Reply

    citromduro Reply:

    masih sebagian kecil dan yang kecil-kecil yang saya pahami

    Reply

    citromduro Reply:

    tapi masih sering lupa juga kalau tidak lihat catatan

    salam dari pamekasan madura

    Reply

    Muhammad Faisal Aziz Reply:

    html ada kemungkinan bisa,rabun tentang CSS

    Reply

    Muhammad Faisal Aziz Reply:

    tapi berusaha untuk bisa CSS nih

    Reply

    Hybrid car Reply:

    Copas saja mas…saya sudah kemarin-kemarin…hehe..

    Reply

    munir ardi Reply:

    ha ha emang perlu karena kita belum ahli

    Reply

  8. 16-9-2010 at 13:39 | #8

    mantaf sekali nih triks nya, Kang Alwi emang jagoan

    Reply

    toko barcode Reply:

    Selalu ada hal baru setiap berkunjung ke blog ini terutama tentang WordPress

    Reply

    munir ardi Reply:

    kang alwi gitu lo wp expert

    Reply

  9. 18-9-2010 at 23:56 | #9

    Terimakasih untuk info CSSnya dan salam kenal sobat. Ditunggu kunjungan dan komentarnya juga di postinganku ya ?
    [http://kwangkxz2010.blogdetik.com/2010/09/11/bersyukur/]

    Reply

    munir ardi Reply:

    wah kemana-mana ya mas semoga sukses kontesnya

    Reply

  10. 19-9-2010 at 18:50 | #10

    Mas Alwi, blognya menarik, ditunggu lagi lho artikelnya

    Reply

    munir ardi Reply:

    lha emang menarik kok

    Reply

    Hybrid car Reply:

    sudah bertahun-tahun…kok baru sekarang bilang menarik bung hendri ? hehehe…

    Reply

Comment pages
2+3=? (Wajib diisi)