以图明志

CSS

使用CSS3线性渐变实现图片闪光划过效果

线性渐变linear-gradient
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

CSS

活泼的CSS 3动态气泡按钮制作

完全CSS 3实现
这一次,我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮。通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名。没有必要JavaScript。四色主题和三个大小也可通过分配额外的类名。

CSS

收藏一个很有爱的CSS背景设计

闲逛收获
有一次在网上闲逛,看到一个很有爱的CSS,地址:F::Archieve。这里扒下来,保存一下~效果可以看本页的演示,在右下角。图片如下,觉得好可以右键卷走。

CSS

CSS让图片垂直居中的几种技巧

三种方法介绍
在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。

CSS

用CSS3可以很简单地实现文字渐变效果

background-clip , text-fill-color
首先要说明,你的浏览器支持CSS3的话,才能看到正确的演示效果。如果你现在用的浏览器是Chrome、Safari等,就是你的浏览器支持background-clip + text-fill-color等CSS3属性,那么你可以看到下面文字渐变的漂亮效果。文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。

CSS

CSS样式权重的级联cascade的概念

权重高低问题取决于CSS选择符优先级的的计算结果
我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以后只能在firefox中正常显示。因为那个css涉及的滤镜太多,而且还奥css中"级联(cascade)"这种强大功能的支持。

CSS

你是否彻底了解margin属性?

边界,元素周围生成额外的空白区
写css,你少不了与margin打交道。你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?

CSS

做一个所见即所得的CSS效果

将style设置成contenteditable会有好事情出现
style 也是标签(在非ie内核的浏览器中支持),我们将style设置成 contenteditable的时候,那么那的内容就可以编辑了。仔细的体验下,如果我们将背景修改成红色的。那么只要书写完,立马呈现。哇靠,这很方便我们以后写那种动态的编辑器效果呢,等有时间的话,我再试试。

CSS

一些比较高效的CSS写法建议

避免一些低效的key selectors去匹配大量的元素
当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素。 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和顺序规则, 在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始, 也称之为key selector,直到找到匹配为止。

CSS

用CSS模拟魔兽世界技能冷却的效果

巧用div的边框厚度实现这种效果
显然这种效果不复杂,一张背景图片,加上前面带有透明度的多边形图层,在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形?在IE下可以用VML,其他浏览器可以用Canvas等等。虽然行的通,但都不是最简单的。仔细分析下,该效果本质就是若干个三角形拼接而成。而三角形,如果你熟悉CSS2的话,一定在哪个地方见过。。。

CSS

CSS实现放大镜/狙击镜效果

放大镜或是狙击镜那样的效果
图片放大,这是一个比较容易的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

CSS

用CSS3做一个网页水平翻转效果

CSS3中transform属性的用法
愚人节,你想你的网站也愚弄一下访客吗?下面我给大家推荐个效果,就是整个页面左右颠倒了。css3 很强大,简单的几行代码就可以帮我们实现这个效果。目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webkit-transform,-moz-transform,-o-transform;

CSS

CSS网页宽度怎么定比较合适

确定宽度是一件苦恼的事
设计网页的时候,确定宽度是一件很苦恼的事。以nowamagic.net为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。

CSS

CSS3不遥远,几个特性你要知道

你应该了解的几个CSS3特性
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的。CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

CSS

CSS一个解决浮动问题的hack

Clear:both其实是有瑕疵的
原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。但这种办法就是最好了的吗?我这么说,当然答案就不是了。可以采用通过Hack实现。

CSS

页面元素的CSS渲染优先级

了解CSS的优先级机制是很重要的
选择器都有一个权值,权值越大越优先;当权值相等时,后出现的样式表设置要优于先出现的样式表设置;创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;继承的CSS 样式不如后来指定的CSS 样式;在同一组属性设置中标有“!important”规则的优先级最大。
1 / 3 首页 < Prev 1 2 3 Next > 尾页 页码: