20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看。
1. 黑白图像
这段代码会让你的彩色照片显示为黑白照片,是不是很酷?
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
2. 使用 :not() 在菜单上应用/取消应用边框
先给每一个菜单项添加边框
/* add border */
.nav li {
border-right: 1px solid #666;
}
……然后再除去最后一个元素……
// remove border / .nav li:last-child {
border-right: none;
}
……可以直接使用 :not() 伪类来应用元素:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
这样代码就干净,易读,易于理解了。
当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):
..nav li:first-child ~ li { border-left: 1px solid #666;
}
3. 页面顶部阴影
下面这个简单的 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;
}
4. 给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:
body {
line-height: 1;
}
这样文本元素就可以很容易地从 body 继承。
5. 所有一切都垂直居中
要将所有元素垂直居中,太简单了:
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。
6. 逗号分隔的列表
让html列表项看上去像一个真正的,用逗号分隔的列表:
ul > li:not(:last-child)::after {
content: ",";
}
对最后一个列表项使用 :not() 伪类。
7. 使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
li {
display: none;
} /* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
8. 对图标使用 SVG
我们没有理由不对图标使用SVG:
.logo {
background: url("logo.svg");
}
SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
9. 优化显示文本
有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。
10. 对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有CSS的滑块:
.slider ul {
max-height: 0;
overlow: hidden;
} .slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
11. 继承 box-sizing
让 box-sizing 继承 html:
html {
box-sizing: border-box;
} *, *:before, *:after {
box-sizing: inherit;
}
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
12. 表格单元格等宽
表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:
.calendar {
table-layout: fixed;
}
13. 用 Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:
.list {
display: flex;
justify-content: space-between;
} .list .person {
flex-basis: 23%;
}
现在,列表分隔符就会在均匀间隔的位置出现。
14. 使用属性选择器用于空链接
当a元素没有文本值,但 href 属性有链接的时候显示链接:
a[href^="http"]:empty::before {
content: attr(href);
}
相当方便。
15. 检测鼠标双击
HTML:
<div class="test3">
<span><input type="text" value=" " readonly="true" />
<a href="http://renpingjun.com">Double click me</a></span>
</div>
CSS:
.test3 span {
position: relative;
}
.test3 span a {
position: relative;
z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
z-index: 4;
}
.test3 span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%; /* Hacky */
height: 301%; /* Hacky */
z-index: 3;
}
.test3 span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
16. CSS 写出三角形
利用border来写三角形代码,并且兼容IE6.
/* create an arrow that points up */
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
} /* create an arrow that points down */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
} /* create an arrow that points left */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
} /* create an arrow that points right */
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
17. CSS3 calc() 的使用
calc() 用法类似于函数,能够给元素设置动态的值:
/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
} /* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
18. 文本渐变
文本渐变效果很流行,使用 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)));}
19. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。
.disabled { pointer-events: none; }
20. 模糊文本
简单但很漂亮的文本模糊效果,简单又好看!
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
阅读更多文章:
http://caibaojian.com/calc.html
http://caibaojian.com/pointer-events.html
20个很有用的CSS技巧的更多相关文章
- Css学习总结(1)——20个很有用的CSS技巧
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...
- Web开发中20个很有用的CSS库
来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...
- Web 开发中 20 个很有用的 CSS 库
转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...
- 应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)
20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...
- 20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件
转自:http://www.oschina.net/translate/20-useful-jquery-google-maps-plugins Google 地图在寻找我们想要了解的商店或者其它有趣 ...
- 20个很有用的PHP类库
介绍20个非常有用的PHP类库,相信一定可以为你的WEB开发提供更好和更为快速的方法. 图表库 下面的类库可以让你很简的创建复杂的图表和图片.当然,它们需要GD库的支持. pChart – 一个可以创 ...
随机推荐
- win8 iis7/iis8 安装、卸载、设置方法
原文:win8 iis7/iis8 安装.卸载.设置方法 一.安装 自从升级到Win8之后,之前使用已经趋于熟悉的iis7.0被取而代之的是iis8.0,那么安装和获取方法也就产生的略微的变化,为了避 ...
- 设计模式 - 迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释
迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 參考迭代器模式(ite ...
- 终于会用c#中的delegate(委托)和event(事件)了
一.开篇忏悔 对自己最拿手的编程语言C#,我想对你说声对不起,因为我到现在为止才明白c#中的delegate和event是怎么用的,惭愧那.好了,那今天就趁月黑风高的夜晚简单来谈谈delegate和e ...
- [POJ 3311]Hie with the Pie——谈论TSP难题DP解决方法
主题连接: id=3311">http://poj.org/problem?id=3311 题目大意:有n+1个点,给出点0~n的每两个点之间的距离,求这个图上TSP问题的最小解 ...
- 使用DPM(Deformable Part Model,voc-release3.1)算法INRIA通过训练你的身体检测模型数据集
我的环境 DPM源代码版本号:voc-release3.1 VOC开发包版本号:VOC2007_devkit_08-Jun Matlab版本号:MatlabR2012b c++编译器:VS2010 系 ...
- linux c ping 实现
用c语言实现的linux中的ping命令 #include <stdio.h> #include <signal.h> #include <arpa/inet.h> ...
- Ubuntu 14.04 关机键无效解决方法
这几天開始研究ubuntu 14.04软件,安装Cairo-Dock后发现右上角的关机.重新启动.注销菜单点击都没了反应仅仅能通过命令实现,后来经过研究,发现仅仅要设置了 Cairo-Doc ...
- 三星GT-S7572换屏幕教程
家里人手机被摔坏了,尽管不是什么值钱的手机.可是自从上了大学之后,就一直认为赚钱真的非常不easy,不到逼不得已,就不要乱花钱.于是,就从淘宝上买了外屏.以下是我在淘宝上的链接:点击打开链接.好不ea ...
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- 天体程序猿叹息——变化hosts对
没有解释更新一SDK像贼,我真诚地希望在天上Android.ios我们已经禁止了.要玩不能玩才最寂寞 安装成功不寂寞hosts文件: 74.125.237.1 dl-ssl.google.com173 ...