在上一講中,我們的解決方案使用到了jquery去建立一個span標籤。在這一講中我們將用一種更好的解決方式,使用:before 和 :after 偽類。 :before常常會用到,他可以用來增加額外的元素。
HTML
下面是一個以ul列表代表的圖片畫廊。
1 2 3 4 5 6 7 8 9 10 | < ul class = "gallery clip" >
< li >
< img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt = "image" >
</ li >
< li >
< img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt = "image" >
</ li >
< li >
< img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt = "image" >
</ li ></ ul >
|
登入後複製
CSS
下面是為.gallery設定的css,這裡需要注意的一點是,我們需要為.gallery下面的a標籤設定position: relative。
1 2 3 4 5 6 7 8 9 10 11 | .gallery {
margin: 0 0 25px;
text-align: center;
}.gallery li {
display: inline-block;
margin: 5px;
list-style: none;
}.gallery a {
position: relative;
display: inline-block;
}
|
登入後複製
:before元素
# 我們將會為 :before 元素指定一個30 x 60px大小的曲別針背景圖片。注意到我將css的content屬性設為空值。沒有空的content屬性,容器就不會顯示。
1 2 3 4 5 6 7 8 9 | .clip a:before {
position: absolute;
content: ' ';
top: -5px;
left: -4px;
width: 30px;
height: 60px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}
|
登入後複製
藝術邊框
利用這種技術,你可以再圖片上新增任意的遮罩效果。下面的例子,我把圖片背景換成了藝術邊框。
1 2 3 4 5 6 7 8 9 | .frame a:before {
position: absolute;
content: ' ';
top: -22px;
left: -23px;
width: 216px;
height: 166px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}
|
登入後複製
我們可以使用html5標籤,創造出更進階的畫廊。下面的例子,我們使用
包裝圖片,包含圖片標題。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < ul class = "gallery tape" >
< li >
< figure >
< img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt = "image" >
< figcaption >Image Caption</ figcaption >
</ figure >
</ li >
< li >
< figure >
< img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt = "image" >
< figcaption >Image Caption</ figcaption >
</ figure >
</ li >
< li >
< figure > < img src = "http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt = "image" >
< figcaption >Image Caption</ figcaption >
</ figure >
</ li ></ ul >
|
登入後複製
CSS
# css中我加入了兩個:before,一個針對
元素,另一個針對元素。遮罩圖片overlay.png被用在了figure:before上面,膠帶圖片用在了 a:before上面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tape li {
width: 170px;
padding: 5px;
margin: 15px 10px;
border: solid 1px #cac09f;
background: #fdf8e4;
text-align: center;
box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}.tape figure {
position: relative;
margin: 0;
}.tape a:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
}.tape figcaption {
font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
color: #787568;
}.tape a:before {
position: absolute;
z-index: 2;
content: ' ';
top: -12px;
left: 50%;
width: 115px;
height: 32px;
margin-left: -57px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
}
|
登入後複製
CSS3 Transform
在這個例子中,我使用了軟木紋飾背景,並使用transform屬性轉變圖片。
1 2 3 4 5 6 7 8 | .transform {
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
padding: 25px;
border-radius: 10px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}.transform li {
border: none;
}
|
登入後複製
Nth-of-Type
為了讓圖片旋轉的更隨機和自然,我使用nth-of-type去篩選圖片,為不同圖片設定不同的旋轉角度。
1 2 3 4 5 6 7 | .transform li:nth-of-type(4n+1) {
-webkit-transform: rotate(2deg);
}.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}.transform li:nth-of-type(4n+3) {
-webkit-transform: rotate(2deg);
}
|
登入後複製
好了,今天的教學到此為止。
以上是HTML5實踐-使用css裝飾圖片畫廊的程式碼分享(二)的詳細內容。更多資訊請關注PHP中文網其他相關文章!