网站导航
南昌网络公司左边栏图标 公司新闻
南昌网络公司左边栏图标 行业动态
南昌网络公司左边栏图标 建站须知
南昌网络公司左边栏图标 百恒说说
南昌网络公司左边栏图标 网站知识
南昌网络公司左边栏图标 APP开发
南昌网络公司左边栏图标 网页设计
南昌网络公司左边栏图标 网站推广
南昌网络公司左边栏图标 域名注册
南昌网络公司左边栏图标 虚拟主机
南昌网络公司左边栏图标 网页案例
南昌网络公司左边栏图标 网页设计知识
南昌网络公司左边栏图标 关于我们
南昌网络公司左边栏图标 联系我们
南昌网站建设左侧面图标
您当前的位置:首页 > 网站知识
 

CSS3实用页面排版美化小技巧

作者:admin   更新时间:2016/9/23 16:57:00   阅读:458

1. 黑白图像
这段代码会让你的彩色照片显示为黑白照片,是不是很酷呢?
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

2.页面顶部阴影
下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:
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 能够很简单就实现:
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.禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。
.disabled {
pointer-events: none;
}

6.模糊文本
简单但很漂亮的文本模糊效果,简单又好看!
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

百恒网络创建于2006年10月,主要从事南昌网站建设、网络营销推广、南昌APP开发、三维全景制作等服务,有十年的建站经验,只做有效果的网站,欢迎广大新老客户来电咨询!

[返回首页]  [关闭窗口]
  • 上一篇:如何提高南昌网站建设的用户体验度
  • 下一篇:简要分析html5对于移动网站建设的重要意义
  • **************************************************************************************************************
    本文对我有帮助,我要分享到:
    分享到:
    南昌网站公司内容页图标 您可能感兴趣的文章
    为用户提供高质量的网络产品和优质的服务是我们始终追求的目标,谢谢您的支持,很高兴为您服务!南昌网络公司-百恒网络。