您好,登錄后才能下訂單哦!
今天小編給大家分享一下CSS3頁面排版美化的技巧有哪些的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
1. 黑白圖像
這段代碼會讓你的彩色照片顯示為黑白照片,是不是很酷呢?
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
2.頁面頂部陰影
下面這個簡單的 css3 代碼片段可以給網(wǎng)頁加上漂亮的頂部陰影效果:
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; }
3.所有一切都垂直居中,要將所有元素垂直居中,太簡單了:
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
注意:在IE11中要小心flexbox。
4.文本漸變
文本漸變效果很流行,使用 CSS3 能夠很簡單就實(shí)現(xiàn):
h2[data-text] { position: relative; } h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0))); }
5.禁用鼠標(biāo)事件
CSS3 新增的 pointer-events 讓你能夠禁用元素的鼠標(biāo)事件,例如,一個連接如果設(shè)置了下面的樣式就無法點(diǎn)擊了。
.disabled { pointer-events: none; }
6.模糊文本
簡單但很漂亮的文本模糊效果,簡單又好看!
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
以上就是“CSS3頁面排版美化的技巧有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。