2016年12月24日 星期六

,

[網頁設計]書單推薦


其實我很少在買書,因為之前買書也有踩到雷阿
網路上感覺寫得好好,實際買來看內容就.....
所以比較多的時候是google找範例練習練習。

but,以下推薦的書,都是我看過真心覺得幫助很大很實用的書。
推薦給大家囉!
Share:
Read More

2016年8月14日 星期日

2016年8月10日 星期三

2016年8月9日 星期二

[視覺設計] 質感背景與縫隙製作


以下範例在 psd/free_labels_fo_you_guys.psd 中
ps. 此範例擋亦有皮革書籤範例

背景製作
1.新增形狀、435365
2.轉換成智慧型濾鏡
3.「濾鏡」→「雜訊」→「增加雜訊」→「總量」1%

縫隙製作
1.新增形狀、000000
2.新增圖層樣式
3.「混合選項」→「填滿不透明」32%
4.內陰影

5.陰影
Share:
Read More

2016年8月8日 星期一

,

[網頁設計] 背景幻燈片jQuery套件


官網 http://vegas.jaysalvat.com/documentation/transitions/

1. 套件:Zepto.js、vegas.min.js
2. css:vegas.css
3. 初始化
$(function() {
     $('body').vegas({
            slides: [{
                src: "images/banner.jpg"
            }, {
                src: "images/banner2.jpg"
            }],
           animation: 'kenburns'
    });
});

以上範例都在menu_left /index3.html中
Share:
Read More
,

[網頁設計] 選單動畫jQuery套件


以下範例都在menu_left /index.html中

1.套件:iscroll.jsdrawer.min.js 
2.cssdrawer.css
3.HTML
<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>
4.初始化
$(document).ready(function() {
  $('.drawer').drawer();
});
Share:
Read More