• UI/UX設計
    Read more

    設計趨勢：創新懸停效應，你看過了嗎？

    動效是如今UI設計中的重要組成部分，也是目前最熱門的設計趨勢之一。在之前的《在現代網頁設計中，動效有哪些常見的用法》這篇文章中，我們探討了動效對於交互和用戶的重要意義，動效在不同的環節發揮的作用越越來越大。而今天我們要聊的是光標懸停特效，這也是近年動效設計的熱點之一。 Continue reading

    Published by:
  • UI/UX設計
    Read more

    現在網頁設計中圖片有哪些常見的使用技巧？

    圖片在網頁中所扮演的角色越來越重要。作為最常見也是最早使用的網頁多媒體，圖片對於網頁設計師而言至關重要。如何用好圖片已經成為了一項成熟、完善而又講究的技巧，而在高清屏幕無處不在的今天，稍有瑕疵的圖片都在高密度的像素下無所遁形，而不合理的圖片設計也不會逃過訪客的雙眼。 Continue reading

    Published by:
  • UI/UX設計
    Read more

    Flexible boxes更加優雅的Web佈局

    在前端中實現居中是一件很頭疼的事情，尤其是實現垂直居中，之前看到一篇實現置中的七種方法，其中提到一種最簡單的方法就是使用transform ，需要5行代碼可以實現完全置中。

    Flexible boxes可以解決什麼問題

    完全居中

    在前端中實現居中是一件很頭疼的事情，尤其是實現垂直居中，之前看到一篇實現置中的七種方法，其中提到一種最簡單的方法就是使用transform ，需要5行代碼可以實現完全置中。

    下面看一下Flexible boxes實現置中:

    .flex-container{
  display:flex;
  justify-content: center;
  align-items: center;
}

    Flexible boxes只要3行代碼就可以實現置中。

     

    等高的卡片式布局

    在沒有用Flexible boxes之前很多卡片設計的網站都有這樣一個問題，由於卡片裡面的內容多少不同，而產生的不等高問題。

    Flexible boxes簡單的實現等高列：

    .flex-container{
  display:flex;
  align-items: stretch;
}

     

    Flexible boxes實現的原理邏輯

    display

    • dislpay:flex使父容器表現為塊盒子
    • display:inline-flex使容器表現為行盒子

    flex

      flex是 flex-grow , flex-shrink , flex-basis 的縮寫形式。默認值是0 1 auto。

    flex-basis

    flex-basis:flex-basis  可以理解為我們給子元素設置的寬度。默認值是auto,寬度設置為auto時，盒子的寬度取決你們元素的寬度。

    2

    flex-grow和flex-shrink

    grow和shrink是一對雙胞胎，grow表示伸張因子，shrink表示是收縮因子。

    grow在flex容器下的子元素的寬度和比容器和小的時候起作用。 grow定義了子元素的寬度增長因子，容器中除去子元素之和剩下的寬度會按照各個子元素的grow值進行平分加大各個子元素上。

     

    公式：

    計算容器還剩空間

    available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)

    計算增長單位

    grow_unit(增長單位)=available_space/flex_grow_total(子元素增長因子之和)

    得到子元素的宽度

    flex-item-width(子元素计算得到的宽度)=flex-basis+grow-unit*flex-grow

     

    3

    上面例子的計算

    container-size=480px; flex-item-total=100*3=300px;flex-grow-total=3+2+1=6
    available_space=480–300=180px;
    grow_unit=180/6=30px;

    子元素1的寬度為：

    flex_item_width1=100+3*30=190px;

    子元素2的寬度為：

    flex_item_width1=100+2*30=160px;

    子元素3的寬度為：

    flex_item_width1=100+30=130px;

     

    [codepen_embed height=”400″ theme_id=”0″ slug_hash=”ZLYJYQ” default_tab=”css,result” user=”frankbite”]See the Pen ZLYJYQ by frankbite (@frankbite) on CodePen.[/codepen_embed]

    shrink則是在寬度和比容器寬度大時候，才有用。按照shrink的值減去相應大小得到子元素的值。

     

    align-content

    對單行和單列不起作用，多行時才有效，需設置flex-direction:row;flex-wrap:wrap; 或者flex-flow:row-wrap,對flex container中的行進行佈局排版。

    • flex-start:行填充到容器的開始。
    • flex-bottom:行填充到容器的結束。
    • center:行居中分佈
    • space-between:行平均分佈，第一行在容器開始，最後一行在容器結束。
    • space-around:行平均分佈，但行與行之間有空隙。

    實例效果

    [codepen_embed height=”400″ theme_id=”dark” slug_hash=”QdbXgm” default_tab=”css,result” user=”frankdo”]See the Pen <a href=’http://codepen.io/frankdo/pen/QdbXgm/’>QdbXgm</a> by frank (<a href=’http://codepen.io/frankdo’>@frankdo</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

     

    align-items

    用於當前行中的子元素進行對齊佈局。

    flex-start: 子元素的上邊緣對齊到行的上邊緣。
    flex-end: 子元素的上邊緣對齊到行的下邊緣。
    center: 以中軸線居中。
    baseline: 子元素的基線對齊。
    stretch:子元素拉伸至充滿容器。

    實例效果

    [codepen_embed height=”400″ theme_id=”dark” slug_hash=”MJwMvP” default_tab=”html,result” user=”frankdo”]See the Pen <a href=’http://codepen.io/frankdo/pen/MJwMvP/’>MJwMvP</a> by frank (<a href=’http://codepen.io/frankdo’>@frankdo</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

     

    justify-content

    水平方向上佈局排版

    flex-start:子元素靠容器的左邊線對齊
    flex-end:子元素靠容器的右邊線對齊
    center: 子元素居中
    space-between: 子元素被平均分佈,第一子元素在容器最左邊，最後一個子元素在最右邊。
    space-around: 子元素平均分佈，但子元素與子元素之間有空隙。

    實例效果

    [codepen_embed height=”400″ theme_id=”dark” slug_hash=”KapjXe” default_tab=”css,result” user=”frankdo”]See the Pen <a href=’http://codepen.io/frankdo/pen/KapjXe/’>KapjXe</a> by frank (<a href=’http://codepen.io/frankdo’>@frankdo</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

     

    order

    用來改變子元素之間的排列循序，默認值是0，值越小，越往前排。

    123

    Flexible boxes解決的一些問題。

    優雅的實現響應式佈局。

    [codepen_embed height=”400″ theme_id=”dark” slug_hash=”WRvqdz” default_tab=”css,result” user=”frankdo”]See the Pen <a href=’http://codepen.io/frankdo/pen/WRvqdz/’>WRvqdz</a> by frank (<a href=’http://codepen.io/frankdo’>@frankdo</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

     

     

    frankbite-關注UI設計/前端/網頁，如果您喜歡我們的文章，歡迎 Follow 我們的 Facebook 專頁，我們將為您提供最新、最實用的資訊！

    %e6%9c%aa%e5%91%bd%e5%90%8d-1_03

    原文地址：w3cplus

    Published by:
  • UI/UX設計
    Read more

    網頁配色設計應用：綠色稚嫩

    綠色是一種存在感極強的色彩，很多人都覺得綠色很難與其他色彩搭配，相對來說，它的配色顯得比較單一。我們曾經探討過橙色，由於橙色介於紅色和黃色之間，因此看上去有種曖昧感。而綠色雖然介於藍色與黃色之間，卻與橙色完全不同，綠色的存在感極強，和藍色黃色相近卻擁有完全不同的視覺感受。 Continue reading

    Published by: