jQuery Plugins:Flux Slider 2D/3D 图片切换效果展示

[ 作者:笑傲江湖 发布于:2012年-5月-14日 16:03 星期一  分类:百 宝 箱 ]

  Flux Slider 是一个基于CSS3动画的图片切换效果插件,使用了很多CSS3的新属性,其切换效果很流畅,2D切换效果基本和其他的类似插件差不多,但是它的3D切换效果非常炫目,至少我个人比较喜欢那个Explode爆炸效果,图片被分成很多小块,然后分崩离析的朝你扑面而来,我在想如果是3D显示器,这效果也是3D的,那再带上3D眼镜或者直接裸眼能看,估计相当惊人,希望有看到的那一天^_^
Flux Slider 2D/3D 图片切换效果展示


CSS3 tooltips 浮动显示提示说明

[ 作者:笑傲江湖 发布于:2012年-5月-12日 15:24 星期六  分类:百 宝 箱 ]

  这个tooltips,一般是用在按钮、图标或者其他网页元素上,用来详细说明按钮或者图标用途什么的,或者其他什么附加内容需要给用户提示的。有了它,对浏览网页的用户来说无疑是更方便了,不过这个tips的样式是纯粹由CSS3打造,所以,IE6这样的老古董估计看起来会有所不同,同时,因为IE6不支持hover这个属性,所以还要借助jQuery来搞定。
  具体的HTML和CSS代码,请查看下面帧页面的源代码。鼠标移动到带下划线的文字上就能看见Tips了^_^


CSS3 ordered list styles 有序列表样式

[ 作者:笑傲江湖 发布于:2012年-5月-10日 13:27 星期四  分类:百 宝 箱 ]

  平常无序列表用的机会多点,也就是ul,偶然瞅见这个有序列表ol的样式,挺不错,不过是用CSS3定义的样式,IE6-8浏览的话就没那么好看了,不过也还好,就是圆角圆环什么的看不到,清一色的方块。这玩意用在排行榜还是相当不错的^_^
  具体的HTML和CSS代码我就不贴了,自己查看一下下面帧页面的源代码就一清二楚了。


关于 CSS3 唠叨一下

[ 作者:笑傲江湖 发布于:2011年-12月-21日 16:38 星期三  分类:百 宝 箱 ]

  CSS3 说白了就是 CSS2+新增规范,当然也是向下兼容CSS2的,不用担心浏览器的显示问题。CSS3虽然也出来有段时间了,但这些新增规范依然还在W3C的不断完善和发展之中,所以有些新属性不是所有的浏览器都支持,或者是同一个浏览器的不同版本也会有差异,当然,最烂的就是盖茨大叔家的IE系列了,支持的最好的是IE9了,IE10还没用,估计不会差哪里去,其他浏览器,比如新版的Chrome、Firefox、Opera、Safari,基本都支持的不错。
  正是由于新属性不是所有浏览器都支持,尤其是IE9以下版本的浏览器,所以一直没去仔细研究那些新增的规范,更何况在咱这IE6大行其道的地方,很多CSS2的东西都显示的不咋地,CSS3就别想这么多了,除非全中国上网的人们都换成IE10,或者新版的Chrome、Firefox、Opera、Safari,否则这CSS3只能自己看了。比如,俺博客文章的标题是有阴影的,IE浏览器是看不到的,圆角的边框博客倒是没有用,如果用了,IE6/7/8也是看不到的,还是显示直角的边框,IE9是可以看到的。
  下面就说说之前觉得有用的几个新属性。

CSS3 Borders 新的边框定义里面,可以设置圆角了,也可以设置阴影,同时边框还支持显示图片,IE9及以上版本才能看见效果,IE8是不支持的。
border-radius 边框圆角大小
box-shadow 边框的阴影
border-image 边框图片 (IE9不支持)

标签: CSS CSS3 W3C

评论0 引用0 浏览267


IE9对CSS3和HTML5的支持

[ 作者:笑傲江湖 发布于:2011年-3月-17日 8:22 星期四  分类:随心所欲 ]

  微软还是很变态,一些不错的CSS3的特性都还不支持,俺觉得一个起码的text-shadow该支持了吧,居然还不行。还算厚道,CSS3的选择器算是都支持了。看来W3C的标准执行的也不是很好,起码微软这只大鳄就不怎么遵守,其他浏览器如Chrome,Firefox,Safari,Opera还是不错,基本上绝大部分支持的很好。这次IE9是彻底的放弃XP用户了,也应该是置IE6于死地的时候了。

更多信息详见:http://fmbip.com/


W3C发布HTML5官方Logo

[ 作者:笑傲江湖 发布于:2011年-1月-19日 9:02 星期三  分类:百 宝 箱 ]

  W3C(World-Wide Web Consortium,万维网联盟)放出了HTML5的官方新Logo,并对最近的网络开发技术做出了新的解释。

  该logo由Ocupop公司设计,这是一个专注与品牌打造和网络设计的公司。
  Ocupop的logo设计师Michael Nieling这样说道:
  HTML5 这个词获得了它自己的生命。无论是在开发者还是公众社区中,这个词的指代对象早已超过了简简单单一个标准的范畴,以至于来带了诸多的不解和争论。这套标准 需要一个标准。那就是,HTML5需要一组一致的、标准的可视化词汇来在对话、展示和解释中清楚地指代特定的对象。
HTML5的八大技术特征:
1. 语义学
作为HTML5的前端和中心,语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架,微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。
2. 本地存储
在应用缓存,本地存储,索引数据库和文件应用程序接口的帮助下,HTML5应用甚至能在没有因特网连接的情况下工作。
3. 设备访问
地理定位只是一个开始,HTML5能够让应用程序访问连结到你计算机上的任何设备。
4. 连结性更有效率的连结性将能带来更实时的聊天,更快的游戏速度以及更好的沟通交流。服务器与客户端之间的网络套接字和邮件摄像头将比以往更加便捷。
5. 多媒体
音频和视频可是HTML5世界的一等公民,他们将与你的应用程序和网站和睦共处。灯光,摄影,开始!
6. 平面和三维效果
在SVG, Canvas, WebGL和CSS3 3D效果这些特性之间,你一定能找到让你的用户眼花缭乱,美不胜收的创意。
7. 性能和集成
使你的应用程序和网络在大量诸如Web Workers和XMLHttpRequest 2这样的技术下更加快速。没有人愿意停下了等你跟进的。
8. CSS3
在不牺牲你的讲义结构和性能的情况下,CSS3提供了大量的样式效果和加强你的网络应用。另外WOFF(Web Open Font Format)提供了前所未有的印刷灵活性控制。