Praktikum PC

Berikut ini adalah daftar CSS Button yang bisa kamu terapkan dalam blogmu. Beberapa Saya desain sendiri, dan beberapa lagi adalah hasil mengambil dari desain situs-situs yang Saya kunjungi. Halaman ini akan terus bergerak dan akan terus diperbaharui andaikan Saya mendapatkan kesempatan untuk hidup lebih lama (dramatis). Oke ini dia... Daftar CSS Button untuk Kerangka Dasar: <input value="Button" type="button"> <input value="Submit" type="submit"> <input value="Reset" type="reset"> <button>Tag Button</button> Mirip Tuts+ Premium css button tutplus /* Tuts+ */ input[type="button"], input[type="submit"], input[type="reset"], button {   cursor:pointer;   border:1px solid #e7a943;   border-bottom-color:#d6982f;   border-top-color:#f5b74e;   color:#623f1d;   font-size:12px;   font-weight:bold;   line-height:12px;   padding:10px 18px;   text-decoration:none; ...

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya. Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list ): <ul class='kuda-zebra'> <li>Andai Saja</li> <li>Engkau Tahu</li> <li>Betapa Aku</li> <li>Kebelet Pipis</li> <li>Maukah...</li> </ul> Di sini kita memakai <ul> atau unordered list . Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini: ul.kuda-zebra {font-weight:bold;} .kuda-zebra li {color:darkRed;} Maka nantinya hasilnya akan tampak seperti ini: Sekarang kita terapkan sistem JQuery sederhana seperti ini: $(document).ready(function() { $('ul.kuda-zebra li:even').addClass('kampret'); }); Lalu tambahkan sebuah pemodel baru dengan...

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini: Tanpa CSS Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan tentang teknik dasar dalam mengubah tampilan button di blogmu. Ini adalah contoh CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button , submit dan reset agar lebih efisien): input[type="button"], input[type="submit"], input[type="reset"], button { font:normal 0.9em Arial,Sans-Serif; background-color:#4169E1; border:1px solid #B7B7B7; padding:2px 7px; color:#fff; } Letakkan saja CSS tersebut di atas kode </style> atau ]]></b:skin> , maka tampilan tombol-tombol di blogmu akan berubah seperti ini: Dengan CSS Namun itu saja sepertinya masih kurang. Kita juga perlu menerapkan event hover ...

Satu lagi penerapan CSS dalam elemen-elemen input . Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea . Ini adalah contoh tampilan input text dan textarea biasa: Tanpa CSS Dan ini adalah CSS untuk mengubah tampilannya: input[type="text"] { font:normal 12px Verdana,Sans-Serif; border:1px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } textarea { font:bold 12px Verdana,Sans-Serif; border:5px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } input[type="text"]:focus, textarea:focus { background-color:#FFE4B5; } Letakkan kode tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah seperti ini: Dengan CSS Dari penampilan kode ini Saya...

Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed; kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb ) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini: Masuk ke tab Rancangan kemudian pilih Edit HTML . Cek Expand Template Widget agar seluruh elemen pembangun posting tampil. Salin kode pemodel di bawah ini, kemudian letakkan di atas kode ]]></b:skin> atau </style> : .alaihumcrumb { position:fixed; z-index:1000; top:0; left:0; background:#333; width:98%; color:#ccc; border-bottom:2px solid #999; padding:1px 1% 1px 1%; -webkit-box-shadow:0 0 7px #000; -moz-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; } .alaihumcrumb a, .alaihumcrumb a:visited, .alaihumcrumb a:active { color:#fff; } .alaihumcrumb span.kanan { float:right; } Kemudian carilah kode yang tampak seperti ini: <a expr:name='data:post.i...

Demonya bisa kamu lihat di sini . Oke, kita mulai proyeknya sekarang! Pertama-tama, salinlah baris kode pemodel ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau di atas kode </style> : #pelangi {font:normal 14px Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #pelangi ul {list-style-type: none;margin:10px 0;padding:0;height:95px;} #pelangi a strong {position:relative;top:40%;overflow:hidden;} #pelangi li a {width:95px;height:95px;display:inline-block;float:left;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;} #pelangi li a:link, #pelangi li a:visited, #pelangi li a:active {font-weight:bold;color:#FFFFFF;text-decoration:none;margin:2px 2px;} #pelangi li a:hover {margin:0 0;width:99px;height:99px;opacity:0.9;} Setelah itu letakkan kerangka navigasi ini di tempat yang kamu inginkan: (Pelajari tentang beberapa tempat alternatif untuk meletakkan kerangka navigasi di bab ini ): <di...

Apa yang dimaksud dengan hover gambar sederhana? Coba letakkan pointer mouse mu pada gambar di atas. Dalam segi kepraktisan, tentu saja efek ini akan lebih ringan jika dibandingkan dengan efek hover gambar artistik dengan JQuery . Untuk membuatnya caranya sangat sederhana. Kita hanya memerlukan sebuah penerapan CSS Pseudo-Class :hover pada selektor img . Pertama-tama, carilah kode yang tampak seperti ini: img { background:#fafafa; border:1px solid #dcdcdc; padding:5px; } Tidak usah terfokus pada deklarasi-deklarasi di dalamnya. Cukup fokus pada selektor img . Kode di atas adalah komponen khusus untuk mengatur tampilan gambar-gambar di halamanmu. Kita bisa mengetahui itu karena selektor img pada dasarnya memang berasal dari tagnya, yaitu <img> Jika sudah ketemu, salinlah kode ini, kemudian letakkan di bawahnya: img:hover { /* Secara teoritis untuk IE 8 & 9 (lebih valid) */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*...

Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mouse mu pada gambar di halaman ini » Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery . Saya ajarkan caranya di sini: Pertama-tama, salinlah script di bawah ini, kemudian letakkan di atas kode </head> : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Nah, yang barusan kita lakukan adalah meletakkan mesinnya. Khusus untuk script di atas, jika ternyata template mu sudah memilikinya, kamu tidak perlu lagi menambahkannya, satu template cukup satu mesin saja . Namun seperti halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan tepat di bawah kode tadi: <script type='text/javascript'> $(document).ready(function() { $(' img ').hover(function() { //masuk $(this).animate({ opa...

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks: span { text-shadow:10px 10px 7px #222; } Aturannya sama persis dengan CSS Box Shadow : 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini ). Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline <style type='text/css'> #teks1 {text-shadow:10px 10px 7px #222;} </style> ...... <div id='teks1'> TEKS </div> <div style='text-shadow:10px 10px 7px #222;'> TEKS </div> ...

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset: div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ } CSS Bayangan Inset: div { -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */ -moz-box-shadow:inset 10px 10px 7px #222; /* Firefox */ box-shadow:inset 10px 10px 7px #222; /* W3C */ } 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline #kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kota...