WEB设计:CSS3十个免费强大工具集锦

标签: HTML5学习资源 | 发表时间:2011-12-13 14:31 | 作者:xielisha
出处:http://www.mhtml5.com

CSS 3 现在是非常模块化的,他规范了添加级联样式表,它拥有一些优秀的功能,革新了 Web 版式和设计。

虽然有很多优 点,但是,这并不意味着它不会有任何缺点 CSS3的是新的技术,虽然有很多改善。但最大问题之一是,浏览器的兼容问题,这意味着它是不容易实现跨浏览器。开发者需要添加额外的代码来实现跨浏览器 的属性相同的方式。但你不必担心,许多工具可在那里,为您提供帮助。最好的部分是,这些工具允许完全定制,这意味着任何人都可以轻松地使用他们。

css3generator

WEB版式及设计:CSS3强大工具集锦

顾名思义,它可以让开发人员生成各种CSS3属性的跨浏览器的片段。他含有定制功能,如边界半径,文字阴影,RGBA,边框的大小调整等。所有你所要做的的是点击下拉菜单,然后生成你想要的代码效果

CSS3 Maker

WEB版式及设计:CSS3强大工具集锦

这是一个方便的工具,它拥有一个下拉菜单和其他许多不同的选项框大小,轮廓的样式和颜色等其他样式,简单地说,输入你期望的值代码自动生成预览。然后,你可以下载代码。

Button Maker

WEB版式及设计:CSS3强大工具集锦

设计时尚的3 – D按钮的工具。与按钮制作,只需移动滑块来调整的顶部和底部的渐变,悬停背景颜色,悬停文本颜色等,以得到您想要在任何按钮。

CSS3的PIE

WEB版式及设计:CSS3强大工具集锦

它具有一个快速演示和一些控制,执行了一些CSS3的像边界半径,边框阴影和线性渐变属性。只需移动控制,你会看到实时效果。看看生成的代码。

css3gen

WEB版式及设计:CSS3强大工具集锦

这是初学者开发的最棒,非常容易使用的工具。只需使用一个渐进的布局控制:创建圆角,任何框元素添加阴影效果,并产生不同的播放效果。此工具也可以指定代码的浏览器的兼容性

Rounded Corner Generator

WEB版式及设计:CSS3强大工具集锦

顾名思义,这个伟大的工具,您可以生成圆角的代码。。可以很容易地生成自定义代码的各个角落

Gradient Generator

WEB版式及设计:CSS3强大工具集锦

选择三种颜色在下面的表格您的梯度:开始颜色,结束颜色,并在中间停止(过渡)颜色。就能生成你喜欢的颜色

Border-image-generator

WEB版式及设计:CSS3强大工具集锦

这是一个伟大的工具,让您只需通过调整滑块产生的边界图像。它给你的边界半径立刻发生变化,只要选择任何图像,然后用它来指定元素的背景和边界的样式,他会让你的设计看起来更好看

CSS Corners

WEB版式及设计:CSS3强大工具集锦

它允许创建梯度圆角,使您的设计看起来很专业。圆角代码支持各种浏览器。只要控制他的大小,可以预览他的变化,并得到一个实例的代码。

Gradient Editor

WEB版式及设计:CSS3强大工具集锦

渐变编辑器拥有类似的Adobe的功能,它可以让你组成的多彩外观设计,获取设计透明的CSS渐变多彩 ,渐变按钮,并添加淡入淡出,半透明度和其他类似的效果。

 

(转自: IT168

相关 [web 设计 css3] 推荐:

WEB设计:CSS3十个免费强大工具集锦

- - HTML5研究小组
CSS 3 现在是非常模块化的,他规范了添加级联样式表,它拥有一些优秀的功能,革新了 Web 版式和设计. 虽然有很多优 点,但是,这并不意味着它不会有任何缺点 CSS3的是新的技术,虽然有很多改善. 但最大问题之一是,浏览器的兼容问题,这意味着它是不容易实现跨浏览器. 开发者需要添加额外的代码来实现跨浏览器 的属性相同的方式.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

漂亮的 CSS3 搜索表单设计

- 小明 - 博客园-首页原创精华区
      最近一直把玩 CSS3 相关的东西,也发现了一些新的 CSS 技巧. 你知道如何使用 border-radius 创建圆形图案、使用 box-shadow 创建内部阴影效果吗. 带你仔细阅读这份使用 CSS3 的 gradient、border-radius 及 box-shadow 属性所制作的漂亮的搜索表单案例.

The Expressive Web:最具创意的HTML5和CSS3特性展示

- kxxoling - cnBeta.COM
感谢梦想天空(山边小溪)的投递. 不久前,Adobe发布了一个展示HTML5和CSS3特性的网站项目:The Expressive Web,该网站以形象生动的例子演示了加入到现代Web中最有创造性和表现力的功能,另外还提供了众多具有视觉冲击力的HTML5和CSS3学习资源.

24个为Web开发人员准备的CSS3实用教程

- qqinxl - ITeye资讯频道
本文搜集了一些关于CSS3的最新教程. 你可以根据这些教程或技术来实现网页设计,包括:文字阴影、圆角框、盒模型尺寸计算(box sizing)、透明效果处理、多重背景、边框图像等. 以下这些都是非常实用的CSS3教程,提供了许多优秀的技术. Super Awesome Buttons with CSS3 and RGBA (使用CSS3和RGBA做出超级棒的按钮效果).

10个新鲜的CSS3文本效果制作与Web排版教程推荐

- - ITeye资讯频道
在CSS3中变化重大的一项便是与Web排版相关的技术. 现在我们不需要使用任何JavaScript或图片即可实现丰富的文本样式效果. 本文收集了10个非常实用的CSS3 文本效果制作与Web排版教程,希望你会喜欢. 在该教程中我们将学习怎样使用基本的CSS标记来完成交互式排版设计,这里我们只使用最少的图像,并借助纯CSS3的魔力,另外,使用一个专门用于网页排版的jQuery插件——lettering.js让设计稍微更出色一些.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

Web 前沿技术:展示一组极其绚丽的 CSS3 效果

- - 博客园_梦想天空
  这篇文章收集了一组非常绚丽的. CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力. CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 . JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现. 相信下面这些 CSS3 演示会让你感到吃惊.

使用CSS3媒体查询技术创造响应式设计

- - 收集分享互联网资源!
显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大. 用户浏览网页的的设备也不仅仅是桌面电脑了. 现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站. 因此传统的固定宽度的设计的方法将不再适用. 布局需要能自动适应的分辨率和解析设备.

采访和书评:精通HTML5和CSS3设计模式

- - HTML5研究小组
每个应用程序都是独一无二的——但构成应用程序的组件却不尽如此. 工具箱和程序库能够捆绑高层GUI元素和概念,但它们也因此造成了对程序库的依赖. 一本名叫 《精通HTML5和CSS3设计模式》的新书研究记录了web应用程序的常用设计模式,并使用HTML5、CSS和JavaScript(需要的话)提供了这些设计模式的实现方案.