实用的 CSS3 参考手册和代码生成工具

CSS3技术现在越来越成熟,通过CSS3的一些新特性(如box-sizing、边界半径、文字阴影、渐变等)创建的效果已经令前端开发者兴奋不已。使 用CSS3进行前端设计是未来的发展趋势。因此,如果你是一名前端设计师,就需要掌握这些最新的技术,否则就有可能会被淘汰。

一、参考手册

1.  Idiomatic CSS

编写统一、符合习惯的CSS的原则,有中文版本。

2.  CSS3 Click Chart

示例代码和CSS3特性支持情况表。

3.  CSS3 Selector

CSS3 Selector的官方指导手册。

4.  HTML5 & CSS3 Support

主流浏览器对HTML5和CSS3支持情况一览表。

5.  CSS3 – Information and Samples

针对CSS3的各种信息和示例。

6.  Sencha CSS3 Cheat Sheet

7.  Smashing Magazine CSS3 Cheat Sheet

二、CSS代码生成工具

1.  Gradient Editor

一个强大的CSS渐变代码可视化编辑器,类似于Photoshop的渐变设置界面。

2.  Gradient

CSS3渐变代码生成器。

3.  Border Radius

边界半径(圆角)代码生成器,通过设置四个角的半径数字,即可自动生成代码,且能够直接预览到效果。

4.  CSS3 Generator

通过可视化形式设置各种属性,包括文字阴影、轮廓、边界、渐变、过渡等,并能够自动生成代码。

5.  CSS3

针对边界半径、box阴影、背景渐变和不透明度的CSS3代码生成器。

6.  LayerStyles

如果你熟悉Adobe Photoshop,你会发现这个工具非常好用。

7.  CSSWarp

自动生成路径文本的CSS代码。

8.  Font Squirrel

生成woff、svg、eot和ttf格式的字体,并在CSS中使用。

9.  CSS3 Maker

强大的CSS3代码生成器。

10.  CSS3 Tool

各种CSS3代码生成工具集合。

英文原文:Useful CSS3 References and Online Generator Tools

绚丽而又实用的jQuery和CSS3导航菜单

我们说导航菜单是网站的一扇门,然而精美便捷的导航更是能让用户方便地游走在网站的各个角落,更重要的是,能让用户牢牢地记住这扇大门,记住这个网 站。所以很多网站设计师对网站导航的设计非常重视。下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航,每一款都挺实用的,而且都是开 源的,提供下载源码。一起来看看吧!

1、半透明效果的CSS3和jQuery导航菜单

这是一款基于jQuery和CSS3的导航菜单,该导航有一个特点,就是当你把鼠标移动到每一个菜单项时,旁边空白处就会出现半透明的菜单功能说明图标,这个图标是用CSS3绘制的,再加上漂亮的背景,整个导航显得非常大气,喜欢的朋友分享一下哦。

2、CSS3仿Windows 7的开始菜单

这是一款用纯CSS3实现的仿Win 7的开始菜单。如果我们分解这个Windows 7开始菜单,我们会得到1个div,2个ul列表,1组链接以及一些icon小图标,我们可以一起来看看具体的效果。

3、jQuery动画菜单jStackmenu

jStackmenu是一款基于jQuery的堆栈式动画菜单,当你用鼠标点击那个“爱心”按钮时,jStackmenu菜单就会以堆栈方式弹出或者收拢,并呈现出流畅的动画特效。

4、jQuery右键菜单插件jQuery ContextMenu

jQuery ContextMenu是一款功能强大的网页右键菜单插件,该插件将帮你非常方便地创建右键菜单。你可以指定右击的位置,同时菜单中还可以定单选框和多选框的复合控件,定制非常灵活。

5、银白色的CSS3导航菜单

这是一款纯CSS3制作的导航菜单,这个银白色的菜单在朦胧夜空的衬托下显得格外亮丽。当鼠标滑过导航时,每个菜单项又会呈现不同的效果,整体上,这款CSS3导航菜单非常简单而又具有立体感。

6、CSS3水平导航和垂直导航

这是一款灰色风格的导航,具有水平和垂直的形式,这个导航是由CSS3实现的,所以需要用支持CSS3的浏览器来查看。你可以通过自己修改CSS代码轻松实现漂亮的水平导航和垂直导航。

好了,今天就分享这些,其他的还在收集中,今后再献给大家,当然,我的分享非常希望得到你的支持微笑

16 个使用纯 HTML+CSS 制作的图形

看看下面这些图,或许你会问:有什么特别呢?非常特别,因为它们不是用图形工具制作的,完全采用 HTML+CSS 编码而成的。

Apple Keyboard

Apple Keyboard

 

MacOS

MacOS

 

iOS Icons

iOS Icons

 

iPhone 4

iPhone 4

 

iPhone 3

iPhone 3

 

Adobe Photoshop

Adobe Photoshop

 

Monster

Monster

 

Umbrui

Umbrui

 

A tribute to Photoshop

A tribute to Photoshop

 

CSS Nyan Cat

CSS Nyan Cat

 

Twitter Failed Whale

Twitter Failed Whale

 

Peculiar

Peculiar

 

Social Media Icons

Social Media Icons

 

Macbook & iMac

Macbook & iMac

 

Homer Simpson

Homer Simpson

 

3D Domo

3D Domo

绚丽而又实用的jQuery和CSS3导航菜单

我们说导航菜单是网站的一扇门,然而精美便捷的导航更是能让用户方便地游走在网站的各个角落,更重要的是,能让用户牢牢地记住这扇大门,记住这个网 站。所以很多网站设计师对网站导航的设计非常重视。下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航,每一款都挺实用的,而且都是开 源的,提供下载源码。一起来看看吧!

1、半透明效果的CSS3和jQuery导航菜单

这是一款基于jQuery和CSS3的导航菜单,该导航有一个特点,就是当你把鼠标移动到每一个菜单项时,旁边空白处就会出现半透明的菜单功能说明图标,这个图标是用CSS3绘制的,再加上漂亮的背景,整个导航显得非常大气,喜欢的朋友分享一下哦。

2、CSS3仿Windows 7的开始菜单

这是一款用纯CSS3实现的仿Win 7的开始菜单。如果我们分解这个Windows 7开始菜单,我们会得到1个div,2个ul列表,1组链接以及一些icon小图标,我们可以一起来看看具体的效果。

3、jQuery动画菜单jStackmenu

jStackmenu是一款基于jQuery的堆栈式动画菜单,当你用鼠标点击那个“爱心”按钮时,jStackmenu菜单就会以堆栈方式弹出或者收拢,并呈现出流畅的动画特效。

4、jQuery右键菜单插件jQuery ContextMenu

jQuery ContextMenu是一款功能强大的网页右键菜单插件,该插件将帮你非常方便地创建右键菜单。你可以指定右击的位置,同时菜单中还可以定单选框和多选框的复合控件,定制非常灵活。

5、银白色的CSS3导航菜单

这是一款纯CSS3制作的导航菜单,这个银白色的菜单在朦胧夜空的衬托下显得格外亮丽。当鼠标滑过导航时,每个菜单项又会呈现不同的效果,整体上,这款CSS3导航菜单非常简单而又具有立体感。

6、CSS3水平导航和垂直导航

这是一款灰色风格的导航,具有水平和垂直的形式,这个导航是由CSS3实现的,所以需要用支持CSS3的浏览器来查看。你可以通过自己修改CSS代码轻松实现漂亮的水平导航和垂直导航。

好了,今天就分享这些,其他的还在收集中,今后再献给大家,当然,我的分享非常希望得到你的支持微笑

7 个超级震撼的 CSS3 按钮组合

我们可以用精美的背景图片和CSS代码制作出非常漂亮的按钮,但在某些特殊的页面上,或者你需要让按钮更有动感从而让你的用户眼前一亮,那么就试试 用CSS3技术吧,CSS3新增的很多属性能让按钮具有你意想不到的效果,包括动画、3D、阴影等等。下面就向大家推荐几个相当震撼的CSS3按钮组合, 希望能给各位读者带来一定帮助。

1、7个CSS3动画按钮特效

这7种按钮均在鼠标滑过时产生不同的动画特效。具体的动画效果可以看下面的在线演示。

2、带搜索框的CSS3动画按钮

介绍2个CSS3按钮,其中一个按钮当鼠标划过时将会出现一个搜索框,这2个按钮的动画特效均使用纯CSS3制作完成。

3、CSS3带气泡动画特效的按钮

这是一个用CSS3实现的带有气泡动画特效的按钮。当你把鼠标移入或者移出按钮时,按钮中就会出现气泡流动的动画特效。

4、绚丽的CSS3发光按钮特效

这是用纯CSS3实现的一组按钮特效,这组按钮不仅色彩绚丽,更重要的是如果在chrome或者safari浏览器中还能呈现出闪闪发光的特效,非常酷的一组按钮。

5、另类风格的CSS3按钮特效

这组CSS3按钮比较特别,整体上来看,这组CSS3按钮给人的感觉是非常有爱非常萌。按钮上都会有一个小图标,而这个小图标是由data-icon属性实现的。

6、15个风格各异的CSS3按钮

这里给大家分享15款风格各异的CSS3按钮,除了最后三个按钮需要图片支持外,其他均可以用纯CSS3代码实现。看完这15个CSS3按钮,相信很多需要用到按钮的地方你都能知道该怎么做了,一起来看看这些按钮吧。

7、10个非常漂亮的CSS3按钮

这10个CSS3按钮拥有不同的色彩,你可以选择其中一个适合你的按钮放在自己的网页上。

以上7个令人震撼的CSS3按钮就介绍完了,希望大家会喜欢,当然我非常希望得到你的支持。另外,转载请注明来源:html5_dev的专栏