Sinzo Sakurata Blog

Archive for the ‘Css’ Category

sering kali teman-teman saya yg baru belajar dan mengenal dunia webdesign bertanya. gimana sih cara bikin menu nya atau ajarin donk bikin menu flashnya dan saya sih dengan enteng nya menjawab : bikin nya sih pake css bukan pake flash soalnya klo pake flash pasti berat load menu nya.

Menu yg sering mereka tanyakan biasanya yaitu menu rollover dimana pada saat kita dekatkan pointer ke atas menunya maka si menu itu akan berubah warna atau berubah gambarnya.

oke untuk lebih detilnya akan saya berikan contoh menu rollover yg sangat dasar sekali yaitu dengan menggunakan element anchor.

<style>

a.menu{
display:block;
background:red;
color:#ffffff;
font-size:18px;
width:200px;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}
a.menu:hover{
background:blue;
}

</style>

dan hasilnya seperti tampak pada gambar

dimana menu default akan berubah warna menjadi biru apabila pointer berada di atas menu tersebut.

ok itu untuk contoh basic nya. skarang kita akan membuat variasi di menunya dengan menambahkan image.

Read the rest of this entry »

Tags: ,

Internet Explorer 8 Beta 1

Akhirnya tim IE meluncurkan internet explorer 8 beta 1 pada bulan maret ini, menurut tim IE8 bahwa versi IE8 ini sudah mempunyai beberapa perubahan di bandingkan versi yang sebelumnya dimana IE8 ini sudah mengikuti aturan webstandars dan lebih terfokus kepada developer web sehingga IE8 ini banyak mengalami perubahan baik dari

  • Standards support (CSS/HTML)
  • Standards support (DOM) and AJAX

seperti di beritakan di blognya bahwa IE8 ini sudah melakukan improve dalam hal rendering content untuk beberapa web standars dalam standars mode dan telah mensupport : URIs, abbr tag, css generate content, display table css properties untuk memperbaiki beberapa bugs css dan html.

IE8 juga telah melakukan beberapa perbaikan di standar support untuk javascript (dom) dan ajax. diantaranya pada behavior getAttribute, setAttribute and removeAttribute.

selain improve dari browsernya sendiri IE8 dilengkapi dengan beberapa developers tools untuk memudahkan para developer dalam pencarian bugs di IE8 seperti halnya firefox yang mempunyai developer tools dan firebug yang sangat membantu saya dalam mencari sebuah bugs.

debugger.png

Saya pribadi sih berharap semoga saja IE8 ini dapat lebih baik dari versi sebelumnya dan tidak membuat para developer dan web designer merasa kerepotan dalam membuat sebuah aplikasi berbasis web seperti versi ie yang sebelumnya.

download IE8

Tags: ,

Pertama denger sih gak percaya apa emang ada tuh yang namanya css framework, ternyata setelah di telusuri di google ternyata ada juga yang namanya css framework

seperti yang sedang populer sekarang ini yaitu YUI (Yahoo user interface), Blueprint dan YAML(Yet Another Multicolumn Layout).

BluePrint

rtemagicc_ybuilder10beta1_01.png

ma_devnet_1.gif

Saya sih baru nyoba Blueprint klo yang lainnya sih masih blum nyoba. itu juga karena permintaan client yang meminta saya untuk mencoba blueprint.

menurut saya sih blueprint sangat membantu sekali dalam pengaturan sebuah layout dan konten karena blueprint mempunyai berbagai pengaturan blok css yang memungkinkan kita untuk membuat sebuah blok css tanpa perlu harus membuat class dari awal.
seperti pembuatan table dengan menggunakan css sangat mudah sekali hanya dengan menggunakan beberapa class yang ada kita dapat membuat sebuah table dengan css.
cuma kelemahan dalam penggunaan blueprint ini sih hanya dalam pengaturan ukuran layoutnya yang sudah baku dan tidak bisa semau kita.
untuk membuat layout nya sendiri sih kita harus membuat design css kita sendiri dan untuk membuat kontennya barulah kita menggunakan blueprint.

bagi seorang webdesign menurut saya css framework ini sangat membantu sekali dalam pengerjaan website yang menggunakan css. karena dapat mempercepat pengerjaan sebuah web.

situs css frame work:

Blueprint (download)

Yui (download)

Yaml (download)

Untuk membuat Tabs content yang harus kita lakukan adalah membuat tabs menu terlebih dahulu yaitu dengan cara membuat membuat sintak css seperti berikut :

/** My tabs **/

.mytabs{margin:0;padding:0;}

.mytabs ul{margin:0px;padding:0;}

.mytabs li{

list-style:none;

float:left;

font-size:11px;

text-transform:capitalize;

}

.mytabs li a{

display:block;

background:#1b6d69;

color:white;

padding:5px 10px;

border-right:1px solid #ece8d2;

text-decoration:none;

}

.mytabs li a:hover{

background:#C0C992;

color:#1b6d69

}

/** My tabs **/

Read the rest of this entry »