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套件

          2 則留言

官網 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中
ps.官網 http://git.blivesta.com/drawer/

1.套件：iscroll.js、drawer.min.js 
2.css：drawer.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
,

[網頁設計] 圖片輪播jQuery套件

          沒有留言

以下範例都在321/index3.html中
1.套件：swiper.jquery.min.js
2. css：swiper.css
3.布局
<div class="swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
              <img src="images3/a-1.jpg">
         <div>
         <div class="swiper-slide">
              <img src="images3/a-2.jpg">
         </div>
         <div class="swiper-slide">
              <img src="images3/a-3.jpg">
         </div>
     </div>
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>
</div>

4.指定swiper 容器尺寸:
.swiper-container, .swiper-slide {
  width: 250px;
}

5.初始化文件
window.onload = function() {
        var mySwiper = new Swiper('.swiper-container', {
            //添加需要的选项:
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 0,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            loop: true,
        });
    }
Share:
Read More
, ,

[網頁設計] 驗證欄位jQuery套件

          沒有留言


1、套件：jquery.validate.js
2、套件：cmxforms.js
3、套件：cmxforms.css
4、$("#commentForm").validate({
     rules:{
     repassword:{equalTo: '#password'}
     },
     errorPlacement: function(error, element) {
       error.appendTo( element.parents(".control-group"))
     }
   });

註：原始為$("#commentForm").validate(); 即可，此為套用bootstrap之範例

以上範例都在login/register.php中
Share:
Read More
,

[網頁設計] 彈出視窗jQuery套件

          沒有留言


1.套件：sweetalert2
2.$(function() {
     $('p').bind('click', function(event) {
        swal({
               title: 'jQuery HTML example',
               html: $('<div>')
                    .addClass('some-class')
                    .text('jQuery is everywhere.')
            })
       );
  })

以上無範例
1.套件：jquery.poptrox.min.js
2.撰寫js
   $(function() {
        var foo = $('#gallery');
        foo.poptrox({
            usePopupCaption: false
        });
    });

3.HTML
<div class="col-xs-8 col-md-8 hover" id="gallery">
    <a href="https://youtu.be/nSJFveEL_38" data-poptrox="youtube,800x480">
        <span>點我看更多</span>
        <img src="images2/btn-08.jpg" class="img-responsive">
   </a>
 </div>

以上範例在321/index2.html中



Share:
Read More
, ,

[網頁設計] 記憶目前所在的頁面jQuery套件

          沒有留言



說明：Bootstrap 記憶目前所在的頁面 (Nav .active效果)

1.套件：The Scrollspy Plugin、Bootstrap
2.<body data-spy="scroll" data-target=".navbar" data-offset="50">
3.<a class="page-scroll" href="#section1">Services</a>
4.<div id="section1" class="container-fluid">

線上教學網址：

以上範例在comecloud中
Share:
Read More
,

[網頁設計] Bootatrap 相關網站整理

          沒有留言


Bootatrap 官網

Jasny Bootstrap

Bootstrap線上編輯器

Start Bootstrap 

Bootstrap-material-design

Bootswatch
(提供各種 Bootstrap 的主題配色)

Bootatrap教學

Bootatrap網格模板素材網
http://benstewart.net/2014/04/bootstrap3-responsive-grid-photoshop/
檔案在psd/bootstrap3-psds中

Bootatrap圖像素材
http://www.designshock.com/bootstrap-4-gui
檔案在psd/designshock-Bootstrap-GUI-v4-free-1032400180中

 Bootatrap UI素材
http://bootstrapuikit.com/

 四套免费的Bootstrap 3 UI Kits设计素材分享
http://www.25xt.com/webdevelop/6023.html

更改 Bootatrap  Nav顏色
https://work.smarchal.com/twbscolor/

精選15款！可商業用「Bootstrap自適應網頁」版型下載
https://www.minwt.com/webdesign-dev/html/13234.html

Bootatrap4主題
https://bootswatch.com/

Bootatrap3主題
https://bootswatch.com/3/
Share:
Read More
Copyright © 米煎的學習筆記 Mi-Jian's Note | Powered by Blogger
Design by ShapedTheme | Blogger Theme by NewBloggerThemes.com