最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS常用的几个简单效果
时间:2014-12-20 编辑:简简单单 来源:一聚教程网
最近翻阅网上资料,查到了一些自己从未用过的CSS,于是记录下来,在有些时候兴许能用得上。
1、CSS中简单的运算
我们通常用css指定的是静态的结果,而动态结果,如高度,位置等等则需要js来动态进行计算赋值,而其实css自己也能够进行简单的运算,主要是用到了calc这个函数。
.div{ width: calc(100% - 50px); }
2、使用CSS实现文字模糊效果
在PS中我们可以使用滤镜让面前的文字看起来很模糊,这和透明度还不一样,在css中我们也可以实现。
p{ color: transparent; text-shadow: #111 0 0 5px; }
3、使用CSS创建高宽比固定的元素
在前端开发中,尤其是在写响应式布局网页的时候,我们总想要里面的元素保持同样的高宽比,这样可以避免元素变形,而要达到这种目的,我们可以通过给父级元素底部的内边距和子元素绝对定位来实现。
这里面的文字会随着这个div的变化而折行
大家可以去试试,找出更多的CSS效果。
CSS3滤镜让图标变灰
首先上html代码:
.icon{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.icon:hover{
filter: none;
-webkit-filter: grayscale(0%);
}
这样我们就只需要上传一张彩色的图片就能实现鼠标移入变彩色,移出变灰的效果。
text-overflow:ellipsis实现省略号效果
使用这个css样式很简单,只需要三句代码,举例,我们给我们的h3标签添加这个属性:
h3{text-overflow:ellipsis; //省略号形式
white-space:nowrap; //所有字符一行显示
overflow:hidden; //溢出隐藏
}
需要注意的是,这三句代码缺一不可,不然达不到想要的效果。注意:使用这个属性的元素要给固定宽度,不然怎么会溢出呢。
-
上一个: 前端DIV+CSS命名规范大全
-
下一个: 用CSS3实现图片倒影教程
相关文章
- CSS line-height 简单教程 11-22
- 关于IE6、IE7和FF最简单的CSS hack技巧 08-22
- CSS简单笔记 04-29
- 新手来简单学习CSS的display属性 01-26
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31