文章关键字 ‘gradient’

解决文字和text-decoration:underline下划线重叠问题

2016年11月23日,星期三

CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

有,方法还不少……

阅读全文…

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

2016年10月25日,星期二

CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。

怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。

我们一般采用一些CSS hack技巧,例如使用:root伪类,从功能上满足了我们的开发需求,但提高了我们的CSS权重,很容易增加我们CSS代码的复杂度,那有没有更好的实现呢?

阅读全文…

小tips: CSS3 webkit下彩条文字效果实现

2015年03月15日,星期日

此效果用的是以前介绍过的两个技术实现,第一个就是CSS3实现纹理图案背景,第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。

阅读全文…

深入理解CSS3 gradient斜向线性渐变

2013年09月6日,星期五

CSS3斜向渐变,看上去好像挺简单。实际上,其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:CSS3下条纹&方格斜纹背景的实现

2011年04月23日,星期六

不好意思,与上篇类似,也是CSS3下的一些技术或者说是效果实现的展示。本文的内容是使用CSS代码创建各种条纹效果。一如既往,有demo,有必要的截图,有源代码展示,同时本文还要相对比较详细的讲解。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

几种纯CSS(CSS3)下的纸张效果实现展示

2011年02月16日,星期三


本文主要展示如果使用纯CSS实现纸张效果,这里的CSS其实主要指CSS3. 展示的纸张效果也不是一种,就文中具体内容来看,有三个,一个是中规中矩的,二是渐变有曲线投影效果的,还有一个就是有分隔线圆弧卷边效果的。每个效果都配有截图展示,有对应的demo页面,还有必要源代码展示,同时,穿针引线地介绍了写最新的CSS3的发展与浏览器支持情况。总之,希望能对您的学习有所帮助。

阅读全文…

拾人牙慧 – CSS3实现Opera浏览器的logo

2010年08月7日,星期六

CSS3实现Opera浏览器的logo

本文纯粹的展示如何使用CSS3实现高逼真的Opera浏览器的logo效果,当然,如果您关注CSS3,也一定可以从中学到不少CSS3方面的知识的。延续我一贯的文章风格,丰富的截图,丰富飞代码展示,外带源文件打包下载。总之,希望能对您的学习有所帮助。

阅读全文…

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

2010年07月23日,星期五

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

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

阅读全文…

RGBA颜色与兼容性的半透明背景色

2010年05月29日,星期六

本文最最重要的内容其实不是讲rgba,而是介绍如何在IE下也能实现半透明的背景效果。RGBA实现半透明背景很简单,直接一个半透明参数就可以了,但是IE浏览器下,就目前而言,需要使用滤镜,这个滤镜不是半透明滤镜,而是渐变滤镜,IE渐变滤镜支持半透明渐变背景色。

本文就将展示如何实现兼容性飞半透明背景效果,并列举一些实际应用。本文虽然截图不是很丰富,但是必要的都提供了,提供必要的代码展示与demo页面,希望能对您有所帮助。

阅读全文…

cssSandpaper-兼容IE的CSS3 JavaScript库

2010年05月23日,星期日

我前不久介绍了一个让IE6/IE7/IE8支持常见CSS3属性的方法的文章“让IE6/IE7/IE8浏览器支持CSS3属性”,那里是使用的htc文件+VML语言实现的,轻量实用。
而本文即将介绍的CSS3 JavaScript库cssSandpaper采用的则是不同的原理使IE浏览器支持CSS3属性。本文的内容就是详细介绍CSS3 JavaScript库cssSandpaper的方方面面,提供丰富的插图,提供源文件打包下载,提供对应的demo页面,希望能够对您的学习有所帮助。

阅读全文…