Window name goes here

[/html]

Bagian Header di bungus dalam class ‘window_header‘ dimana ditempati oleh box untuk title dan juga 3 tombol navigasi(minimize, Maximize, dan Close button). Dan kemudian tambahkan beberapa line CSS berikut ini ke dalam file CSS Anda:

[css]
/* ============= CSS for header area ============== */

/* Window title area, title in upper left */
.window_title{
font-size: 0.9em;
padding: 2px;
color: #fff;
text-align: center;
background-image: url(“../images/darken_bg.png”);
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-weight: bolder;
width: 200px;
float: left;
/* bottom border make round */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* add little shadow */
box-shadow: 1px 1px 1px #000000;
}

/* Button List area, like Minimize, max, close button */
.btn_list{
float: right;
padding: 0px;
}

/* make the easy effect, just fade it with CSS3 */
.btn_list a:link,.btn_list a:visited{
opacity : 0.6;
}

/* make the button fully shown */
.btn_list a:hover{
opacity : 1;
}

.btn_list div{
float: left;
}
/* ============= CSS for header area END ============== */
[/css]

Saya coba terangkan sedikit CSS-nya:

Line 9 Saya memberikan sebuah background hitam transparant karena pada line 7 saya set warna tulisan menjadi putih(#fff).
Line 10-12 Bagian title area kita beri border kiri, bwah, dan bagian kanan saja.
Line 14 Panjang 200px, sesuaikan dengan panjang title Anda.
Line 15 kita set box agar berada di sebelah kiri(float: left).
Line 17-18 Kita terapkan CSS 3, disini saya memberi efek round-corner di bagian bawah box.
Line 20 Terakhir, another CSS3, kita beri bayangan tipis di bagian bawah box.

Ok, apabila Anda me-refresh browser, Anda mendapati bahwa box bagian title window sudah terbentuk di sebelah kiri, sedangkan untuk bagian kanan belum terbentuk

Untuk Class “btn_list” kita set agar berada di kanan(float:right), sisanya beberapa class CSS untuk button(dimana saya memilih menggunakan float agar terlihat menempel satu sama lain). Serta efek “opacity”(dari CSS3) untuk keadaan normal sehingga terlihat lebih transparant. Dan pada saat hiver, kita set opacity kembali ke nilai 1(dimana nilai opacity 0 berarti akan menghilang sama sekali dan 1 akan menampilkan element seperti pada keadaan normal/no-opacity).

Ok… next kita akan buat sebuah box untuk navigasi history atau yang dikenal sebagai breadcrumb. Hasilnya kurang lebih nantinya akan seperti berikut ini:

Untuk membuat tampilan breadcrumb dan juga search box, tambahkan script HTML berikut ini di bawah bagian header:

[html]

[/html]

Before you go on….

Sampai sejauh ini, HTML kita akan seperti ini:
Show ▼

[html]

Window name goes here

• Root node
• Node one
• Node two
• Node two
• Node two
• Node two

[/html]

Ok, next the CSS...
[css]
/* ============= CSS for header NAV. area START ============== */
.upper_navigation{
margin-top: 7px;
margin-bottom:8px;
}

.breadcrumb_container{
/* Breadcrumb navi is in the left side so make it float in the left */
float: left;
/* 75:25% => 75=> breadcrumb, 25 Search box */
width: 75%;
/* the color is white */
background: #fff;

padding: 3px;

border: solid 1px #666666;

/* little rounded */
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;

/* thin shadow */
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/* breadcrumb root have "folder" image */
.breadcrumb_root{
float: left;
background-image: url(../images/gtk-open_20.png);
background-repeat: no-repeat;
width: 20px;
height: 18px;
}

/* breadcrumb listing, becarefull with content width */
.breadcrumb_item{
float: left;
}

.breadcrumb_item ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}

.breadcrumb_item ul li{
display: inline;
background: url(../images/node.png);
background-repeat: no-repeat;
padding-left: 10px;
width: 100px;
}

.breadcrumb_item a:link,.breadcrumb_item a:visited{
text-decoration: none;
color: #000;
padding: 5px;
}
.breadcrumb_item a:hover{
background-image: url(../images/breadcrumb_hover.png);
background-repeat: repeat-x;
border: solid 1px #999999;
padding: 4px;
}

/* Search Box CSS Classes */
.search_box{
/* make height equals the breadcrumb height around 24px */
height: 24px;
/*
set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)
at last give space 2% from breadcrumb box
*/
margin-left: 77%;
/* also set the bg */
background: #fff;

/* the rest is same with breadcrumb box */
border: solid 1px #666666;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;

border-radius : 3px;
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/*
search box styling,the width set to 80% if greater than 80% will throw
the submit button bellow the textbox in Opera(only)
*/
.search_box input[type=text]{
border: none;
padding: 0px 0px 0px 5px;
height: 23px;
float: left;
width: 80%;
}
/* Button with background image set it in the right of the box */
.search_box input[type=submit]{
border: none;
background-color: transparent;
background-image: url(../images/search_btn.png);
background-repeat: no-repeat;
background-position: center center;
height: 23px;
float: right;
}
/* ============= CSS for header NAV. area END ============== */
[/css]

Untuk penjelasannya, kurang lebih seperti yang tertulis diatas

Next bagian utama. Bagian utama dibagi 4 bagian. Bagian atas(toolbar, bisa Anda isi dengan link, pada div ber-class "content_toolbar"), bagian sidebar(div ber-class "window_side_bar"), bagian content(Div ber-class "window_content"), dan footer(div ber-class "window_footer").
[html]

[/html]

don't forget... the CSS
[css]
/* ======= CSS for main content area(content&sidebar) START ======= */
.window_main_container{
/* Set background to white */
background-color: #fff;
/* set space between title area to content box */
margin-top: 5px;

/* set some border */
border-left: 1px solid #585151;
border-right: 1px solid #585151;
border-top: 1px solid #585151;
/* Bottom border is blue */
border-bottom: 1px solid #CCD9EA;
}

/* ontent upper toolbar */
.content_toolbar{
height: 16px;
background-image: url("../images/bg_toolbar.png");
background-repeat: repeat-x;
padding: 8px 5px 5px 5px;
font-size: 11px;
border-bottom: solid 1px #CCD9EA;
}

/* sidebar classes */
.window_side_bar{
float: left;
width: 200px;
padding: 5px;
font-size: 0.9em;
}

.window_side_bar a:link, .window_side_bar a:visited{
color: #151C55;
text-decoration: none;
}

.window_side_bar a:hover{
text-decoration: underline;
color: #0066CC;
}

.window_side_bar ul{
list-style: none;
color: #151C55;
font-weight: bolder;
padding-left: 10px;
padding-bottom: 10px;
}

.window_side_bar ul li{
padding-bottom: 5px;
}

.window_side_bar ul li ul{
list-style: none;
color: #151C55;
padding-left: 10px;
padding-top: 3px;
}

.window_side_bar ul li ul li{
padding-left: 10px;
font-weight: normal;
font-size: 11px;
padding-bottom: 0px;
}

/* This is class for main content window, all content will go here */
.window_content{
background-image: url("../images/bg_sidebar.jpg");
background-repeat: repeat-y;
/* set min height for main container : D */
min-height: 400px;
padding: 0px 0px 0px 210px;
top: 0px;
left: 0px;
}

.content_wrapper{
padding: 2px 10px 5px 10px;
}

/* ======= CSS for main content area(content&sidebar) END ======= */

.window_footer{

/* Footer window background color */
background-color: #F1F5FB;
/* set height window footer */
height: 65px;
/* footer upper border */

border-left: 1px solid #585151;
border-right: 1px solid #585151;
}

/* content styling */
h2 {
color: #4776BD;
font-weight: normal;
font-size: medium;
}
.content_desc{
padding-bottom: 20px;
font-style: italic;
}
.window_content{
font-size: 11px;
}

fieldset{
border: 1px solid #CCCCCC;
}

legend{
color: #003399;
font-size: 1.1em;
}

/* input object classes */
.window_content input[type=text],
.window_content input[type=password],
.window_content input[type=date],
.window_content input[type=file],
.window_content select{
font-size: small;
width: 250px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}

textarea{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 250px;
height: 60px;
resize: true;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}
[/css]

Ok, kurang lebih sekarang file HTML & CSS keseluruhan akan seperti berikut:

HTML file
Show ▼

[html]

Window name goes here

• Root node
• Node one
• Node two
• Node two
• Node two
• Node two

add special toolbar/link here

• Main Menu item
• This is Root menu 1
  • Menu item
  • Menu item
    • sub of Menu item
  • Menu item
• This is Root menu 2
  • Menu item
  • Menu item
  • Menu item

Lorem ipsum dolor sit ame

Page description in here, you can
describe your page content to your user what is this page for.

Field set title

Field set content

2 3 4

This is text area

Some hyperlink

[/html]

CSS:
Show ▼

[css]
body {
/* make little floaty from the top : D */
margin-top: 100px;
/* set your desktop background : D */
background-image: url(../images/the_bg.jpg);
/* windows 7 using Segoe UI font but it's not
* very common on other OS, we will using Verdana instead
*/
font-family: Verdana,Helvetica,sans-serif;
/* set font size... well it's up to you */
font-size: 0.8em;
}

/* some oldies browser make blue border in image link
* this one will remove all blue border
*/
a img{ border: none; }

/* hyperlink global rule */
a:link, a:visited {
color: #0066CC;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

.clear{
clear: both;
}

/* Main container is the main DIV contained the Window frame */
.main_container {
/* Magin left-right set auto to make it in center */
margin-left: auto;
margin-right: auto;

/* width of windo we set to 70% */
width: 70%;
min-width: 800px;

/* set background image */
background-image: url(../images/window_bg.png);

/* set the border color */
border: 1px solid #666666;
/* CSS3 droping shadow for window */
-moz-box-shadow : 5px 5px 15px #000000; /* mozilla prefix */
-webkit-box-shadow : 5px 5px 15px #000000; /* webkit prefix (chrome/safari) */
box-shadow : 5px 5px 15px #000000; /* legal css 3 only */

/* CSS3 makes rounded box */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

/* make padding to make the border feel real : D */
padding: 0px 5px 5px 5px;

}

/* ============= CSS for header area ============== */

/* Window title area, title in upper left */
.window_title{
font-size: 0.9em;
padding: 2px;
color: #fff;
text-align: center;
background-image: url("../images/darken_bg.png");
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-weight: bolder;
width: 200px;
float: left;
/* bottom border make round */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* add little shadow */
box-shadow: 1px 1px 1px #000000;
}

/* Button List area, like Minimize, max, close button */
.btn_list{
float: right;
padding: 0px;
}

/* make the easy effect, just fade it with CSS3 */
.btn_list a:link,.btn_list a:visited{
opacity : 0.6;
}

/* make the button fully shown */
.btn_list a:hover{
opacity : 1;
}

.btn_list div{
float: left;
}
/* ============= CSS for header area END ============== */

/* ============= CSS for header NAV. area START ============== */
.upper_navigation{
margin-top: 7px;
margin-bottom:8px;
}

.breadcrumb_container{
/* Breadcrumb navi is in the left side so make it float in the left */
float: left;
/* 75:25% => 75=> breadcrumb, 25 Search box */
width: 75%;
/* the color is white */
background: #fff;

padding: 3px;

border: solid 1px #666666;

/* little rounded */
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;

/* thin shadow */
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/* breadcrumb root have "folder" image */
.breadcrumb_root{
float: left;
background-image: url(../images/gtk-open_20.png);
background-repeat: no-repeat;
width: 20px;
height: 18px;
}

/* breadcrumb listing, becarefull with content width */
.breadcrumb_item{
float: left;
}

.breadcrumb_item ul{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}

.breadcrumb_item ul li{
display: inline;
background: url(../images/node.png);
background-repeat: no-repeat;
padding-left: 10px;
width: 100px;
}

.breadcrumb_item a:link,.breadcrumb_item a:visited{
text-decoration: none;
color: #000;
padding: 5px;
}
.breadcrumb_item a:hover{
background-image: url(../images/breadcrumb_hover.png);
background-repeat: repeat-x;
border: solid 1px #999999;
padding: 4px;
}

/* Search Box CSS Classes */
.search_box{
/* make height equals the breadcrumb height around 24px */
height: 24px;
/*
set magin from the left around 77% (remmeber the breadcrumb section is 75 in width)
at last give space 2% from breadcrumb box
*/
margin-left: 77%;
/* also set the bg */
background: #fff;

/* the rest is same with breadcrumb box */
border: solid 1px #666666;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;

border-radius : 3px;
-moz-box-shadow : 1px 1px 3px #666;
-webkit-box-shadow : 1px 1px 3px #666;
box-shadow : 1px 1px 3px #666;
}

/*
search box styling,the width set to 80% if greater than 80% will throw
the submit button bellow the textbox in Opera(only)
*/
.search_box input[type=text]{
border: none;
padding: 0px 0px 0px 5px;
height: 23px;
float: left;
width: 80%;
}
/* Button with background image set it in the right of the box */
.search_box input[type=submit]{
border: none;
background-color: transparent;
background-image: url(../images/search_btn.png);
background-repeat: no-repeat;
background-position: center center;
height: 23px;
float: right;
}
/* ============= CSS for header NAV. area END ============== */

/* ======= CSS for main content area(content&sidebar) START ======= */
.window_main_container{
/* Set background to white */
background-color: #fff;
/* set space between title area to content box */
margin-top: 5px;

/* set some border */
border-left: 1px solid #585151;
border-right: 1px solid #585151;
border-top: 1px solid #585151;
/* Bottom border is blue */
border-bottom: 1px solid #CCD9EA;
}

/* ontent upper toolbar */
.content_toolbar{
height: 16px;
background-image: url("../images/bg_toolbar.png");
background-repeat: repeat-x;
padding: 8px 5px 5px 5px;
font-size: 11px;
border-bottom: solid 1px #CCD9EA;
}

/* sidebar classes */
.window_side_bar{
float: left;
width: 200px;
padding: 5px;
font-size: 0.9em;
}

.window_side_bar a:link, .window_side_bar a:visited{
color: #151C55;
text-decoration: none;
}

.window_side_bar a:hover{
text-decoration: underline;
color: #0066CC;
}

.window_side_bar ul{
list-style: none;
color: #151C55;
font-weight: bolder;
padding-left: 10px;
padding-bottom: 10px;
}

.window_side_bar ul li{
padding-bottom: 5px;
}

.window_side_bar ul li ul{
list-style: none;
color: #151C55;
padding-left: 10px;
padding-top: 3px;
}

.window_side_bar ul li ul li{
padding-left: 10px;
font-weight: normal;
font-size: 11px;
padding-bottom: 0px;
}

/* This is class for main content window, all content will go here */
.window_content{
background-image: url("../images/bg_sidebar.jpg");
background-repeat: repeat-y;
/* set min height for main container : D */
min-height: 400px;
padding: 0px 0px 0px 210px;
top: 0px;
left: 0px;
}

.content_wrapper{
padding: 2px 10px 5px 10px;
}

/* ======= CSS for main content area(content&sidebar) END ======= */

.window_footer{

/* Footer window background color */
background-color: #F1F5FB;
/* set height window footer */
height: 65px;
/* footer upper border */

border-left: 1px solid #585151;
border-right: 1px solid #585151;
}

/* content styling */
h2 {
color: #4776BD;
font-weight: normal;
font-size: medium;
}
.content_desc{
padding-bottom: 20px;
font-style: italic;
}
.window_content{
font-size: 11px;
}

fieldset{
border: 1px solid #CCCCCC;
}

legend{
color: #003399;
font-size: 1.1em;
}

/* input object classes */
.window_content input[type=text],
.window_content input[type=password],
.window_content input[type=date],
.window_content input[type=file],
.window_content select{
font-size: small;
width: 250px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}

textarea{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 250px;
height: 60px;
resize: true;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: solid 1px #7DA2CE;
padding: 3px;
}
[/css]

Okey... now refresh your browser... and the final result will be like this image:

Tutorial result

Known Issue...

As you know ... it's alll about Internet Explorer. IE 8 will be okay although there is no round corner, but not IE 7 and older IE, it'll mess the design.

Sekian tutorial kali ini, Thank you

http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3 http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3#comments Sat, 21 Jan 2012 12:10:32 +0000 リズキ http://neo.rizkhey.net/?p=4195 Saya masih ingat benar tahun 2007-2008 banyak website yang menggunakan rounded-corner, saat itu CSS3 mungkin belom terdengar. para desainer menggunakan pendekatan rounded-corner image untuk menutupi sudut-sudut yang tidak melengkung.

It’s not as easy as writing 1 line of CSS, but now we can

Banyak yang sering terbatas dengan ukuran(width) yang terbatas karena image-nya statis, Untungnya para perancang standart di luar sana mengerti kebutuhan ini untuk kebutuhan desain yang lebih menarik dan juga lebih mudah. Sekarang kita dengan mudah menuliskan 1 line CSS seperti halnya mendefinisikan border sebuah elemen.

Internet explorer? ah you know who the villain isn’t

Bagaimana dengan Browser compatibility? Seperti biasa Internet Explorer selalu tertinggal. Tidak usah menyebutkan Internet Explorer6, bahkan 8 pun belum mensupport CSS3 ini, baru Internet Explorer mensupport CSS3. Sangat disayangkan semenjak Browser mobile seperti Dolphin(Android) dapat mensupportnya dengan baik. Sementara Mozilla Firefox, Webkit browser(Safari & Chrome), dan Opera sudah dapat menjalakan fasilitas ini dengan baik.

Mozilla firefox (untuk yang mempunyai versi < 4), didepan line CSS ditambahkan prefix “-moz-“, sementara untuk Chrome dan Safari untuk menanggulangi versi tua, dapat menggunakan prefix “-webkit-“.

Oke cukup penjelasannya, saya akan coba bahas beberapa modul CSS3 yang saya sukai untuk project keseharian saya:

1. border-radius

Border radius adalah yang saya bahas di atas, berfungsi untuk membuat rounded-corner. Syntaxnya sangat sederhana

[css]
/* for Mozila */
-moz-border-radius: [num]px;
/* for Webkit */
-webkit-border-radius: [num]px;

border-radius: [num]px;
[/css]

User modern Firefox, Webkit browser, Opera and IE9 will see the corner rounded by 5 pixels

Bagaimana apabila yang diinginkan sudut tertentu saja? There is another way

[css]
/* bottom-left radius */
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
/* bottom-right radius */
-moz-border-radius-bottomright : 5px;
border-bottom-right-radius: 5px;
/* top-left radius */
-moz-border-radius-topleft : 5px;
border-top-left-radius: 5px;

/* top-right radius */
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
[/css]

not all corner rounded here

2. box-shadow

Sama dengan rounded border, syntax CSS3 ini akan membuat shadow disekeliling box

[css]
/* for mozilla */
-moz-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]
/* for webkit */
-webkit-box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]

box-shadow : [horizontal-coor]px [vertical-coor]px [blur-radius]px [shadow-color]
[/css]

Example

User modern Firefox, Webkit browser, Opera and IE9 will see the corner rounded by 5 pixels with some shadow

3. Opacity

Agak jarang dipake tapi lumayan berguna dan mempermudah pekerjaan, berfungsi mengatur opacity sebuah element.
[css]opacity:[0-1];[/css]
Derajat opacity antara 0 dan 1. Contoh:

[html highlight_lines="8"]

This is should be…

[/html]

This is should be…

Itulah 3 dari banyak CSS3 yang paling sering saya gunakan. Karena secara user yang menggunakan IE masih agak troublesome, tentinysa saya tidak menggunakan untuk bagian -bagian kritis, dan hanya sebagai kosmetik bukan seperti jaman CSS1 ke CSS2 yang ada sampai tata letak(Overflow, top, left, etc) yang membuat cukup kacaw layout apabila browser tidak mendukung seperti jaman sekitar 2006-an saat IE6 masih sebagian besar browser

Untuk mempelajari lebih jauh CSS3, Anda dapat belajar di CSS3.info, saya juga belajar dari web tersebut .

]]> http://neo.rizkhey.net/2012/01/4195-3-omy-favorite-css3/feed 0

http://neo.rizkhey.net/2010/04/3463-re-designdraft-selesai-rc-1-roll-out http://neo.rizkhey.net/2010/04/3463-re-designdraft-selesai-rc-1-roll-out#comments Thu, 08 Apr 2010 16:23:49 +0000 リズキ http://neo.rizkhey.net/?p=3463

Setelah berkali-kali nge-draft di kertas, mencoba susunan-susunan yang tepat. Sesekali mencari inspirasi di sebuah situs showcase WordPress, akhirnya setelah mendapatkan ide, gw mulai mengumpulkan ilustrasi-ilustrasi dari gallery dan review-review Hardware yang gw lakukan akhir-akhir ini(Ga mungkin kan gw pakai yang sama dengan tahun lalu ).

So akhirnya setelah mencoba dan mencoba, akhirnya gw mulai iseng-iseg membuat background-nya dulu(biasa gw background kecil yang gw taruh di atas saja).

Background yang akan dipakai nantinya

Walau jadinya agak besar, tapi dari modal awal membuat background kemudian terus-menerus ide muncul. Draft- pun selesai setelah jam makan siang. Dan gw bisa masuk ke step berikutnya, Pembuatan Dummy HTML-nya.

Memang tidak selesai di Kantor, tetapi sampai saat ini gw masih melanjutkannya, sampai paling tidak halaman home-nya sudah selesail. Hasilnya seperti yang tampak di atas. Tentunya, ini masih dalam tahap Dummy, perubahan masih terjadi karena ini masih dalam milestone RC1

Mungkin yang masih belum membuat gw puas adalah bagian footernya, dan juga bagian contentnya yang terkesan monoton. Tetapi gw belum tau juga, mungkin setelah dibuat beneran baru terasa Life juga mungkin yah

Well I’ll do my best

]]> http://neo.rizkhey.net/2010/04/3463-re-designdraft-selesai-rc-1-roll-out/feed 0

http://neo.rizkhey.net/2010/02/3405-another-design http://neo.rizkhey.net/2010/02/3405-another-design#comments Sun, 28 Feb 2010 15:56:51 +0000 リズキ http://neo.rizkhey.net/?p=3405

Walau kemarin sudah membuat rancangan design-nya sampai jadi HTML, Entah kenapa gw amsih belum puas. kesan kaku dll masih ada di kepala gw. Sesaat hari ini terakhir libur sebelum besok Senin kembali melakukan rutinitas di kantor, gw menyempatkan diri berjalan-jalan di beberapa website untuk mencari Inspirasi.

Salah satu inspirasi buat gw mungkin salah satu Themes tempoe Doloe yang pernah gw pakai di blog lama gw:

gw pengen simple di depan, ga banyak POST tetapi bisa dibilang padat. Untuk mencari inspirasi lainnya gw mencoba mampir ke showcase di www.wordpress.org dan juga sebuah fansite WordPress. Yeah gw menemukan banyak yang unik disana Mulai dengan blog biasa(tapi bisa masuk sana, hebat >.< ) Sampai website kelas enterprise(yeah ENterprise ga butuh yang berat, WP is almost everything ).

Gw menemukan beberapa sample dari sana dan akhirnya gw mencoba menggambarkan strach di program pengolah gambar… Walau belum grafikal sekali, tetapi cukup menggambarkan isinya nanti

Kalaupun jadi mungkin yang kemarin gw drop dan gw akan menggunakan layout seperti di atas tesb

]]> http://neo.rizkhey.net/2010/02/3405-another-design/feed 0

http://neo.rizkhey.net/2010/02/3401-designing-time-on-holidays http://neo.rizkhey.net/2010/02/3401-designing-time-on-holidays#comments Sat, 27 Feb 2010 13:32:34 +0000 リズキ http://neo.rizkhey.net/?p=3401

Setelah tertunda beberapa lama, akhirnya mumpung libur, gw melanjutkan mendesain themes untuk situs gw ini. Walau gw pengen cepet, tetapi kayaknya gw  ga pengen buru-buru. Gw masih belum sreg dengan hasil yang gw buat. Gw masih merasa hasil design yang gw buat masih terlalu kaku, dan ga berbeda dengan halaman home yang sekarang.

Mungkin gw terlalu banyak melihat desain situs yang penuh dengan iklan, dan seketika juga gw merasakan bahwa iklan animasi terkadang ada pengaruhnya juga pada layout situs. Selain itu Desain gw memang masih terkesan klasik dan kuno.

Full Design bisa dilihat disini. Jauh dari kata bagus menurut gw…

]]> http://neo.rizkhey.net/2010/02/3401-designing-time-on-holidays/feed 0

http://neo.rizkhey.net/2010/01/3251-2010-theme-is-simplicity-new-theme http://neo.rizkhey.net/2010/01/3251-2010-theme-is-simplicity-new-theme#comments Thu, 07 Jan 2010 16:36:26 +0000 リズキ http://neo.rizkhey.net/?p=3251

New Design 2010 Snapshoot