Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
417 lines (375 sloc) 11.2 KB
<!--
Author: Joshua Jones
Company: The General Metrics Web Development Company
Date: March 2010
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Joshua R. Jones">
<title>Safari</title>
<style type="text/css">
body {
font-family: "Lucida Grande";
background: url(Leopard_Aurora.jpg) no-repeat bottom center;
background-attachment: fixed;
}
/*
* Base Layout
*/
.chrome div {
cursor: default;
}
.browser {
width: 900px;
margin: 0 auto;
position: relative;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.4);
background-color: .969696;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.4);
}
.chrome {
height: 71px;
position: relative;
background-image: -webkit-gradient(linear, left top, left bottom,
from(rgb(226, 226, 226)),
color-stop(0.02, rgb(201, 201, 201)),
color-stop(0.98, rgb(167, 167, 167)),
to(rgb(201, 201, 201))
);
border-bottom: 1px solid rgb(105, 105, 105);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-user-select: none;
}
/* Nullify any <a>'s in the chrome */
.chrome a {
color: rgb(0, 0, 0);
text-decoration: none;
}
.chrome a:hover {
color: rgb(255, 255, 255);
cursor: default;
}
.viewport {
overflow: auto;
padding: 8px;
height: 600px;
font-family: serif;
text-shadow: 0px 0px 0px transparent;
background-color: rgba(255, 255, 255, 1);
}
/*
* Window
*/
.window-title {
width: 45%;
margin: 0 auto;
font-size: 13px;
left: 48%;
top: 3px;
position: absolute;
}
.window-controls {
width: 56px;
position: absolute;
top: 4px;
left: 8px;
}
.window-controls div {
width: 12px;
height: 12px;
float: left;
margin-right: 7px;
color: rgba(67, 74, 87, 0);
background-color: rgb(134, 139, 146);
border: 1px solid rgb(84, 93, 109);
background-image: -webkit-gradient(radial, 50% 2, 1, 50% 1, 3, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
-webkit-border-radius: 20px;
-webkit-box-shadow: 0px 1px 0px rgb(226, 226, 226);
}
.window-controls div:last-child {
margin-right: 0;
}
.window-controls div:active {
background-color: rgb(84, 88, 93);
}
.window-controls div:active span {
opacity: 0.7;
}
.window-controls span {
width: 12px;
height: 12px;
position: absolute;
font-family: "Lithos Pro";
font-size: 12px;
font-weight: bold;
line-height: 15px;
text-align: center;
color: rgba(0, 0, 0, 0);
text-shadow: none;
text-align: center;
-webkit-border-radius: 20px;
z-index: 10;
background-image: -webkit-gradient(radial,
6 50%, 7,
6 60%, 5,
from(rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
),
-webkit-gradient(radial,
6 80%, 8,
6 80%, 2,
from(rgba(225, 225, 225, 0)),
to(rgba(255, 255, 255, 0.8))
);
}
.window-controls:hover span {
color: rgba(67, 74, 87, 1)
}
.close-window span {
font-size: 10px;
}
.minimize-window span {
font-family: "Helvetica";
font-size: 23px;
line-height: 10px;
font-weight: normal;
}
.expand-window span {
font-size: 15px;
line-height: 12px;
}
/*
* The actual interface area
*/
.interface {
width: 98%;
position: absolute;
top: 24px;
left: 8px;
}
/* Bookmark Button */
.bookmark {
width: 28px;
left: 62px;
position: absolute;
font-family: "Myriad Pro";
font-size: 20.25px;
line-height: 22px;
text-align: center;
font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
/* Reload Button */
.reload {
-webkit-transform: rotate(50deg);
position: absolute;
top:5px;
left: 657px;
width: 28px;
font-family: "Menlo", "Arial";
font-size: 21px;
line-height:1.05;
border:none;
background:transparent;
color:#444;
}
.chrome input[type="text"],
.chrome input[type="search"] {
height: 20px;
padding: 0 4px;
position: absolute;
font-size: 13px;
line-height: 10px;
border: 1px solid rgb(61, 61, 61);
border-bottom-color: rgb(114, 114, 114);
border-left-color: rgb(58, 58, 58);
border-right-color: rgb(58, 58, 58);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(220, 220, 220)), to(rgb(255, 255, 255)), color-stop(0.1, rgb(255, 255, 255)));
-webkit-box-shadow: 0px 1px 0px rgba(225, 225, 225, 0.7);
}
input.url {
width: 578px;
left: 90px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
}
.chrome input[type="search"] {
width: 195px;
height: 23px;
left: 78%;
font-size: 16px;
-webkit-border-radius: 20px;
/*-webkit-appearance: none;*/
}
/*
* Back/Forward Buttons
*/
.back-forward {
width: 53px;
position: absolute;
text-align: center;
}
.back-forward div {
width: 25px;
}
.button-back {
float: left;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
.back-forward span {
left: 7px;
top: 3px;
}
.button-back span {
-webkit-transform: rotate(-90deg);
text-shadow: -1px 0px 0px rgba(255, 255, 255, 0.7);
}
.button-forward {
left: 26px;
float: right;
border-left: none;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}
.button-forward span {
-webkit-transform: rotate(90deg);
text-shadow: 1px 0px 0px rgba(255, 255, 255, 0.7);
}
.button:active {
background-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0, 0, 0, 0.7)),
color-stop(0.2, rgba(0, 0, 0, 0.1)),
color-stop(0.75, rgba(0, 0, 0, 0.1)),
to(rgba(0, 0, 0, 0.3))
),
-webkit-gradient(linear, left top, right top,
from(rgba(0, 0, 0, 0.4)),
color-stop(0.2, rgba(0, 0, 0, 0.2)),
color-stop(0.8, rgba(0, 0, 0, 0.2)),
to(rgba(0, 0, 0, 0.5))
),
-webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(169, 169, 169)));
}
.button,
.disabled:active {
height: 20px;
position: absolute;
border: 1px solid rgb(61, 61, 61);
background-image: -webkit-gradient(linear, left top, left bottom,
from(rgb(253, 253, 253)),
to(rgb(169, 169, 169))
);
-webkit-box-shadow: 0px 1px 0px rgba(225, 225, 225, 0.7);
}
.button span {
position: absolute;
font-size: 11px;
}
.disabled {
color: rgba(0, 0, 0, 0.4);
}
/*
* Bookmarks Bar
*/
.bookmarks-bar {
width: 90%;
top: 27px;
left: -3px;
position: absolute;
}
.bookmarks-bar ul li {
padding: 1px 7px;
margin: 0 1px 0 0;
float: left;
list-style-type: none;
font-size: 11px;
font-weight: 600;
line-height: 14px;
-webkit-border-radius: 10px;
}
.bookmarks-bar ul {
margin: 0;
padding: 0;
}
.bookmarks-bar ul li span {
font-size: 7px;
}
.bookmarks-bar ul li:hover,
.bookmarks-bar ul li:hover a {
text-shadow: 0px 1px 0px rgb(0, 0, 0);
color: rgb(255, 255, 255) !important;
}
.bookmarks-bar ul li:hover {
background: gray;
}
.bookmarks-bar ul li:active {
text-shadow: 0px 1px 0px rgb(0, 0, 0);
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="browser">
<div class="chrome">
<div class="window-controls">
<div class="close-window"><span>x</span></div>
<div class="minimize-window"><span>-</span></div>
<div class="expand-window"><span>+</span></div>
</div>
<div class="window-title">Safari</div>
<div class="interface">
<div class="back-forward">
<div class="button-back button">
<span>▲</span>
</div>
<div class="button-forward button disabled">
<span>▲</span>
</div>
</div>
<div class="bookmark button">+</div>
<input type="text" class="url" value="http://localhost/">
<div class="reload">↻</div>
<input type="search" results="5" placeholder="Google">
<div class="bookmarks-bar">
<ul>
<li><a href="http://general-metrics.com/">General Metrics</a></li>
<li><a href="http://twitter.com/g_metrics">Twitter</a></li>
<li><a href="http://github.com/Jonesy/Safari-Clone">Source on Github</a></li>
</ul>
</div>
</div>
</div>
<div class="viewport">
<h1>A good browser should be able to reproduce itself.</h1>
<h3>This is Safari 4 built entirely with HTML and CSS3. No images used.</h3>
<small>(Only works in Webkit Mac-based browsers, of course)</small>
<p>Being a web developer who works on a Mac, I've noticed that Apple's implementation of CSS3 to Webkit and Safari always felt like they were extending OS X GUI elements to the web, even going so far as to make the <a href="http://willnorris.com/2009/09/itunes-9-now-with-more-webkit" title="iTunes 9, now with more WebKit - Will Norris">iTunes store mostly out of Webkit</a>. With that in mind and being inspired by <a href="http://desandro.com/articles/opera-logo-css/" title="Opera Logo with CSS - David DeSandro">David DeSandro's Opera Logo made in CSS</a>, I decided to take on Safari itself. I did so with the following in mind:</p>
<ol>
<li>Only CSS</li>
<li>No images</li>
<li>No JavaScript</li>
<li>No Canvas</li>
</ol>
<p>With those limits there of course were some features of Safari's default state that didn't make the cut for now — most obviously the tabs and various icons. I also didn't take any steps to make this experiment work in any other browser (it does work in Chrome for Mac however). Eventually I'd like to perform the same experiment with FireFox 3.6, and perhaps others down the road if CSS3 advancements become available.</p>
<h3>Some notes:</h3>
<ul>
<li>The most surprising part was being able to recreate with little effort the Aqua window buttons with multiple CSS gradient backgrounds. I ended up having to add an extra <code>&lt;span&gt;</code> element so I could get the bevel in cleanly, but I almost could of got away with just one <code>&lt;div&gt;</code>.</li>
<li>I chose to go with <code>&lt;input type="search"&gt;</code> over styling a text input with <code>-webkit-border-radius</code> over styling a text input with -webkit-border-radius (which looks too jagged). Con is that the border colour is slightly off, but pro is it looks nicer and we gain the magnifying glass icon for free (keeping with the no images rule).</li>
<li>I went with fonts over skewed and rotated <code>&lt;div&gt;</code>'s for the button labels, but with an extra bit of work I could switch them over in order to lose some of the fuzziness that comes with Safari's font anti-aliasing.</li>
<li>In the spirit of making the browser with no additional images, I opted to keep the Address Bar globe out, as well as the Refresh button, but with little work they can be slotted in. The source is available on <a href="http://github.com/Jonesy/Safari-Clone">Github</a>, and if anyone wants to take on making the browser actually work, have at it!</li>
</ul>
<p>Next up: Mobile Safari.</p>
</div>
</div>
</body>
</html>