CSS3實例教程:傾斜的網頁圖片庫

2024-07-11 09:03:31

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：如何使用CSS3來定位一個傾斜的圖片.

利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關于涼爽為題的圖片庫.

HTML+CSS打包下載

CSS3實例教程:傾斜的網頁圖片庫

觀看演示

點擊查看我們要做的效果.請記住這個事例對于IE來說支持的不好,但firefox;safari瀏覽器升級到最高版本是可以看出效果的.

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

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

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

CSS3實例教程:傾斜的網頁圖片庫

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

CSS3實例教程:傾斜的網頁圖片庫

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

style:none

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

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

第四步:

現在要給圖片潤潤色.首先讓它們左浮動.再給它們增加一點填充.給圖片添加一個淺灰色的背景,最后再加一個象素的白色邊框讓圖片更加靚麗.

CSS3實例教程:傾斜的網頁圖片庫

========================
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;
}
======================
第五步:現在要進入本教程的重點了.使用CSS3 </ul>
====================
第六步:現在要對每個類,加CSS.因此在上面我們給每張圖加個唯

一的類名.

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

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);
}
============================

CSS3實例教程:傾斜的網頁圖片庫