ilus

Clone Windows 7 Window Box with HTML & CSS3

By On January 28, 2012 · Leave a Comment · In Web Design

Apakah Anda sudah pernah melihat Ubuntu Online Tour? Apabila belum mungkin Anda bisa ke website Ubuntu, ada sebuah link di bagian bawah halaman  utama. Tour ini merupakan complete replica Ubuntu dalam HTML & Javascript. Very cool I think :D

Semenjak melihat demo tersebut, saya punya keinginan membuat UI yang sama seperti itu yang bisa digunakan dalam sebuah web-application. Dengan type seperti ini, User tidak perlu bolak-balik ke beberapa page karena 1 halaman hanya dapat mengakomodir 1 proses. Dengan demikian produktifitas user dapat meningkat. Plus saya tidak usah membuat form-form khusus di setiap page-page tertentu.

Tutorial result

Tutorial result

Well untuk pemulaan, kita harus membuat desain windownya terlebih dahulu, untuk itu dalam tutorial kali ini saya akan membuat sebuah box window mirip dengan Windows 7 (walau tak sama 100% :) ). Ini akan menjadi dasar User interface yang saya ceritakan di atas sekaligus mendemokan artikel tentang CSS3 yang saya tulis sebelumnya (3 My Favorite CSS3).

Untuk permulaan buatlah sebuah folder untuk menampung file pekerjaan Anda. Saya menggunakan nama “design”, dan di dalamnya buatlah 2 buah folder yitu:

  • images
  • css

Sebelum memulai pekerjaan kita, download-lah file-file images yang dibutuhkan.

Images download

The background taken from theme pack waterfall in Windows theme

Extract semua file di dalam file zip ke folder ‘images’. Setelah itu buatlah sebuah file css di dalam folder “css” dengan nama “main.css“, dan sebuah file html di folder utama bernama “index.html”.

Buka file “index.html” dan mulailah menulis tag-tag HTML sbb:

<!DOCTYPE html>
<html>
    <head>
        <title>Windows 7 not-very-Clone Design</title>
        <link href="css/main.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
       <div class="main_container"></div>
    </body>
</html>

Lalu bukalah “main.css” dan tulislah copy-lah beberapa code untuk CSS-nya sbb:

body {
    /* make little floaty from the top  */
    margin-top: 100px;
    /* set your desktop background  */
    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;
}

Cobalah buka file HTML tersebut di browser, Tampilan akan kurang lebih seperti gambar berikut ini:
Body CSS

Anda melihat sebuah div:

<div class="main_container"></div>

Dimana semua isi dari window akan ada disana, maka tambahkan CSS class dengan nama ‘main_container’, lalu isi dengan CSS script sbb:

/* 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 */
    padding: 0px 5px 5px 5px;

}

Coba refresh HTML, maka akan mendapati sebuah box di tengah layar seperti berikut:
Container window

Dalam pembuatan container ini saya menggunakan 2 efek dari CSS3 yaitu border radius dan juga box-shadow untuk membuat efek round corner dan juga sedikit kosmetik untuk shadow.

Kita lanjut ke langkah selanjutnya. kita akan membuat navigasi dan juga title dari sebuah window. Hasilnya akn seperti di bawah ini.

Header navigation

Untuk menghasilkan hasil seperti di atas, kita tambahkan HTML script berikut ini di dalam div ber-class ‘main_container‘

            <!-- MAIN CONTAINER FOR WINDOW START -->
        <div class="main_container">

            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) START -->
            <div class="window_header">
                <div class="window_title">Window name goes here</div>
                <div class="btn_list">
                    <div><a href="#" title="Minimize"><img alt="Minimize window" src="images/minime.png"></a></div>
                    <div><a href="#" title="Maximize"><img alt="sign out" src="images/btn.png"></a></div>
                    <div><a href="#" title="close"><img alt="sign out" src="images/logout.png"></a></div>
                </div>
                <div class="clear"></div>
            </div>
            <!-- HEADER WINDOW(TITLE, CLOSE BTN, ETC) END -->

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 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 ============== */

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 :P

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:

Next is Breadcrumb

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

            <!-- HEADER NAVIGATION START -->
            <div class="upper_navigation">
                <div class="breadcrumb_container">
                    <div class="breadcrumb_root"></div>
                    <div class="breadcrumb_item">
                        <ul>
                            <li><a href="#">Root node</a></li>
                            <li><a href="#">Node one</a></li>
                            <li><a href="#">Node two</a></li>
                            <li><a href="#">Node two</a></li>
                            <li><a href="#">Node two</a></li>
                            <li><a href="#">Node two</a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="search_box">
                    <form action="#">
                        <input type="text" name="textbox" />
                        <input type="submit" value="" />
                    </form>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <!-- HEADER NAVIGATION END -->

Before you go on….

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

Ok, next the 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 ============== */

Untuk penjelasannya, kurang lebih seperti yang tertulis diatas :D

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”).

            <!-- main container for content START -->
            <div class="window_main_container">

                <div class="content_toolbar">
                    add special toolbar/link here
                </div>

                <div class="window_side_bar">
                    <ul>
                        <li><a href="#">Main Menu item</a></li>
                        <li>
                            This is Root menu 1
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a>
                                    <ul>
                                        <li><a href="#">sub of Menu item</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                        <li>
                            This is Root menu 2
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="window_content">

                    <div class="content_wrapper">
                        <h2>Lorem ipsum dolor sit ame</h2>

                        <div class="content_desc">
                            Page description in here, you can
                            describe your page content to your user what is this page for.
                        </div>

                        <fieldset>
                            <legend>Field set title</legend>
                            Field set content
                            <div style="padding: 3px;"><input type="text" name="txt_textbox" /></div>
                            <div style="padding: 3px;">
                                <select>
                                    <option value="1" >2</option>
                                    <option value="2" >3</option>
                                    <option value="3" >4</option>
                                </select>
                            </div>
                            <div style="padding: 3px;">
                                <textarea name="txt_textarea">This is text area</textarea>
                            </div>
                            <div style="padding: 3px;">
                                <input type="submit" />
                                <a href="#">Some hyperlink</a>
                            </div>

                        </fieldset>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
            <!-- main container for content END-->

            <!-- WINDOW FOOTER AREA -->
            <div class="window_footer">

            </div>
            <!-- WINDOW FOOTER AREA -->

don’t forget… the 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;
}

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

HTML file
Show ▼

CSS:
Show ▼

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

Tutorial result

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 :D

Download Source Code

Popularity: 1% [?]

Tagged with: • •
 
Share it with your friens
Facebook Twitter Delicious Digg

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>