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

Tips dan Tricks CSS (Cascading Style Sheets)

14 Sep. 201076 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. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  2. Membuat Menu Navigasi Dengan CSS3
  3. Cara Mencegah Copy Paste Dengan CSS
  4. Menggulingkan Top Komentator
  5. Free CSS Button Generator
  6. Bypass Template Path dan Stylesheet Path
  7. Source Code Main Remi Bersama Top Komentator
  8. Yesterday, The Beatles
  9. Cara Mengganti Background Theme WordPress
  10. Customisasi Tampilan Tag Cloud
  1. 5-10-2010 at 21:53 | #1

    ilmu yang berharga memang harus dibagikan pada orang-orang yang berminat, salam kenal dari Andi darmawan.

    Reply

  2. 2-6-2011 at 03:36 | #2

    CSS itu makanan apa ya…
    heheh..
    sama Mas Alwi saya juga ogah2 han nyentih CSS..
    liat tulisanaya ajah udah ruwet….

    Reply

  3. 15-10-2011 at 20:41 | #3

    mas alwi kami punya permasalahan untuk edit css theme.

    Untuk mengganti gambar header / dengan mengedit css atau replace gambar dengan image yang lain di mana letaknya.

    Reply

  4. 4-8-2012 at 16:55 | #4

    Kalau untuk text tapi ada effek bayangannya kyk judul di atas itu gmn ya om buatnya?

    Reply

  5. 7-4-2014 at 16:11 | #5

    wah sangat keren tuh artikelnya perlu di kembangkan salm sukses

    Reply

  6. 7-4-2014 at 16:14 | #6

    tfjhrtjk7tyoyjytiuyti56i56ururururutittjuuturtyururyuruyrytrytrutruryuryuryuruerururiuryeryeurtur

    Reply

  7. 7-4-2014 at 16:15 | #7

    wah keren tuh artikelny dan belog ini sangat bermanaft memberikan rasa seamanagat hidup

    Reply

  8. 16-4-2014 at 19:09 | #8

    sangat keren nih infonya

    Reply

  9. 3-11-2014 at 15:48 | #9

    mantap nih postingannya.. Kreatif

    Reply

Comment pages
1 2 32030
3+8=? (Wajib diisi)