Design VS. F2E

1.陰影的使用

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

2.文字斷行

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

3.文字模糊

先把文字設定透明，之後用 text-shadow 淡淡的陰影

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

4.簡單的 loading 動畫

5.清浮動

舊版的方式

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

新的用法

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

6.隱藏文字

方法一：以前比較多人使用，但是如果 RWD 多少會出現錯誤

text-indent: -99999px;

方法二：這是比較常多人使用

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

方法三：但是用這方式印刷印不出來

content:url(http://flora.inow.tw/img/f2e-logo-bl.jpg);

方法四：隱藏的方式

span{display:none;}

方法五：bootstrap 使用的方法

font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;

7.底圖的用法

原尺寸

-webkit-background-size:auto;        /*for Google Chrome、Safari*/
   -moz-background-size:auto;        /*for Firefox*/
     -o-background-size:auto;        /*for Opera*/
        background-size:auto;        /*for IE*/

滿版圖片不變形

-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

指定寬高

-webkit-background-size:200px 150px;
   -moz-background-size:200px 150px;
     -o-background-size:200px 150px;
        background-size:200px 150px;

指定寬高百分比

-webkit-background-size:50% 100%;
   -moz-background-size:50% 100%;
     -o-background-size:50% 100%;
        background-size:50% 100%;