当前位置:首 页>> 百 宝 箱

CSS3 & jQuery : 仿 Google Play's 迷你标签导航 微信扫一扫
分享给朋友

  这种标签内容导航很常见了,有很多种实现方式,都是为了在页面上显示更多的内容而不用刷新页面。下面这个标签导航,是基于CSS3和jQuery的,且是仿 Google Play's 的。
  看看吧【https://play.google.com

  本身这个标签导航是没有用到任何图片的,纯纯的CSS3+HTML,辅之以jQuery,上面演示帧页面中的图片是俺为了切合文字美化了一下。按照原页面的教程,标签的几块内容,在页面刷新时会闪一下全部内容,俺就稍微在CSS里收拾了一下。

jQuery Plugins:Flux Slider 2D/3D 图片切换效果展示 微信扫一扫
分享给朋友

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

CSS3 tooltips 浮动显示提示说明 微信扫一扫
分享给朋友

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

CSS3 ordered list styles 有序列表样式 微信扫一扫
分享给朋友

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

关于 CSS3 唠叨一下 微信扫一扫
分享给朋友

  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不支持)

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。