CSS3網頁制作實例：頁面效果
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
/*YAHOO! RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,em,strong,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
/*---------- END RESET ----------*/
/*------------------------------------*\
MAIN
\*------------------------------------*/
html{
font-size:100%;
height:101%;
}
body{
font-size:62.5%;
font-family:Arial, Verdana, sans-serif;
background:#fff;
color:#333;
}
#wrapper{
width:940px;
margin:0 auto;
padding:10px;
}
@font-face{
font-family: "GraublauWeb";
src: url(../fonts/GraublauWeb.eot);
src: local('GraublauWeb'), local('GraublauWeb'),
url(../fonts/GraublauWeb.otf) format('opentype');
}
@font-face{
font-family: "GraublauWebBold";
src: url(../fonts/GraublauWebBold.eot);
src: local('GraublauWebBold'), local('GraublauWebBold'),
url(../fonts/GraublauWebBold.otf) format('opentype');
}
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1,h2,h3,h4,h5,h6{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
line-height:1.4em;
margin-bottom:18px;
font-weight:bold;
text-shadow:1px 1px 1px #999;
}
h1 { font-size:2.4em; }
h2 { font-size:2.0em; }
h3 { font-size:1.8em; }
h4 { font-size:1.6em; }
.caption{
margin-bottom:5px;
font-style:italic;
line-height:1em;
clear:both;
}
/*--- PARAGRAPHS ---*/
p{
font-size:1.2em;
line-height:1.5em;
margin-bottom:18px;
}
p#intro{
font-size:1.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;
}
/*--- LINKS ---*/
a{
color:#00f;
}
/*--- MISC ---*/
code{
font-family:"Courier New", "Lucida Console", Courier, monospace;
font-size:1.3em;
}
pre{
font-family:"Lucida Console", "Courier New", Courier, monospace;
padding:10px;
background:#ffc;
border:1px solid #ff8;
margin-bottom:18px;
clear:both;
}
pre strong{
font-weight:bold;
color:#000;
}
.comment{
color:#080;
}
/*------------------------------------*\
TABLES
\*------------------------------------*/
table{
font-size:1.2em;
width:100%;
margin-bottom:20px;
}
th{
font-weight:bold;
}
td,th{
border:1px solid #ccc;
padding:5px;
}
thead tr{
border-bottom:2px solid #ccc;
}
tbody tr:nth-of-type(odd){
background:#ffc;
}
/*--- EMPLOYEES ---*/
#employees .col{
width:25%;
}
#employees tbody tr:hover{
font-weight:bold;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
}
/*--- MATRIX ---*/
#employees .col{
width:20%;
}
#matrix tbody td:hover{
font-weight:bold;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
width:220px;
float:left;
margin-bottom:18px;
}
#nav li a{
color:#fff;
font-size:1.6em;
font-weight:bold;
padding:10px;
display:block;
text-decoration:none;
background:#34ad4a;
text-shadow:1px 1px 1px #1c5e28;
background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
#nav li:first-of-type a{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#nav li:last-of-type a{
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#nav li a:hover{
background:#0079ac;
text-shadow:1px 1px 1px #0d4f6b;
background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/*------------------------------------*\
POLAROID
\*------------------------------------*/
.polaroid{
clear:both;
padding:10px 10px 50px 10px;
background:#fff;
border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers, but in non-supporting browsers the border acts as the edge of the image */
margin-bottom:18px;
-moz-box-shadow:1px 2px 5px #666666;
-webkit-box-shadow:1px 2px 5px #666666;
}
.small-polaroid{
clear:none;
padding:10px 10px 25px 10px;
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
.small-polaroid:hover{
z-index:100;
position:relative; /* Make the z-index work in Safari */
-moz-transform:rotate(4deg) scale(1.2);
-webkit-transform:rotate(4deg) scale(1.2);
}
/*------------------------------------*\
MISC
\*------------------------------------*/
hr { display:none; }
.hr { height:1px; border-top:1px solid #ccc; margin-bottom:18px; }
.clear { clear:both; }
/*------------------------------------*\
IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
#wrapper { width:90%; }
pre { overflow:hidden; }
pre .comment { white-space:normal; }
}
</style>
</head>
<body id="home">
<div id="wrapper">
<h1>CSS Wizardry—CSS3 Examples & Progressive Enhancement</h1>
<p>All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold.<br />By <a href="http://csswizardry.com/" title="Web Standards Design and Development">Harry Roberts—CSS Wizardry</a>. <a href="http://twitter.com/?status=CSS3 and Progressive Enhancement by @csswizardry http://csswizardry.com/css3/" title="Tweet a link to this page">Please Tweet</a>.</p>
<h2 class="caption">Columns:</h2>
<p id="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p>
<pre><code>p#intro{
font-size:1.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
<strong>-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;</strong>
}</code></pre>
<script type="text/javascript"><!--
google_ad_client = "pub-0849827290095392";
/* 728x90, 創建於 09-3-19 */
google_ad_slot = "6829013231";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class="hr"><hr /></div>
<h2 class="caption">Transforms:</h2>
<h3 class="caption clear">Hover rows/cells list items…</h3>
<table id="employees">
<colgroup>
<col id="employee-name" class="col" />
<col id="employee-type" class="col" />
<col id="employee-edit" class="col" />
<col id="employee-remove" class="col" />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Edit</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ted Harris</td>
<td>Admin</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Jane Peters</td>
<td>Sales</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Sam Edwards</td>
<td>Web Developer</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Allen Jones</td>
<td>Web Developer</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
</tbody>
</table>
<table id="matrix">
<colgroup>
<col id="matrix-title" class="col" />
<col id="matrix-ted" class="col" />
<col id="matrix-jane" class="col" />
<col id="matrix-sam" class="col" />
<col id="matrix-allen" class="col" />
</colgroup>
<thead>
<tr>
<th></th>
<th>Ted</th>
<th>Jane</th>
<th>Sam</th>
<th>Allen</th>
</tr>
</thead>
<tbody>
<tr>
<th>Age</th>
<td>45</td>
<td>31</td>
<td>34</td>
<td>27</td>
</tr>
<tr>
<th>Salary</th>
<td>£21,000</td>
<td>£26,000</td>
<td>£32,000</td>
<td>£29,000</td>
</tr>
<tr>
<th>Service</th>
<td>2 years</td>
<td>3 years</td>
<td>6 years</td>
<td>4 years</td>
</tr>
</tbody>
</table>
<pre><code>table{
font-size:1.2em;
width:100%;
margin-bottom:20px;
}
th{
font-weight:bold;
}
td,th{
border:1px solid #ccc;
padding:5px;
}
thead tr{
border-bottom:2px solid #ccc;
}
<strong>tbody tr:nth-of-type(odd){
background:#ffc;
}</strong>
<span class="comment">/*--- EMPLOYEES ---*/</span>
#employees .col{
width:25%;
}
#employees tbody tr:hover{
font-weight:bold;
background:#ff8;
<strong>-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;</strong>
}
<span class="comment">/*--- MATRIX ---*/</span>
#employees .col{
width:20%;
}
#matrix tbody td:hover{
font-weight:bold;
background:#ff8;
<strong>-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;</strong>
}</code></pre>
<div class="hr"><hr /></div>
<ul id="nav">
<li class="home-link"><a href="#">Home</a></li>
<li class="about-link"><a href="#">About</a></li>
<li class="portfolio-link"><a href="#">Portfolio</a></li>
<li class="services-link"><a href="#">Services</a></li>
<li class="contact-link"><a href="#">Contact</a></li>
</ul>
<pre><code>#nav{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
width:220px;
float:left;
margin-bottom:18px;
}
#nav li a{
color:#fff;
font-size:1.6em;
font-weight:bold;
padding:10px;
display:block;
text-decoration:none;
background:#34ad4a;
<strong>text-shadow:1px 1px 1px #1c5e28;
background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
-webkit-transition: -webkit-transform 0.1s ease-in; <span class="comment">/* Tells webkit to make a transition of a transform */</span></strong>
}
<strong>#nav li:first-of-type a{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}</strong>
<strong>#nav li:last-of-type a{
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}</strong>
#nav li a:hover{
background:#0079ac;
<strong>text-shadow:1px 1px 1px #0d4f6b;
background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;</strong>
}</code></pre>
<div class="hr"><hr /></div>
<h2 class="caption">Box Shadow:</h2>
<p class="caption">Photos of me taken by <a href="http://suzannahaworth.com/" title="Photographer in Leeds">Suzanna Haworth</a>.</p>
<img src="http://farm3.static.flickr.com/2567/3942160958_60408f12d2.jpg" alt="An image of me riding trials" class="polaroid" />
<p class="caption clear">Hover these:</p>
<a href="http://suzannahaworth.com/galleries/trials/" title="View this photo on Suzanna Haworth’s website"><img src="http://farm3.static.flickr.com/2567/3942160958_60408f12d2_s.jpg" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href="http://suzannahaworth.com/galleries/trials/?img=02" title="View this photo on Suzanna Haworth’s website"><img src="http://farm3.static.flickr.com/2426/3942159002_a5b4ee4d7e_s.jpg" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href="http://suzannahaworth.com/galleries/trials/?img=03" title="View this photo on Suzanna Haworth’s website"><img src="http://farm4.static.flickr.com/3474/3942159634_7a2f9375e0_s.jpg" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href="http://suzannahaworth.com/galleries/trials/?img=04" title="View this photo on Suzanna Haworth’s website"><img src="http://farm3.static.flickr.com/2593/3942160246_55ff8ae548_s.jpg" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<pre><code>
.polaroid{
clear:both;
padding:10px 10px 50px 10px;
background:#fff;
border:1px solid #ececec; <span class="comment">/* This border merges with the colour of the shadow in supporting browsers
but in non-supporting browsers the border acts as the edge of the image */</span>
margin-bottom:18px;
<strong>-moz-box-shadow:1px 2px 5px #666666;
-webkit-box-shadow:1px 2px 5px #666666;</strong>
}
.small-polaroid{
clear:none;
padding:10px 10px 25px 10px;
<strong>-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-webkit-transition: -webkit-transform 0.1s ease-in; <span class="comment">/* Tells webkit to make a transition of a transform */</span></strong>
}
.small-polaroid:hover{
z-index:100;
position:relative; <span class="comment">/* Make the z-index work in Safari */</span>
<strong>-moz-transform:rotate(4deg) scale(1.2);
-webkit-transform:rotate(4deg) scale(1.2);</strong>
}
</code></pre>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1856861-4");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>