<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      湛江企業網站設計:如何用CSS 3編碼獨特的“阿凡達”照片樣式

      日期:2020-03-27 閱讀:262   作者:湛江網站設計開發公司

      社交網絡的普及使許多網站變得更加以用戶為中心。這意味著您可以通過Twitter、Facebook、Tumblr、Pinterest和其他工具找到大量新的配置文件功能,并直接連接OAuth應用程序。通常,配置文件照片是每個配置文件網頁設計的一個共同方面。照片或頭像可以由用戶上傳,有時還可以直接從他們的其他賬戶在線下載。

      湛江企業網站設計在本教程中,我想用CSS 3演示5種特定的用戶化身樣式。您可以在您自己的網站或創業想法中使用這些功能中的任何一個。在新的CSS特性得到更廣泛的支持的情況下,設計趨勢一直在推進。這意味著前端開發人員可以開始真正突破我們如何在網頁中設置媒體樣式的界限。配置文件頁面的用戶體驗肯定是一個很好的起點。

      How To Code Unique Avatar Photo Styles with CSS3

      現場演示 – 下載源代碼

      創建網頁


      在構建本教程時,我特別關注使用盡可能少的HTML。只有五種化身樣式中的一種將使用外部容器元素,這是一個光滑的反射效果。所有的技術都可以直接從CSS樣式表中復制,不會有太大的麻煩。但讓我們先看看我的一個樣本index.html檔案。

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <!doctype html>
      <html lang="en-US">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Custom CSS3 Avatars - Demo #1</title>
        <meta name="author" content="Jake Rocheleau">
        <link rel="shortcut icon" href="https://www.vandelaydesign.com/favicon.ico">
        <link rel="icon" href="https://www.vandelaydesign.com/favicon.ico">
        <link rel="stylesheet" type="text/css" media="all" href="styles.css">
        <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Cantora+One">
      <!--[if lt IE 9]>
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      </head>

      在文檔標題中,我只引用兩個主要文件,以及一個特定于IE的JS腳本。我的基本styles.css將創建頁面效果和布局結構。再加上一個習俗GoogleWeb字體是為了使設計更有新意。HTML5shiv文檔僅適用于早期版本的InternetExplorer,該版本不正確地在頁面上呈現HTML 5元素。這并不是讓所有東西都正常工作的要求,但使用條件注釋包含快速修復JS文件并不有害。

      現在,我在頁面中還有一堆多余的HTML,它只與布局結構有關。我想把重點放在頭像容器上,因為這些是頁面上唯一不同的元素。每個內容區域由帶有化身和用戶信息的左側側欄組成。這是對齊的內容div與導航選項卡和“用戶提要”塊區域。

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <div id="leftcol">
        <div class="avatar-container">
          <!-- Avatar Source: http://vimeofaces.tumblr.com/post/932459489 -->
          <img src="images/avatar.jpg" alt="Default avatar" title="User Avatar" width="250" height="250" class="ava1">
        </div>
        <h2 class="username">Johnny Appleseed</h2>
        <h3 class="location">Boston, MA</h3>
        <div class="divider"> </div>
        <p class="desc">Frontend web developer and startup enthusiast. I would say that I like Apple products but nobody really cares anyways.</p>
      </div><!-- @end #leftcol -->
       
      <div id="rightcol">
        <nav class="profiletabs">
          <ul class="clearfix">
            <li><a href="index.html" class="sel">Demo #1</a></li>
            <li><a href="index1.html">Demo #2</a></li>
            <li><a href="index2.html">Demo #3</a></li>
            <li><a href="index3.html">Demo #4</a></li>
            <li><a href="index4.html">Demo #5</a></li>
          </ul>
        </nav>

      左撇子您將發現與div一起的大量文本塊。.avatar-容器。如果您將任何HTML復制到自己的頁面中,只需包含avatar容器div和內部img元素。

      “阿凡達”照片的造型


      我用過同樣愚蠢的化身對于每個配置文件頁設計。因為樣式是用邊框照片本身可能在使用內部邊距/填充的各種樣式中顯得較小。但這也將保持圖像標簽固定在250×250像素,無論我們需要包括多少額外的空間。

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      .avatar-container {
        display: block;
        margin-bottom: 7px;
      }
       
      /** avatar #1 **/
      .ava1 {
        border: 1px solid #cbcbcb;
        padding: 7px;
        background: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
        -moz-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
        -o-box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
        box-shadow: -2px 2px 6px -1px rgba(0,0,0,0.3);
      }

      我使用的第一個示例是圍繞一個較老的DiggV 3風格的化身構建的。圖像背景設置為白色,因此無論在網站背景中使用什么顏色,圖像都將脫穎而出。圖像容器上的框影屬性的小顯示也將在頁面上突出顯示。其他的每一種風格都是非常相似的,但在他們自己的方式上是不同的。

      ?
      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
      /** avatar #2 **/
      .ava2 {
        display: block;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        width: 250px;
        height: 250px;
        background: #fff;
        -webkit-box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
        -moz-box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
        box-shadow: -1px 3px 3px rgba(0,0,0,0.3);
      }
       
      /** avatar #3 **/
      .ava3 {
        border-radius: 14px;
        -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.4);
        box-shadow: 0 2px 1px rgba(0,0,0,0.4);
      }
       
      /** avatar #4 **/
      .ava4 {
      display: block;
      padding: 7px;
      background: #eaf0f3;
      border: 2px dashed #bbb;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      }

      avatars#02-04的設計仍然使用常見的CSS 3屬性。第二個例子是使用100%邊界半徑的圓圈化身。這將在所有瀏覽器中顯示相同的內容,您可以利用供應商前綴來獲得更大的支持。舊版本的IE也有解決辦法,您可以使用本機CSS屬性獲得圓角效果。

      例03和#04也使用圓角,但程度要小得多。第三是類似于一個完整的正方形頭像與一個直接下降陰影的圖像。類似地,我的第四個例子使用了一個更暗的背景,邊緣周圍有虛線邊框。它看上去更像一個剪掉的圖像,并且很快就與其他頁面元素分開了?,F在,我最后的化身風格有點復雜,但顯示了一個特殊的顯示。

      CSS 3的思考

      我想給你學分丹·伊登用于在jsFiddle示例頁面上共享以下許多代碼片段。我們可以使用一個名為-webkit-框-反射為化身圖像生成蘋果風格的iTunes反射。對于CSS 3規范來說,這仍然是非常新的,而且在任何版本的InternetExplorer中似乎都不支持。Firefox確實具有類似的屬性-Moz-元素,但這也需要另一個容器元素來存儲反射圖像。

      ?
      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
      /** avatar #5 **/
      /** default styles courtesy of Dan Eden http://jsfiddle.net/FwF32/19/ */
      .a5container {
          border-radius: 4px;
          display: inline-block;
          position: relative;
          -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 70%, rgba(0,0,0,0.3) 90%);
      }
      .a5container .ava5 {
         display: block;
          box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
          border-radius: 4px;
      }
       
      .a5container:after {
        content: '';
        z-index: 999;
        display: block;
        position: absolute;
        background: -webkit-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
        background:    -moz-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
        background:     -ms-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
        background:      -o-linear-gradient(rgba(255,255,255,0.4),transparent 70%);
        background:         linear-gradient(rgba(255,255,255,0.4),transparent 70%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1px rgba(0,0,0,0.2);
        border-radius: 4px;
        top: 1px;
        left: 1px;
        bottom: 1px;
        right: 1px;
      }

      你應該注意到這并不是唯一的獨特效果添加到這個化身風格。丹的小提琴例子還演示了我們如何使用背景梯度在較小的不透明度,以模擬光澤的塑料光澤效果。這可以使用內置框陰影和CSS梯度作為IMG背景和減少不透明度的組合來實現。請查看我的現場演示示例,以了解這一效果。


      网赚团队