CSS3 傾斜的網(wǎng)頁(yè)圖片庫(kù)實(shí)例教程

發(fā)布時(shí)間：2009-11-14 01:17:54 作者：佚名

我要評(píng)論

如何使用CSS3來定位一個(gè)傾斜的圖片.

利用純CSS可以做出千變?nèi)f化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現(xiàn)在就讓我們動(dòng)手做出一個(gè)關(guān)于涼爽為題的圖片庫(kù).

HTML+CSS打包下載http://wt.jb51.net/200911/yuanma/css_img_xie.rar

觀看演示

點(diǎn)擊查看我們要做的效果.請(qǐng)記住這個(gè)事例對(duì)于IE來說支持的不好,但firefox;safari瀏覽器升級(jí)到最高版本是可以看出效果的.

我們先用CSS的基本樣式來構(gòu)建圖片.然后再加入一些陰影和翻轉(zhuǎn)的屬性,最近使用z-index屬性來改變圖片的疊加順序.

在開始之前先下載這些清爽的圖片.

Iguassu Falls 006 by claudio_ar
Sweet Home Under White Clouds by galego
Sunset over the highway by claudio_ar
Skies and fields from Argentina’s pampa 7 by claudio_ar
Sunrise by claudio_ar
Södermanland Lake by claudio_ar

第一步:寫入以下代碼來構(gòu)建一個(gè)基本的框架,下載背影圖.

=======================
body {
background: #959796 url(images/wood-repeat.jpg);
}

#container {
width: 600px; margin: 40px auto;
}
=============================

第二步:用ul來定義一列圖片,然后再給每張圖片定義li,別忘了給每一張圖片添加它們的alt.

=======================
<ul class="gallery">
<li>< a href="#"><img src="images/1.jpg"

alt="Photograph of a waterfall" /></li>
<li>< a href="#"><img src="images/2.jpg"

alt="Photograph of clouds and sunlight" /></li>
<li>< a href="#"><img src="images/3.jpg"

alt="Photograph of a lake scene at dusk" /></li>
<li>< a href="#"><img src="images/4.jpg"

alt="Photograph of a tree and green grass" /></li>
<li>< a href="#"><img src="images/5.jpg"

alt="Photograph of a beach sunset" /></li>
<li>< a href="#"><img src="images/6.jpg"

alt="Photograph of a flower and lake" /></li>
</ul>
=============================

第三步:現(xiàn)在我們來給UL添加CSS屬性,首先我要得把列表默認(rèn)的小圓點(diǎn)清除掉,使用一個(gè)簡(jiǎn)單的屬性就可以清除: list-

style:none

=======================
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}

=============================

第四步:

現(xiàn)在要給圖片潤(rùn)潤(rùn)色.首先讓它們左浮動(dòng).再給它們?cè)黾右稽c(diǎn)填充.給圖片添加一個(gè)淺灰色的背景,最后再加一個(gè)象素的白色邊框讓圖片更加靚麗.

========================
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
position: relative;
}
======================
第五步:現(xiàn)在要進(jìn)入本教程的重點(diǎn)了.使用CSS3 </ul>
====================
第六步:現(xiàn)在要對(duì)每個(gè)類,加CSS.因此在上面我們給每張圖加個(gè)唯

一的類名.

============================

ul.gallery li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
}
============================