文章关键字 ‘css3’

CSS3 pointer-events:none应用举例及扩展

2011年12月7日,星期三


pointer-events是CSS3中又一冉冉的属性,其支持的值牛毛般多,不过大多都与SVG相关,我们可以不用理会。当下,对于偶们来讲,与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似,一般在一些特殊场合露一手,平时闺门不出,没什么说头。因此,一轮筛选下来,我们需要留意的只是pointer-events:none而已。
pointer-events:none是个很有意思的东西,某些情况下其精湛的表现会让人两眼发光。
pointer-events:none顾名思意,就是……

阅读全文…

CSS3 @font-face实现颜色大小可控的三角效果

2011年11月19日,星期六


本文介绍如何使用CSS3 @font-face实现颜色可随意控制,大小可随意控制,支持CSS3文字阴影和文字渐变效果,与文字等天然对齐且兼容性良好的三角的实现。可以说是本月比较重量级的文章,配以大量的截图示意。提供必要的demo页面以及源代码展示,以及一些字体的下载。不管怎样,希望本文的内容能够对您的学习有所帮助。

阅读全文…

fontforge制作自定义字体及在手机上应用举例

2011年11月18日,星期五

本文内容部分介绍如何使用fontforge这个软件制作自定义的字体,以及自己如果使用这个软件实现手机上的一个效果的。最后,还拓展举了个使用字体当作图形使用的例子。截图相当丰富,然后还有必要的源代码展示和demo页面,相信本文的内容会对您的学习有所帮助的。

阅读全文…

CSS3无前缀脚本prefixfree.js及Animatable介绍

2011年11月15日,星期二

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,oh,my GEE GEE,前缀少不了,于是每次应用都像是建大楼一样。比楼高是很傻逼的一件事情,所以如此霸气侧漏的CSS大楼反而让人伤不起,我们总希望跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在,于是,一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的东西……然后又弄了个Animatable的东西……

阅读全文…

手机网页UI框架jQuery Mobile介绍之按钮篇

2011年11月5日,星期六

正如标题所说的,本文主要内容就是结束jQuery Mobile下的按钮,包括按钮的生成,按钮类名的生成以及如何去自定义属于自己主题的按钮。

一如既往,提供丰富的demo页面,提供丰富的截图,提供必要的源代码展示。总之,希望本文的内容能够对您的移动手机页面制作和开发的学习提供一点帮助。

阅读全文…

HTML5+JS手机web开发之jQuery Mobile初涉

2011年11月1日,星期二

我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好。因为,Android系统一套东西,iPhone又是新的一套,折腾死人呐。
于是总监发狠,让我把手上的活都交出去,专心折腾web版的,看看最后效果如何。
加上我觊觎手机上的开发学习很久了,于是,一拍即合,搞起了手机开发方面的学习。

为个人偏好以及筛选,决定使用PhoneGap实现与设备相机,通讯录等交互,jQuery Mobile实现页面UI的显示以及相关交互。
不过PhoneGap是与胶水层打交道的东西,要说到这东西还需要些时日。我们可以先把目前投向与页面显示相关的UI框架上。例如,本文要说起的jQuery Mobile……

阅读全文…

使用SVG实现gradient背景渐变

2011年09月23日,星期五

现在现代浏览器都对CSS3的渐变支持良好,加上IE的渐变滤镜,可以在不使用图片的情况下实现各个浏览器的两色渐变效果。这里,再简单介绍下如何使用svg实现元素背景的垂直渐变,水平渐变,斜向渐变,或是径向渐变,以及更加复杂的多层渐变。

耳熟能详的唠叨:本文提供demo页面,丰富的截图以及必要的源代码展示。希望本文的内容可以对您的学习有所帮助。

阅读全文…

小卖弄:纯CSS实现图片滚动播放效果

2011年09月21日,星期三

网站的首页经常或有广告位图片滚动展示的效果,主流网站上都是使用Javascript实现的。实际上,在CSS3的世界里,我们可以完全摒弃Javascript实现类似的效果。而本文的内容就是展示于简单介绍如果使用CSS3实现图片滚动动画展示效果。提供demo页面,必要截图和源代码展示,希望能对您的学习有所帮助。

阅读全文…

应运而生的web页面响应布局

2011年09月19日,星期一

技术的发展往往导致新事物的产生。关于web页面布局,我们应该听过固定布局(fixed layout)、流体布局(fluid layout),那响应布局(responsive layout)是哪个鸟蛋呢?

本文就将深入浅出地介绍响应布局。提供目前现有网站的实例展示,提供自制demo实例展示。配备必要的截图,提供详尽的源代码,细致的分析阐述。相信本文的内容会对您的学习有所帮助的。

阅读全文…

CSS3 Media Queries的些野史外传

2011年08月23日,星期二

本文是去年这个时候流产的草稿又起死回生的一篇文章。当初本来想详细讲述Media Queries的前前后后,祖宗八代,后发现被人捷足先得,不得已,流产了。今天在1周年之际,重拾此文,讲下CSS3 Media Queries的些野史外传。有demo,有源代码展示,总之,希望本文的起死回生之作能够对您的学习有所帮助。

阅读全文…