以图明志

CSS

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

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

CSS

可以尝试用Google Font API来摆脱网页字体的单调

仅仅抛砖引玉
在网页设计里,字体的显示是个问题。最普遍用的是宋体,但是宋体在 Win 7 下的表现真的很难看。雅黑端庄一些,但是随着字体大小,感觉汉字的大小也会有区别。小站现在用的字体是是宋体 + Arial/Georgia,因为习惯了也没多在意,其实对于英文字体有其它更好的选择。

CSS

常见的浏览器Hack技巧总结

总结是为了更好地记忆
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅。浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

CSS

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

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

CSS

如何组织与管理CSS文件

方便管理、修改和多人合作
CSS的管理一直是个让人有点头疼的问题,没有绝对的对错,无非就是为了方便管理、修改和多人合作罢了;网上流行的CSS管理方式讲来讲去无非也就以下几种:对于单个页面那种非常简单的,其实也可以直接把所有的样式写在一个外部文件里就行,或者直接写在页面的头部里,没有必要去纠结繁琐的CSS文件管理。

CSS

最优的浮动清除方案之一推荐

W3标准不变,清除浮动不止
对于日新月异的WEB开发技术和浏览器更新频率来说,清除浮动已然是一个被人嚼碎了的话题。说是这些年过去了,有关float的地方,还依然少不了清除浮动的标签和css代码。W3C整天研究html5,就不能抽出点时间来把这种烦人的小细节修正一下吗?抱怨归抱怨,饭还得吃,钱还得挣,清除浮动就不能停止。

CSS

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

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

CSS

IE 6最小最大宽度与高度的写法

CSS表达式的使用
最小最大宽度,最小最大高度,这是CSS很常见的一个要求。在现代浏览器中,一个 min-height,min-width 就可以解决问题,但是在IE系列,比如IE6则比较繁琐一点。下面总结一些IE 6下的最小最大宽度与高度的一些写法。

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

IE6支持!important吗?

IE6对!important单个的类是支持的
设了!important的样式的属性优先于id选择器和class选择器。,比如id为"Main"的div在它的Class设背景色为红色,,id选择器下又设了背景色为蓝色,照css的"就近原则",它的背景色应该是红色了,因为id选择器的优先级高于class选择器,但是,一旦class里设了"!important",哈哈,id,一边去吧。

CSS

用IE滤镜实现的一些特效

透明度/阴影/渐变等
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作为,很多有经验的开发者都听知道IE的滤镜,看看下面的内容将告诉大家,IE是如何通过这些滤镜,实现CSS3效果的。
1 / 4 首页 < Prev 1 2 3 4 Next > 尾页 页码: