You can find the Interfacedesign of Windows 7 considerable and are interested in CSS3? Then you are exactly right here. This is because in this tutorial 2-divider a window from Windows 7 is created with the help of CSS3 and jQuery UI. The first part of this tutorial is about the styling of the window, according to the “Interfacedesign Preferences” of Windows 7. The second part of this tutorial is about the dragging & resizing of the created window with the help of jQuery UI.
Windows 7 – The original as a template
So that you know what will be replicated, here is a picture of a window from Windows 7. However, we will only create a simplified window without closing, minimizing and reducing. That There are only three elements with special interfacedesign characteristics, which are of decisive importance for styling:
- Window frames: transparency, round corners, shadow shadows
- Windowtitle: Program-Icon, Text-Shadow, Font: Segoe UI
- Window content: flexible height and width
But this is not enough, if you enlarge the picture like the picture here on the left, you can see that a few small details are missing in the collection. The window frame has a thin black edge to the outside, but also a pale white edge inwards. The same applies to the window content, but here the light edge is logically outside and the dark edge is inside. In addition, it can be seen that the window content at the corners is quite slightly rounded
Step 1 – Create the HTML framework and content
Before we start the window from Windows 7 using CSS, the HTML framework used for this tutorial is shown. It should be mentioned briefly that the headings h1 to h3 (lines 11, 12 and 14) can correspond to a possible web page structure. To handle the semantics of the headlines, the Windows 7 window in this tutorial example gets the h4 tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Windows 7 with CSS3 and jQuery</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- At this point, JavaScript is referenced in the second part of the tutorial -->
</head>
<body>
...
<h1>Headline of your website</h1>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet ...</p>
<h3>Article Subtitle</h3>
<p>Lorem ipsum dolor sit amet ...</p>
...
<div class="window">
<h4 class="title">Mozilla Firefox</h4>
<div class="content">
<!-- At this point, there is room for your window content -->
</div>
</div>
...
</body>
</html>
Explanation: A doctype should be available, which you use, but is left to you of course. Recommended is of course HTML / XHTML Strict to use, but also the new HTML5 Doctype should work here. In the head, you give the link to the used StyleSheet file. In the second part, this tutorial will refer to the JavaScripts used for Part2.
- JQuery 1.4.2: the latest version of the popular JavaScript framework from the Microsoft server
- JQuery UI: here, besides the “core”, the Draggable and Resizeable module is important (if you are not sure since you have everything, just download the file from the example)
- The last file is a blank JavaScript file, which we will fill in part2
Finally, the actual window, consisting of the above three parts (div.window, div.content and h4, which of course must correspond to the structure of your document), is displayed between lines 19 to 24. Particularly important are the class names, then the styling goes on. The class window stands for the window frame to be created and encloses everything else that belongs to the window. The class title is as the name suggests the window title. The class content logically contains all later window contents.
Step 2 – Create and style the window background
Now it’s interesting, because without CSS, we have so far only a white page and a non-saying title “Mozilla Firefox” (or whatever you wrote in the title …). Therefore, the layout for the background of the window is defined below. The background image of a Steinadler by Richard Bartz under Creative Commons also serves to illustrate the effects, such as transparency.
*
margin:0;
padding:0;
html
height:100%;
width:100%;
body
background:#eadfcd url(../img/background.jpg) no-repeat 0 0;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
height:100%;
width:100%;
overflow:hidden;
In lines 1 to 4, a CSS reset is performed (one can be used another), the page is refreshed to the full screen size, and a background image is still missing (included in the example). The background-size: cover ensures that the background image, regardless of the resolution, is always drawn to the full height and width of the window.
Step 3 – Create and style the window frame
We know what optical features the frame has, this results in the following CSS code, which is spiked with several CSS3 properties.
.window
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 0 1px #eee inset,
0 0 15px rgba(0,0,0,0.9);
-moz-box-shadow:0 0 0 1px #eee inset,
0 0 15px rgba(0,0,0,0.9);
box-shadow:0 0 0 1px #eee inset,
0 0 15px rgba(0,0,0,0.9);
background-color:rgba(160,160,160,0.4);
border:1px solid #000;
height:146px;
left:555px;
padding-bottom:46px;
position:absolute;
top:125px;
width:389px;
- Line 2-4: Round corners through border radius (for Gecko, Webkit and the normal syntax)
- Lines 5 to 10: thin pale white border inside, black shadow outside
- Line 11: transparent background color by RGBa
- Line 12: thin black border
- Line 15: the padding is needed, so that we can later draw the window contents to the full size
- Line 16: is necessary for positioning
- height, left, top and width can be selected as desired, they are only used to initialize the size and position of the window
The current state of affairs would now be a transparent, but still “empty” window without any text and image contents. So, let’s go!
Step 4 – Styling the window title
In the next step we will devote ourselves to the title area of the window, which includes a favicon in addition to the stylistic award of the title. In this case, the Mozilla Firefox browser is used. The font family is based on the family Segoe UI developed by Microsoft for the operating systems Windows Vista and Windows 7.
.window .title
background:transparent url(../img/firefox_favicon.png)
no-repeat 6px 6px;
color:#000;
cursor:move;
font:normal 12px/16px "Segoe UI",Arial,sans-serif;
height:16px;
overflow:hidden;
padding:6px 0 6px 28px;
text-overflow:ellipsis;
text-shadow:0 0 1px #fff,
3px 3px 5px #fff,
-3px -3px 5px #fff,
-3px 3px 5px #fff,
3px -3px 5px #fff;
white-space:nowrap;
- Lines 2 to 3: Program icon, here goes every 16×16 pixel picture
- Line 5: Cursor becomes a cross, which indicates that you can push it around (according to part 2;))
- Line 6: Font size and family (with fallback, if first font family does not exist)
- Line 10: A CSS3 property currently supporting only Chome. Text that is longer than the element is truncated with three points
- Lines 11 to 15: Text-Shadow, so that the text remains legible on the transparent frame
- Line 16: Text is not wrapped if it is longer than the element
Well, we are approaching our goal …
Step 5 – Create and style the window contents
In the next step, we will focus on the content area of the Windows 7 window. This gets assigned to a barely visible but a pixel border radius, as well as appropriate shadow and background properties.
.window .content
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
-moz-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
box-shadow:0 0 0px 1px rgba(255,255,255,0.65);
background-color:#fff;
border:1px solid #666;
color:#000;
font:normal 12px/18px arial,sans-serif;
height:100%;
margin:0 6px;
overflow:auto;
padding:5px;
position:relative;
- Lines 2 to 4: slightly rounded corners
- Lines 5 to 7: thin white border on the outside
- Line 12: Contents must be reeled to the full height of the frame
- Line 14: Content that goes beyond the element can not be displayed; instead, scrollbars appear at the edges of the element
The CSS work carried out in this step now results in the state which corresponds to our initial task.
Step 6 – Content is the King!
As is known as Content the King, the window can now be filled with further content (of your choice).
...
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><img alt="Musterbild" src="img/oops.png" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
...
</div>
...
Since the text and image contents are too large for the window size, the scroll bar appears. The contents of the scrollbar can then be accessed as in a “real” Windows 7 window.
Browser Compatibility
A question which will arise in particular due to the used CSS3 features some of you, is the browser compatibility of this tutorial example. And to get an idea of how this window looks in the other browsers, here is a small preview in the latest versions (FF3.6, Opera10.5, IE8, Safari4, Chrome4):
As you might have guessed, the Internet Explorer (8) does not support any of the CSS3 properties used in the Internet Explorer 9 Preview, as does Safari still has its problems with box shadow, where inset occurs. Chrome has a small rendering bug: with border radius in the interplay with box shadow, unsightly light gray corners occur. Only Firefox and Opera render in this tutorial everything, as it corresponds to the task position.
Windows 7 Window with CSS3 – The Demo
Sure, there are also a number of workarounds and fallbacks for the less mature browsers, but they should not be the content of this tutorial. Rather, the first part of this Turorial will show what will be possible with CSS3 in everything. Until all browsers are on the same level, the example could serve as small CSS3-Testsuite. 😉
View Tutorial Demo
In the second part you will learn how to use jQuery UI to move the window and resize it. I thank you already for the attentive reading, thank you! 🙂
Author
The author has written this first part of this small tutorial series of the guest blogger Norman Paschke, which we welcome over this way on the Webstandard blog. Norman studied Applied Computer Science at the Technical University of Chemnitz and started Norman’s blog in early 2009, where he devoted himself to the topics of “Web and Webdesign”. In addition to tutorials, he also presents current trends and developments such as, for example, the Browsermarkt, picks up.
Source:
firoDj - Stage 
