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. Mempercantik Tampilan Code Snippets Dengan CSS
  2. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  3. Source Code Main Remi Bersama Top Komentator
  4. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  5. Yesterday, The Beatles
  6. Custom CSS Per Post
  7. Membuat Menu Navigasi Dengan CSS3
  8. Main Remi Bersama Top Komentator
  9. Menggulingkan Top Komentator
  10. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  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

  10. 2-10-2017 at 11:03 | #10

    Terima kasih Tips dan Triknya…

    Reply

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