Facebook加入
LINE加入
2021/12/25
教學主題: 使用CSS3來定位一個傾斜的圖片
大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學
今天的這個教學主題是: 使用CSS3來定位一個傾斜的圖片
這教學的重點為這幾點 [ 傾斜,圖片,一個,定位,使用,li,src,alt,//li ]
希望你可以從這幾點中領悟到修圖的精華
本文重點
利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關於涼爽為題的圖片庫.
利用純CSS可以做出千變萬化的效果,特別是CSS3的引入更讓更多的效果可以做出來.現在就讓我們動手做出一個關於涼爽為題的圖片庫.
先看看效果：
點擊查看我們要做的效果.請記住這個事例對於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 { #container { |
第二步:用ul來定義一列圖片,然後再給每張圖片定義li,別忘了
給每一張圖片添加它們的alt.
|
第三步:現在我們來給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 box-shadow 這個屬性給圖片添加陰影.為了讓圖片的順序排列好,我們要給圖片加個類.還要加個"相對"屬性.
|
第六步:現在要對每個類,加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加個更高的位置,當鼠標移入的時候可以跳到最上面.同時調整陰影,讓圖片感覺取消了屏幕.
看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?
希望我們所介紹的 使用CSS3來定位一個傾斜的圖片 這教學會喜歡
文章標題: 骨子愛創意- 使用CSS3來定位一個傾斜的圖片–轉載請註明來源處
本教學分類為網頁設計教程中的 其他教程相關教學
文章相關關鍵字為: 傾斜,圖片,一個,定位,使用,li,src,alt,//li
本文永久連結 :使用CSS3來定位一個傾斜的圖片
本文轉載自 :VIA
熱門推薦
留言回覆
