整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
書使我快樂-哈哈
最近讀了張鑫旭的新書《CSS世界》收獲了不少奇技淫巧和對(duì)CSS的深度理解
也正值個(gè)人在公司內(nèi)部進(jìn)行部分章節(jié)的內(nèi)容分享，于是順帶著直接把我即將分享的內(nèi)容先給大家過過目了，就當(dāng)省去了大家買了書后，無暇顧及觀看的尷尬吧！
本書的最后三章分別是
下面我就直接進(jìn)入主題，開始對(duì)每一章節(jié)進(jìn)行一個(gè)非系統(tǒng)的分享了
元素的顯示與隱藏
使用CSS讓元素不可見的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見，但背后卻在多個(gè)維度上都有差別
下面是總結(jié)的一些比較好的隱藏實(shí)踐，大家一起來根據(jù)實(shí)際開發(fā)場景來選擇合適的使用
比較好的隱藏實(shí)踐
<script type="text/html"> <!-- 圖片是不會(huì)發(fā)送請(qǐng)求的 --> <img src="1.jpg" /> <!-- 如果想嵌套需要借助textarea了 --> <textarea style="display: none;"> <img src="2.png" /> </textarea> </script> 復(fù)制代碼
<div id="box">成都</div>
<script>
let oBox = document.getElementById('box');
console.log(oBox); // <div id="box">成都</div>
</script>
.hidden {
position: absolute;
visibility: hidden;
}
<div class="div hidden">一杯敬朝陽 一杯敬月光</div>
.vh {
visibility: hidden;
}
.out {
position: relative;
left: -999em;
}
.clip {
position: absolute;
clip: rect(0, 0, 0, 0);
}
<div class="clip">
<div class="out">青花瓷</div>
</div>
<div style="position: relative;top: -999em;">獅子座</div>
<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
<p style="text-indent: -999999px;">天下無雙</p>
根據(jù)實(shí)際的隱藏場景選擇合適的隱藏方法，這里就不再多說了，接著往下看吧
display與元素的顯隱
我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了
display可以說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡
none做到了無法點(diǎn)擊、無法使用屏幕閱讀器等輔助設(shè)備訪問，不占空間，其實(shí)不僅僅是這樣，更應(yīng)該知道的是
me: 我有酒，那么別說你沒有故事
我知道display:none你才不是一個(gè)沒有故事的女同學(xué)
display: none的元素的background-image圖片根據(jù)不同瀏覽器的情況加載情況不一
父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載
3.在IE瀏覽器下，無論怎么搞都會(huì)請(qǐng)求圖片資源，就是這么任性
因此，在實(shí)際開發(fā)的時(shí)候，例如頭圖輪播切換效果
那些默認(rèn)需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細(xì)小改動(dòng)就可以明顯提升頁面的加載體驗(yàn)，也是非常實(shí)用的小技巧
whatever
上面說的興致盎然，但實(shí)際中不可能全部都是背景圖去加載圖片資源的
還有另外一個(gè)好朋友，img元素，然并卵的是，上面說了一大堆加載不加載的情況，對(duì)img來說沒個(gè)鳥用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請(qǐng)求著資源
活久見
都說display:none做事最純粹，最干凈，不能被點(diǎn)擊，觸碰到，然而下面這種情況又是什么鬼？
出來解釋解釋，我們都是文明人是絕對(duì)不會(huì)動(dòng)武的！
<form action="/index.php"> <input type="submit" id="hi" style="display: none;"> <label for="hi">提交</label> </form>
隱藏的按鈕會(huì)觸發(fā)click,觸發(fā)表單提交，此現(xiàn)象出現(xiàn)在時(shí)髦的瀏覽器中(IE9+，現(xiàn)代標(biāo)準(zhǔn)瀏覽器中）
既然有這種例外情況那加了display:none的意義又是什么呢？
很多都是純天然的
HTML中有很多標(biāo)簽和屬性天然自帶display:none
<input type="hidden" name="id" value="1" /> // 專門用來放置類似token或id這些隱藏信息的 // 所以說，表單元素的顯隱并不影響數(shù)據(jù)的提交 // 其真正影響的是disabled屬性 復(fù)制代碼
<div hidden>看不見我</div>
// IE11及現(xiàn)代標(biāo)準(zhǔn)瀏覽器都支持，如果做兼容需要這樣寫下即可
[hidden] {
display: none;
}
復(fù)制代碼
既然說到了visibility了，那么就趕緊邀請(qǐng)visibility閃亮登場吧
visibility與元素的顯隱
visibility要為自己正名，不僅僅是保留空間這么簡單
看點(diǎn)多多：
<ul style="visibility: hidden;"> <li style="visibility: visible;">1</li> <li>2</li> <li>3</li> <li style="visibility: visible;">4</li> </ul> 復(fù)制代碼
2. 與css計(jì)數(shù)器visibility:hidden雖然讓元素不可見了，但是不影響其計(jì)數(shù)效果，不會(huì)重新計(jì)算結(jié)果
3. 與transition設(shè)置了visibility:hidden的元素，可以很好的展現(xiàn)transition過渡效果
這是因?yàn)閠ransition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性
visibility:hidden除了對(duì)transition友好外，對(duì)js來說也很友好
在實(shí)際開發(fā)中，需要對(duì)隱藏元素進(jìn)行尺寸和位置的獲取，來實(shí)現(xiàn)布局精確定位的交互
此時(shí)，就建議使用visibility:hidden
.hidden {
position: absolute;
visibility: hidden;
}
let ele = document.getElementById('demo');
console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
復(fù)制代碼
好了以上內(nèi)容要告一段落了，我們繼續(xù)開始新的征程吧，哈哈
用戶界面樣式
用戶界面樣式指的是CSS世界中用來幫助用戶進(jìn)行界面交互的一些CSS樣式，主要有outline和cursor等屬性
和border形似的outline屬性
outline表示元素的輪廓，語法也和border一樣，分為寬度、類型和顏色三個(gè)值
.outline {
height: 60px;
width: 60px;
outline: 2px dashed #0c9;
}
復(fù)制代碼
樣式表示上相同，但是設(shè)計(jì)的初衷卻是不太相同的，這一點(diǎn)天地日月可鑒
outline是一個(gè)和用戶體驗(yàn)密切相關(guān)的屬性，與focus狀態(tài)以及鍵盤訪問密切相關(guān)
對(duì)于按鈕或鏈接，通常的鍵盤操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設(shè)置了tabindex的普通元素，然后按Shift+Tab是反向訪問
重點(diǎn)來了！
默認(rèn)狀態(tài)下，對(duì)于處于focus狀態(tài)的元素，瀏覽器會(huì)通過發(fā)光or虛框的形式進(jìn)行區(qū)分和提示，這是友好的用戶體驗(yàn)，很有必要，不然用戶很難知道自己當(dāng)前聚焦在了哪個(gè)元素上面，會(huì)迷失自我
元素如果聚焦到了a鏈接上，按下回車鍵就會(huì)跳轉(zhuǎn)到相應(yīng)鏈接，以上的交互都是基于鍵盤訪問的，這就是為什么outline和鍵盤訪問如此親密了
不專業(yè)的行為
很多時(shí)候直接在reset樣式的時(shí)候，寫成如下形式是非常不可取的
* { outline: 0 none; }
或
a { outline: 0 none; }
復(fù)制代碼
這樣直接一竿子打死一群鴨子的做法是不對(duì)的，更多的時(shí)候是因?yàn)闉g覽器內(nèi)置的focus效果和設(shè)計(jì)風(fēng)格格格不入，才需要重置，而且要使用專門的類名
例如：
.input {
outline: 0;
}
// 但是，必須把focus狀態(tài)樣式加上
.input:focus {
border-color: Highlight
}
復(fù)制代碼
最后再強(qiáng)調(diào)一遍：萬萬不可在全局設(shè)置outline: 0 none;
這樣的操作會(huì)造成鍵盤訪問的時(shí)候用戶找不到當(dāng)前焦點(diǎn)，容易產(chǎn)生困擾的，為了大家好，收斂一下吧
下面來點(diǎn)干貨: 在實(shí)際開發(fā)中，有時(shí)候需要讓普通元素代替表單控件元素有outline效果
舉個(gè)栗子：submit按鈕來完成UI設(shè)計(jì)是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關(guān)聯(lián)
[type="submit"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #19b955;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dashed hotpink;
outline: 3px auto -webkit-focus-ring-color;
}
<div class="panel">
<input type="submit" id="box">
<label for="box" class="btn">提交</label>
</div>
復(fù)制代碼
真正的不占據(jù)空間的outline及其應(yīng)用
outline是一個(gè)真正意義上不占任何空間的屬性，Amazing
頭像剪裁的矩形鏤空效果
先來看個(gè)效果圖
上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨核心css是
.crop {
overflow: hidden;
}
.crop .crop-area {
width: 80px;
height: 80px;
outline: 256px solid #000;
outline: 256px solid rgba(0, 0, 0, .5);
background: url(about:blank);
background: linear-gradient(to top, transparent, transparent);
filter: alpha(opacity=50);
cursor: move;
}
:root .crop-area {
filter: none;
}
復(fù)制代碼
用一個(gè)大大的outline來實(shí)現(xiàn)周圍半透明的黑色遮罩，因?yàn)閛utline無論設(shè)置多么多么大，都不會(huì)占據(jù)空間影響布局，至于超出的部分，直接給父元素設(shè)置一個(gè)overflow:hidden就搞定了 注意：
自動(dòng)填滿屏幕剩余空間的應(yīng)用技巧
開發(fā)中很多時(shí)候，由于頁面內(nèi)容不夠多，導(dǎo)致底部footer會(huì)出現(xiàn)尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來完美實(shí)現(xiàn)一下
關(guān)鍵的css就是設(shè)置一個(gè)超大輪廓范圍的outline屬性，如給個(gè)9999px，保證無論屏幕多高，輪廓顏色都能覆蓋
值得注意的是，outline無法指定方位，它是直接向四周發(fā)散的，所以需要配合clip剪裁來進(jìn)行處理,以左邊和上邊為邊界進(jìn)行裁剪
.footer {
height: 50px;
}
.footer > p {
position: absolute;
left: 0;
right: 0;
text-align: center;
padding: 15px 0;
background-color: #00a1f5;
outline: 9999px solid #00a1f5;
color: #fff;
clip: rect(0, 9999px, 9999px, 0);
}
<div class="footer">
<p>沒錯(cuò)，我就是footer</p>
</div>
復(fù)制代碼
光標(biāo)屬性
光標(biāo)屬性cursor我們真的是最熟悉的陌生人啊
為什么這么說呢，因?yàn)樵诒姸嗟膶傩灾得媲埃覀兯坪踔挥玫搅藀ointer(手形)(最常用的，沒有之一)，move(移動(dòng))，default(系統(tǒng)默認(rèn))這幾樣
在cursor的世界里，遠(yuǎn)比我們想象的要豐富很多，下面按照功能特性來對(duì)其進(jìn)行分類吧
琳瑯滿目的cursor屬性值
友情不友情的小提示：☆（表示常用）
// 自定義光標(biāo)
.cur-none {
cursor: url(transparent.cur), auto;
}
:root .cur-none { // IE9+
cursor: none
}
復(fù)制代碼
body {
cursor: progress;
},
// 當(dāng)js加載完成后再將光標(biāo)cursor設(shè)為auto;
// 增加了用戶體驗(yàn)
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'auto';
});
復(fù)制代碼
p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
}
<p>弱水三千</p>
// 不過現(xiàn)在最新版的瀏覽器都自動(dòng)設(shè)置了cursor:default
復(fù)制代碼
以上內(nèi)容就介紹完了用戶界面樣式的全部內(nèi)容了，還有最后一章的冷知識(shí)，大家不要方，繼續(xù)看下去，了解一下，了解一下，了解一下
流向的改變
說出來你可能不信，direction可以改變水平流向，盡管知道或者使用過的人少之又少，但并不妨礙它的發(fā)光發(fā)熱
而且屬性簡單好記，值少，兼容極好ie6支持，可以來挖掘一下它的神奇功效
direction
僅僅兩個(gè)值：
當(dāng)然看到這里你可能會(huì)感覺，這些說起來都沒什么鳥用，因?yàn)榇笳惺遣惠p易放出的，而真正有用的地方在于改變網(wǎng)頁布局的時(shí)候
direction屬性默認(rèn)有一個(gè)特性
可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現(xiàn)順序
舉個(gè)栗子：顛倒順序
<div class="box" dir="rtl"> <p>我是第2名</p> <p>我是第一名</p> </div> <p dir="rtl"> <img src="../1.jpg" alt="貓"> <img src="../2.png" alt="狗"> </p> 復(fù)制代碼
再舉個(gè)栗子：比如制作彈窗組件的時(shí)候，確認(rèn)和取消按鈕有的時(shí)候會(huì)根據(jù)用戶的使用行為會(huì)顯示在不同的位置
下面來看看這種特性的表現(xiàn)在實(shí)際開發(fā)中的作用
windows用戶看到的樣子：
mac用戶看到的樣子：
好了，direction的話題就告一段落，接下來介紹最后一個(gè)知識(shí)了，堅(jiān)持住，快休息了writing-mode
改變CSS世界縱橫規(guī)則的writing-mode，如此強(qiáng)大的功能，居然沒有被大家發(fā)掘和廣發(fā)應(yīng)用起來，實(shí)屬遺憾了，話不多說，往下看
writing-mode作用及真正需要關(guān)注的屬性值
writing-mode可以改變排版，變成垂直流，如下圖所示
在使用語法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規(guī)范屬性CSS3語法：
writing-mode: horizontal-tb; 默認(rèn)值 文本流是水平方向的 writing-mode: vertical-rl; 文本是垂直方向的，閱讀順序從右向左(古詩的順序) writing-mode: vertical-lr; 文本垂直方向，閱讀順序從左到右(水平變成了垂直展示) 復(fù)制代碼
IE語法：
IE的writing-mode多達(dá)11個(gè)，真正有用的記住兩個(gè)就好了 -ms-writing-mode: lr-tb; 初始值 lr-tb對(duì)應(yīng)的是CSS3語法中的horizontal-tb -ms-writing-mode: tb-rl; tb-rl對(duì)應(yīng)的是CSS3語法中的vertical-rl -ms-writing-mode: tb-lr; tb-lr對(duì)應(yīng)的是CSS3語法中的vertical-lr 復(fù)制代碼
針對(duì)實(shí)戰(zhàn)版來整理一份writing-mode是這樣的
writing-mode: lr-tb | tb-rl | tb-lr (IE8+) writing-mode: horizontal-tb | vertical-rl | vertical-lr; 復(fù)制代碼
對(duì)于垂直排版來說，實(shí)際開發(fā)是很少會(huì)遇到的，不過還是要說說writing-mode帶來的改變
水平方向也能margin合并
我們都知道兩個(gè)相鄰的元素垂直的margin會(huì)合并，當(dāng)元素變?yōu)?strong>垂直流的時(shí)候，水平的margin也會(huì)合并
.vertical-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
<div class="div vertical-mode">
<div class="list" style="margin-left: 20px;">one</div>
<div class="list" style="margin-right: 50px;">two</div>
</div>
復(fù)制代碼
普通塊元素可以使用margin: auto實(shí)現(xiàn)垂直居中
img {
display: block;
margin: auto 0;
}
<div class="box vertical-mode">
<img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
<div class="demo">青花瓷</div>
<!-- <img src="../2.png" alt=""> -->
</div>
復(fù)制代碼
上面分別是圖片元素和普通塊元素實(shí)現(xiàn)的垂直居中代碼，眼見為實(shí)，看圖
text-align:center實(shí)現(xiàn)圖片垂直居中(同上實(shí)現(xiàn)的效果)
<div class="box vertical-mode" style="text-align: center;"> <img src="../2.png" alt=""> </div> 復(fù)制代碼
使用text-indent實(shí)現(xiàn)文字下沉效果
核心css
.btn:active {
text-indent: 2px;
}
<a href="javascript：;" class="btn vertical-mode">領(lǐng)</a>
復(fù)制代碼
這種文字下沉效果只能適合中文，因?yàn)樵诖怪绷髋虐娴臅r(shí)候中文是不會(huì)旋轉(zhuǎn)的
而且這種效果只適合一個(gè)字的情景
實(shí)現(xiàn)全兼容的icon fonts圖標(biāo)旋轉(zhuǎn)效果
老IE下讓小圖標(biāo)旋轉(zhuǎn)很麻煩，writing-mode把文檔變成垂直流的時(shí)候，英文、數(shù)字和字符號(hào)都天然的轉(zhuǎn)了90°
@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒問題
<span class="icon-play vertical-mode">剪頭朝下</span> 復(fù)制代碼
好了，這就是《CSS世界》里最后三章的全部內(nèi)容了，終于寫完了，哈哈，希望大家有收獲一些冷知識(shí)，另外看書還是要買正版的，地址我就不發(fā)了，大家還請(qǐng)支持張鑫旭老師的作品簡單說兩句
做個(gè)個(gè)人的小總結(jié)吧：
css有很多奇妙的地方，在某些特性當(dāng)初被設(shè)計(jì)出來的時(shí)候可能只是為了某些圖文排版而生
但是我們可以利用它們帶來的特性發(fā)揮自己的創(chuàng)造力，實(shí)現(xiàn)其他很多意想不到的效果，因此，上面所講述的所有知識(shí)點(diǎn)，盡管很多內(nèi)容都有點(diǎn)奇技淫巧以悅婦孺的過程
但這也給我們開發(fā)的過程中，提供了一些很出奇的妙招，值得我們好好學(xué)習(xí)領(lǐng)悟
感謝個(gè)位的觀看了，再見了，哈哈
隨最新的網(wǎng)頁設(shè)計(jì)趨勢，緊跟設(shè)計(jì)潮流是設(shè)計(jì)師們必做的功課之一。快速更迭的網(wǎng)頁設(shè)計(jì)趨勢和網(wǎng)頁開發(fā)技術(shù)對(duì)2019年的網(wǎng)頁設(shè)計(jì)趨勢來說必將產(chǎn)生直接的影響。
回顧2018年的網(wǎng)頁設(shè)計(jì)趨勢，不難看出許多設(shè)計(jì)趨勢都是周期性和持續(xù)性的，例如盛行不衰的極簡主義和響應(yīng)式設(shè)計(jì)。那么，2019年它們的流行度也將絲毫不減，并且隨著移動(dòng)端網(wǎng)絡(luò)的興盛，會(huì)更加注重移動(dòng)端網(wǎng)頁設(shè)計(jì)的界面美觀度和用戶體驗(yàn)。那么，具體2019年網(wǎng)頁設(shè)計(jì)趨勢有哪些呢？
前情提要：
1. 移動(dòng)優(yōu)先
2. 網(wǎng)頁打開速度
3. 個(gè)性化插畫設(shè)計(jì)
4. 動(dòng)態(tài)網(wǎng)頁背景（CSS3動(dòng)效、全屏視頻背景）
5. 極簡主義
6. 響應(yīng)式設(shè)計(jì)
7. 漸變?cè)O(shè)計(jì)
8. 排版設(shè)計(jì)
9. 設(shè)計(jì)工具
2019年網(wǎng)頁設(shè)計(jì)趨勢之一：移動(dòng)優(yōu)先
此前，谷歌推出了移動(dòng)優(yōu)先索引，Mobile-First Indexing，主要是優(yōu)先從移動(dòng)頁面獲取內(nèi)容和鏈接，以此建立索引。因此，2019年，更多網(wǎng)頁設(shè)計(jì)師會(huì)優(yōu)先考慮網(wǎng)頁的移動(dòng)版本設(shè)計(jì)。而SEO并不是僅僅是其中一個(gè)推動(dòng)網(wǎng)頁移動(dòng)優(yōu)先設(shè)計(jì)的因素。據(jù)統(tǒng)計(jì)，目前全球50%的網(wǎng)站流量都來自于移動(dòng)端。隨著移動(dòng)端用戶群體的增加，良好的視覺效果和搜索體驗(yàn)也是2019年移動(dòng)優(yōu)先設(shè)計(jì)中需要考慮的因素。
圖片來源：Kizen Homeby David Kovalev
2019年網(wǎng)頁設(shè)計(jì)趨勢之二：網(wǎng)頁打開速度
短短三秒鐘就能決定用戶的去與留。Akamaii和Gomez.com的研究表明，50%的用戶希望當(dāng)他們?cè)邳c(diǎn)擊某個(gè)網(wǎng)站時(shí)，加載時(shí)間不超過三秒鐘，甚至更短。而加載時(shí)間過長，則會(huì)導(dǎo)致他們放棄這個(gè)網(wǎng)站。同樣，由于2018年7月谷歌宣布的速度更新（ Speed Update）算法，設(shè)計(jì)師們?cè)谖磥淼脑O(shè)計(jì)中需要縮短網(wǎng)頁加載時(shí)間。
圖片來源：ASAPby Hurca?
2019年網(wǎng)頁設(shè)計(jì)趨勢之三：個(gè)性化插畫設(shè)計(jì)
2017年下半年，Slack，Dropbox等公司開始使用個(gè)性化的插畫圖案來傳達(dá)品牌特色，使插畫設(shè)計(jì)逐漸開始流行。自然，2018年是插畫設(shè)計(jì)非常流行的一年。但到2019年， 插畫設(shè)計(jì)預(yù)計(jì)將會(huì)達(dá)到一個(gè)新的高度。
作為一種重要的現(xiàn)代網(wǎng)頁設(shè)計(jì)的視覺傳達(dá)形式，個(gè)性化的插畫內(nèi)容往往比抽象的文字更有趣，更具有視覺沖擊力，更能彰顯品牌特色，傳遞給用戶更深刻的品牌概念。獨(dú)特的設(shè)計(jì)風(fēng)格和大膽的色調(diào)，對(duì)于用戶而言也更能加深品牌印象。根據(jù)數(shù)據(jù)統(tǒng)計(jì)，插畫對(duì)用戶的視覺效果比普通攝影照片好7倍以上。除了網(wǎng)站首頁，新用戶引導(dǎo)、等待界面、進(jìn)度頁面等情景中也可以運(yùn)用插畫增加趣味性。
圖片來源：CrowdRise –Signupby EddieLobanovskiy
圖片來源：Rainbow Ridge / Music festivalby Mike | Creative Mints
2019年網(wǎng)頁設(shè)計(jì)趨勢之四：動(dòng)態(tài)網(wǎng)頁背景
1. CSS3動(dòng)效
動(dòng)效這兩年崛起非常之迅猛，幾乎是網(wǎng)頁設(shè)計(jì)領(lǐng)域最強(qiáng)大的設(shè)計(jì)趨勢之一。無論是在設(shè)計(jì)師群體還是在用戶當(dāng)中，它的受歡迎程度都非常之高。CSS3技術(shù)的運(yùn)用使得傳統(tǒng)的網(wǎng)頁設(shè)計(jì)變得更加生動(dòng)和易用。而由于動(dòng)效在UI領(lǐng)域中算作新成員，所以CSS3動(dòng)效設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用還有更多的發(fā)展空間。那么，在2019年，CSS3動(dòng)效在網(wǎng)頁設(shè)計(jì)中將會(huì)得到更多的運(yùn)用和發(fā)展。
相關(guān)閱讀：8個(gè)最佳動(dòng)效網(wǎng)頁設(shè)計(jì)，告別枯燥體驗(yàn)！
圖片來源：Submit buttonby ClaudioScotto
2. 動(dòng)態(tài)全屏視頻背景
運(yùn)動(dòng)的物體往往能更加吸引人的注意。那么想要吸引客戶注意的好方法之一就是創(chuàng)建一個(gè)帶有視頻背景的網(wǎng)站。相比文字或圖片，短小精致的視頻更能夠吸引用戶注意，為用戶提供更方便且豐富的信息，快速了解網(wǎng)頁或產(chǎn)品的特點(diǎn)。
對(duì)于SEO而言，視頻有助于增加用戶在網(wǎng)頁的停留時(shí)間，利于搜索引擎優(yōu)化和提升轉(zhuǎn)換率。這一點(diǎn)，可以從Facebook對(duì)于視頻帖子的優(yōu)先度可以得到驗(yàn)證。并且，在多元化信息時(shí)代，視頻背景等動(dòng)態(tài)元素在現(xiàn)代網(wǎng)頁設(shè)計(jì)中的應(yīng)用趨勢會(huì)逐漸增加。
圖片來源：Mockplus iDoc, 更快更簡單的產(chǎn)品設(shè)計(jì)協(xié)同軟件
2019年網(wǎng)頁設(shè)計(jì)趨勢之五：極簡主義，簡約不簡單
作為最經(jīng)典和永恒的網(wǎng)頁設(shè)計(jì)趨勢之一，極簡主義往往是“簡約”設(shè)計(jì)的首選。“少即是多”。這就是極簡主義的精髓。而將這個(gè)概念應(yīng)用到網(wǎng)頁設(shè)計(jì)上，那么就是使用較少的界面設(shè)計(jì)元素實(shí)現(xiàn)影響巨大的簡約設(shè)計(jì)。簡約，而不簡單。
快速、動(dòng)態(tài)的生活節(jié)奏使得現(xiàn)代人已經(jīng)沒有足夠的時(shí)間去關(guān)注更多冗余的信息。那么體現(xiàn)在網(wǎng)頁設(shè)計(jì)上就是，越少的網(wǎng)頁元素，用戶思考的時(shí)間越少。無論是通過留白設(shè)計(jì)、對(duì)比度、還是清晰的排版設(shè)計(jì)，如果設(shè)計(jì)得當(dāng)，一個(gè)簡約的網(wǎng)頁設(shè)計(jì)既可以使網(wǎng)頁易于瀏覽，為用戶提供準(zhǔn)確的信息，也可以提供良好的用戶體驗(yàn)。配合CTA，也更容易獲得較高的網(wǎng)頁轉(zhuǎn)化。
相關(guān)閱讀：極簡網(wǎng)頁設(shè)計(jì)技巧，打造簡約之美
圖片來源：Hosting & Domains - Web Designby Angel Villanueva
圖片來源:Minimalistic Product Pageby Vita Spenser
2019年網(wǎng)頁設(shè)計(jì)趨勢之六：響應(yīng)式設(shè)計(jì)
近幾年響應(yīng)式設(shè)計(jì)的流行使設(shè)計(jì)師們意識(shí)到這個(gè)響應(yīng)式設(shè)計(jì)對(duì)于現(xiàn)代網(wǎng)頁設(shè)計(jì)的重要性。各種移動(dòng)設(shè)備、平板電腦、電視、可穿戴設(shè)備或者臺(tái)式機(jī)等閱讀設(shè)備（通稱）的快速發(fā)展也更加肯定了響應(yīng)式設(shè)計(jì)應(yīng)該并且必須成為主流網(wǎng)頁設(shè)計(jì)趨勢之一。
自從2010年谷歌實(shí)現(xiàn)移動(dòng)端響應(yīng)式網(wǎng)站開始，移動(dòng)端已經(jīng)成為響應(yīng)式網(wǎng)頁設(shè)計(jì)的首選。而現(xiàn)在移動(dòng)用戶數(shù)量已遠(yuǎn)遠(yuǎn)超過桌面端用戶，谷歌也宣布改變算法，以便優(yōu)先考慮移動(dòng)優(yōu)先索引。目的在于鼓勵(lì)企業(yè)更新響應(yīng)式網(wǎng)頁設(shè)計(jì)，增強(qiáng)移動(dòng)用戶的在線體驗(yàn)。
相關(guān)閱讀：12個(gè)最佳的響應(yīng)式網(wǎng)頁設(shè)計(jì)教程，輕松帶你入門！
圖片來源：Furniture Store Responsive Design Flowby Shakuro
圖片來源：Responsive Resize Kitby UI8
2019年網(wǎng)頁設(shè)計(jì)趨勢之七：鮮艷華麗的漸變?cè)O(shè)計(jì)
在過去的幾年里，越來越多的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)采用了色彩漸變的方法，今年的流體漸變更是風(fēng)靡全球。即使你只選擇了一種顏色，也可以在色彩漸變和不同圖片的幫助下，營造出豐富的層次結(jié)構(gòu)感，繪制出一幅令人賞心悅目的畫面。鮮艷大膽的漸變色與插畫的結(jié)合，將是2019年的主流色彩搭配之一。
相關(guān)閱讀：2018年為什么漸變色重回主流設(shè)計(jì)趨勢？
圖片來源：Apple
圖片來源：Saving Animals Illustrationby Zahidul
2019年網(wǎng)頁設(shè)計(jì)趨勢之八：創(chuàng)意大膽的排版設(shè)計(jì)
網(wǎng)頁排版布局與界面上展示的內(nèi)容同樣重要。有數(shù)據(jù)顯示，網(wǎng)頁中超過95%的信息都是以文字形式呈現(xiàn)。就對(duì)用戶產(chǎn)生的影響力而言，排版僅次于網(wǎng)頁配色和圖像。具冒險(xiǎn)精神的大膽排版能使觀眾印象深刻，精心挑選的字體也可以傳遞所需的情緒，并建構(gòu)強(qiáng)大的視覺層次結(jié)構(gòu)。越來越多的大牌開始采用自己的專屬字體以提高品牌的辨識(shí)度及獨(dú)特性。
相關(guān)閱讀：文字如何實(shí)現(xiàn)完美UI？文本排版設(shè)計(jì)告訴你！
圖片來源：Rei.com - Landing Pageby Eddie Lobanovskiy
圖片來源：Melt Candle Co.by NathanRiley
小結(jié)：
網(wǎng)頁設(shè)計(jì)趨勢是全球設(shè)計(jì)師們共同關(guān)心的話題。隨著以上9大網(wǎng)頁設(shè)計(jì)趨勢在2019年更加現(xiàn)代的網(wǎng)頁設(shè)計(jì)中的運(yùn)用，設(shè)計(jì)師們將發(fā)揮各自所長展現(xiàn)更加大膽和獨(dú)特的設(shè)計(jì)，讓人過目不忘。創(chuàng)意網(wǎng)頁設(shè)計(jì)并非不能預(yù)測，都是有跡可循的。緊密關(guān)注新的網(wǎng)頁設(shè)計(jì)趨勢，助你打造完美網(wǎng)站。
信很多自學(xué)的小伙伴都想學(xué)習(xí)web前端，可以關(guān)注小編后私信【學(xué)習(xí)】可以免費(fèi)領(lǐng)取學(xué)習(xí)地址/案例教程/2018最新的一套學(xué)習(xí)教程，讓學(xué)習(xí)有方向。
1、三角形列表項(xiàng)目符號(hào)
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
2、外部CSS3 盒陰影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
3、內(nèi)部CSS3 盒陰影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
4、CSS3 斑馬線
tbody tr:nth-child(odd) {
background-color: #ccc;
}
5、強(qiáng)制出現(xiàn)垂直滾動(dòng)條
html { height: 101% }
6、內(nèi)容垂直居中
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
7、CSS3：全屏背景
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
8、錨鏈接偽類
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
9、為logo隱藏H1
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}
10、自定義文本選擇
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
11、跨瀏覽器的透明
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12、新版清除浮動(dòng)（2011）
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
13、典型的CSS清除浮動(dòng)
.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%; }
14、制造模糊文本
想要讓文本模糊？可以使用color透明和text-shadow實(shí)現(xiàn)
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
15、CSS：表格列寬自適用
對(duì)于表格，當(dāng)談到調(diào)整列寬時(shí)，是比較痛苦的。然后，這里有一個(gè)可以使用的技巧：給td元素添加white-space: nowrap;能讓文本正確的換行
td {
white-space: nowrap;
}
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
