• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 使用CSS3來定位一個傾斜的圖片—- 其他教程




    教學主題: 使用CSS3來定位一個傾斜的圖片

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 使用CSS3來定位一個傾斜的圖片

    這教學的重點為這幾點 [ 傾斜,圖片,一個,定位,使用,li,src,alt,//li ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

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

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

    先看看效果:

    使用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

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

    使用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"  <li>< a href="#"><img src="images/2.jpg"  <li>< a href="#"><img src="images/3.jpg"  <li>< a href="#"><img src="images/4.jpg"  <li>< a href="#"><img src="images/5.jpg"  <li>< a href="#"><img src="images/6.jpg" </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 box-shadow 這個屬性給圖片添加陰影.為了讓圖片的順序排列好,我們要給圖片加個類.還要加個"相對"屬性.

    <ul class="gallery">
     <li>< ahref="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg"  <li>< ahref="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="images/3.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="images/4.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"><img src="images/5.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="images/6.jpg" </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來定位一個傾斜的圖片

    第七步:因為每張圖片在位置上的不同,我們可以為其設置個性的風格.比如說:z-index 和 旋轉 的屬性.

    第八步:現在圖片差不多在背景上排列出來了.

    ul.gallery li a:hover {
     z-index: 10;
     -moz-box-shadow: 3px 5px 15px #333;
    }

    第九步:添加 :hover 樣式,給z-index加個更高的位置,當鼠標移入的時候可以跳到最上面.同時調整陰影,讓圖片感覺取消了屏幕.

    使用CSS3來定位一個傾斜的圖片

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 使用CSS3來定位一個傾斜的圖片 這教學會喜歡

    文章標題: 骨子愛創意- 使用CSS3來定位一個傾斜的圖片–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 傾斜,圖片,一個,定位,使用,li,src,alt,//li

    本文永久連結 :使用CSS3來定位一個傾斜的圖片

    本文轉載自 :VIA