“CSS相关”目录存档

CSS实现跨浏览器的box-shadow盒阴影效果(2)

2010年07月27日,星期二

我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现。

本文提供各个效果截图,提供丰富飞实例以及代码展示,希望能对您的学习有所帮助。

阅读全文…

PIE使IE支持CSS3圆角盒阴影与渐变渲染

2010年07月23日,星期五

本文将详尽的展示让IE浏览器(IE6/IE7/IE8)支持常见CSS3属性的又一个方法。主要包括CSS3 border-radius圆角,box-shadow盒阴影,以及背景色渐变等。使用简单,资源开销也相对较小。

本文提供丰富的效果截图,代码展示。提供源文件打包下载,同时制作了大量的demo,以及实例演示。并对可能存在的一些问题进行的介绍与分析,希望可以对您的学习有所帮助。

阅读全文…

我是如何对网站CSS进行架构的

2010年07月13日,星期二

本文将展示我是如何对网站的CSS进行架构的,表达能力有限,尽量展示自己的想法,观点。本文可谓将之前一些列的CSS内容作了个简短的总结,从css rest,CSS 库,到自适应布局,到代码的分离与合并等。提供必要的图片,代码展示,以及一些源文件下载。

说实话,全然套用我展示的这套架构会由于不熟悉或是掌控不够而产生问题,但是,里面一些概念,一些思想应该能有一定的启示作用的。

另外,我只是个初出茅庐的小生,我知道,很多真正功力深厚的前端开发人员有着更好的更广泛适应的前端架构,如果您有幸来到这里,欢迎分享您的一些见解与认识。还有,文中若有您觉得不合理的观点,也非常欢迎指正。我们需要在不断的交流中提高的。

阅读全文…

CSS的样式合并与模块化

2010年07月8日,星期四

CSS样式合并于分离之合并 张鑫旭-鑫空间-鑫生活
本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段。

正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离式不切实际的,是会带来痛苦的。

本文的“合并”和“分离”属于对立又相辅相成的,理解的“合并”与“分离”的精髓之后,您会发现写CSS代码就是一门艺术。同样的,本文也是为我后面的“我的CSS架构”一文做铺垫的,写这些都是为了同一个目的:写出最精简高效的CSS代码……

阅读全文…

CSS样式分离之再分离

2010年07月8日,星期四

CSS样式合并于分离之分离 张鑫旭-鑫空间-鑫生活
我从以前讲布局思想,讲无CSS rest,到现在的CSS样式分离之再分离,以及后面的CSS架构,都是一个体系里面的。我清楚的指导,这些东西,其实很多优秀的前端人员也是知道一二,或是比我理解更深刻的。但是,对于大多数同行而言,可能认为我“又在挑刺”,其实不然。

我把我自己的理解讲出来,是希望让您知道,现在绝大多数的CSS写法,架构都是有很多不足的,缺少创新。我就这么跟您说吧,您所做的任何项目,其实根本只要一个CSS文件就足够,您要是真的通透了CSS的“分离”、“架构”,即使这个网站项目有100个页面(风格统一),您也可以只使用一个CSS页面,并且可以控制CSS文件(未压缩)在40K以下。

我是自信可以这么实现的。我最近做的项目50多个页面,未压缩(含大量注释,竖排)的CSS文件,就30K左右,服务器端压缩后仅11K左右,同时网站整站自适应,从内容到各个按钮,导航,全部宽度自适应,兼容性良好….

阅读全文…

CSS3 text-fill-color简介及应用展示

2010年06月26日,星期六

本文内容并不多,主要就是简单介绍下CSS3的text-fill-color属性,并举例展示其应用。展示,如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图,代码展示,以及视频动画消失。希望能对您的学习有所帮助。

阅读全文…

使用CSS实现Photoshop选区效果及应用

2010年06月24日,星期四

使用CSS实现Photoshop选区效果及应用 张鑫旭-鑫空间-鑫生活

本文主要内容是展示于讲解一种不错UI效果的实现,这个UI效果就是photoshop的选区效果。提供截图展示,提供原理动画演示,相信您会很快了解这类效果的实现方法的。另外,文章的后半部分列举了此效果的一些应用,希望能对开通您的思维提供帮助,利用这种UI效果实现更多精湛的web设计。

阅读全文…

CSS渐变图片背景下高度亦自适应按钮

2010年06月21日,星期一


本文将介绍一种效果精湛,兼容性强,扩展性强,易上手易理解的按钮实现方案,此按钮与以往介绍的按钮一样,也是高宽自适应,可与图片混排,受控于text-align属性。但是这里的代码更加精简易懂,更符合主流与开发者的习惯。
本文提供必要的截图,提供Demo页面,以及代码展示,并对代码做了一定的讲解,希望能对您的学习有所帮助。

阅读全文…

页面可用性之浏览器默认字体与CSS中文字体

2010年06月19日,星期六

本文主要阐述我们绝大多数开发人员可能会忽略的不知道的一个用户体验与页面可用性的一个问题,截图丰富,没有Demo,下面为文章内容摘要,相信会对您的进步提供一点帮助的。

我们可能仅仅是忽略而已,仅仅是不知道而已!对于中文网站,我们的用户绝大多数是中文用户,在页面上设置中文字体属性(宋体/simsun)会降低页面的可用性和潜在的用户体验。如今的web,好的产品往往是可以满足用户的个性需求和自主能动性。页面上中文字体的设置会扼杀浏览器的默认中文字体,无法让用户以自己喜欢的中文字体显示。所以,我个人的倾向是,不要再CSS中,至少在body/html这类标签上设置中文字体。

我本想把本文的题目定为“不要再CSS中定义中文字体”,这样的题目更有噱头,但是……(我要转折)。因为我突然想到,有些网站就是不让你使用您自己定义的字体,比如网站可能会使用“微软雅黑”与“宋体”来区分中文与标题,如果网站中文字体可以提过浏览器自定义,例如“微软雅黑”,则标题与正文字体一致,反而增加了阅读浏览负担,降低了用户体验。

所以,到底哪种做法更好,要看实际的情况,合适的往往是最好的。但是,您需要知道:在CSS中设置中文字体会让中文用户无法通过修改浏览器默认字体来按照自己的需要浏览网页。至于具体您会怎么做,那就看您自己了……

阅读全文…

CSS vertical-align的深入理解(二)之text-top篇

2010年06月12日,星期六

vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性,vertical- align:text-top;和vertical-align:text-bottom属性,这两个属性的解释IE浏览器(IE6-8)和现代浏览器是不一样的两个派别。到底哪种表现是正确的,这是不能随便做定论的。无论实现的机制如何,若能实现类似的效果表现,其实都可以说是正确的。在一般的使用条件下,例如小图标+文字,vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的,这很难让我们去思考与理解这些差异在什么地方。但是,如果我们将测试的元素进行简化与放大,那么差异显而易见,也更利于我们思考其中的原因所在……
本文是我对CSS vertical-align属性深入思考后的一些心得体会,提供丰富飞截图,动画演示,以及必要的demo。希望讲的足够通俗易懂,能对您的学习有所帮助!

阅读全文…