網頁制作Webjx文章簡介：如何使用CSS3來定位一個傾斜的圖片.
利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關於涼爽為題的圖片庫.
HTML+CSS打包下載http://www.webjx.com/files/soft/1_091113020947.rar
觀看演示
點擊查看我們要做的效果.請記住這個事例對於IE來說支持的不好,但firefox;safari浏覽器升級到最高版本是可以看出效果的.
我們先用CSS的基本樣式來構建圖片.然後再加入一些陰影和翻轉的屬性,最近使用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
第一步:寫入以下代碼來構建一個基本的框架,下載背影圖.
=======================
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>
=============================
第三步:現在我們來給UL添加CSS屬性,首先我要得把列表默認的小圓點清除掉,使用一個簡單的屬性就可以清除: list-
style:none
=======================
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}
=============================
第四步:
現在要給圖片潤潤色.首先讓它們左浮動.再給它們增加一點填充.給圖片添加一個淺灰色的背景,最後再加一個象素的白色邊框讓圖片更加靓麗.
========================
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);
}
============================
第七步:因為每張圖片在位置上的不同,我們可以為其設置個性的
風格.比如說:z-index 和 旋轉 的屬性.
第八步:現在圖片差不多在背景上排列出來了.
===============
ul.gallery li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
}
=================
第九步:添加 :hover 樣式,給z-index加個更高的位置,當鼠標移
入的時候可以跳到最上面.同時調整陰影,讓圖片感覺取消了屏幕
=================
原文:http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery
木木:譯的很幸苦,轉載請鏈接,謝謝.