献给网页设计师的HTML5/CSS3/JS便捷工具

  是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性。尤其是HTML5,作为一门极为有用且实用的标记语言,它赋予网页设计师创造更优秀网页的可能。

  这也是为什么,身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具,这些全新的库、框架、插件和技术能让你的网页如虎添翼。

  HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速,漂亮,安全,响应式,这些特性使使得设计师和开发者可以创造出更加强大更富有创意、更快速、性能优异的APP和网页。所以,接下来我所推荐的工具就是帮你搞定这些问题的。

  简约的响应式图表 – CHARTIST.JS

献给网页设计师的HTML5/CSS3/JS便捷工具

  由于社区对于图表类JS库的失望,Chartist.js 诞生了。尽管有上百种不同的库可供你选择,但是用它们的时候,你总会碰到意想不到的问题,需要不停调整。

  FSVS – 全屏垂直滑块

献给网页设计师的HTML5/CSS3/JS便捷工具

  这是使用jQuery和CSS3写的一个简约全屏垂直滑块组件,支持鼠标混动、点击并托拽,以及触摸手势。

  Nikolay Talanoy 设计的的全屏滑块控件

献给网页设计师的HTML5/CSS3/JS便捷工具

  组件本身的设计令人惊艳,更重要的是它还拥有不错的动效。

  Cody House 设计的大图滑块控件

献给网页设计师的HTML5/CSS3/JS便捷工具

  这是一个横跨屏幕响应式且易于定制的滑块控件。

  Elevator.js

献给网页设计师的HTML5/CSS3/JS便捷工具

  Elevator.js 修正了老范儿的回到顶部按钮的效果,如果你非常在意这个细节的设计不妨来试试这个吧。

  Pure CSS Questionnaire Concept (hover items)

献给网页设计师的HTML5/CSS3/JS便捷工具

  固定背景特效

献给网页设计师的HTML5/CSS3/JS便捷工具

  这是一个不错的模板,充分利用了background-attachment 的CSS属性来创造固定背景的效果。

  使用SVG创造模糊效果

献给网页设计师的HTML5/CSS3/JS便捷工具

  3D 折叠面板

献给网页设计师的HTML5/CSS3/JS便捷工具

  使用jQuery和CSS创造出折叠控制面板的效果,隐藏次要内容。

  圆形弹出式导航菜单

献给网页设计师的HTML5/CSS3/JS便捷工具

  使用SASS和CSS3营造出来的过度、变换的动画效果,点击图表,弹出更多选项。

  登录框概念设计

献给网页设计师的HTML5/CSS3/JS便捷工具

  交互式托拽色彩概念设计

献给网页设计师的HTML5/CSS3/JS便捷工具

  这是一个颇为好玩的插件,当你在处理网站视觉稿的时候,只需要将色彩腿拽到对应的地方就可以实现着色。

分类:工具软件教程 时间:2012-01-05 人气:1
本文关键词: 网页设计师 HTML5 CSS3 JS
分享到:

相关文章

  • 给力Visual Studio 2010 SP1 支持HTML5和CSS3 2012-09-07

    在Visual Studio 2010 SP1,微软将为开发人员提供更方便的途径在ASP.NET的基础上利用新技术开发应用程序,包括HTML5和CSS3。 随着IE9正式版的逐渐临近,微软想要告诉开发人员,是时候利用HTML5和CSS3带来更加完整的Web体验了。 Visual Studio开发团队一位成员表示:“Visual Studio 2010在发布时并不支持HTML5,那么SP1发布时它能支持HTML5吗?是的,在一定程度上是的。尽管(VB2010 SP1)并不支持所有的HTML5规格,

  • HTML5+CSS3教程1 2012-12-05

    没事看到本《HTML5+CSS3》的书,学习之,总结之。什么发展趋势,技术优势之类的都是废话,那么十几页总结起来就一句话“学好html5+css3有肉吃!!” 今天学个html5的小实例,代码: <!DOCTYPE html> <meta charset="utf-8"> <title>第一次写html5</title> <p>这是用html5写出来的 <br/>hello world html5在html4的基础上删除了很

  • 导航特效代码:HTML5+CSS3模拟apple官网导航 2013-08-20

    用HTML5+CSS3制作的网页导航特效,此代码是模仿的apple苹果官方网站的导航,比较粗糙一些,喜欢的网页教学网的网友可以自己美化代码达到自己想要的效果。 <!DOCTYPE html> <html> <head> <meta charset="gbk" /> <style type="text/css"> body { font-family:Arial; font-size:12px; color:#4b4b4b; text-a

  • HTML5 CSS3 专题 : 拖放 (Drag and Drop) 2012-03-18

    本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放。 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 被拖元素,dragElement : 1、添加事件:ondragstart 2、添加属性:dragable 放置元素,dropElement: 1、添加事件:ondargenter , ondragover ,

  • HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 2013-11-27

    上传基本是项目中经常出现的,一般采用: 1、form提交 2、flash 3、html5 form提交会刷新页面,很难做到异步上传;flash可能是用得比较多了,因为可以兼顾到几乎所有的浏览器,我之前一直会用jquery的uploadify作为项目中的上传工具,uploadify也有基于html5好像是收费的,大家可以去官网看看;当然了,现在html5提供了API以及File,FileReader,XMLHttpRequest等强大的API,为我们拖放实现上传提供了可能。 效果图1: 效果图2:

  • 教程:让你的表单升级到CSS3和HTML5客户端验证 2012-12-24

      今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证。   查看预览   第一步:策划表单功能   首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现。在这个示例中,我们就制作一个比较简单的留言表单。需要的功能如下:   名称   电子邮件   网站地址   提交按钮   我们都希望用户能够填写正确的信息再提交,要实现这一点,我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢?在这

  • IE10对HTML5的完美支持 2012-03-02

      近期Windows 8的消息充斥着整个网络。微软将IE10集成在系统中,并且宣称IE10会很好的支持HTML5。本文是对IE10支持HTML5的研究报告。   预览:HTML5初探   在过去的几年里我们做了一系列测试来评估主要的移动平台对HTML5应用的支持。直到现在,我们仍旧没有花时间在Windows phones上,主要因为Windows Phone7浏览器太弱根本不值得评估。但是,在上周的Windows Build会议上我们得到一个开发者预览的平板电脑(运行了Windows8和IE1

  • Netizine:基于HTML5将杂志变成社交网络 2012-03-15

      北京时间4月13日消息,据国外媒体报道,随着美国司法部就苹果公司和数家电子书出版商操控电子书价格提起反垄断诉讼,杂志出版商们正在为数字内容定价问题寻找一种新的替代解决方案:它们希望能够完全摆脱苹果的掌控。一个名为Netizine的公司为出版商开发了一个支持平板电脑的社交杂志新平台。目前该公司正在跟全球10大出版商中的7家商谈,其中包括美国5大出版商中的3家。   Netizine提供了一个功能齐全的、基于HTML5的平板电脑软件,可以把数字杂志转化成一个社交网络,一个在苹果应用商店App S

  • HTML5 IE9+ audio标签播放声音 2012-05-02

    ACC编码格式来存储音乐似乎越来越少,尽管比几乎所有的传统编码方式在同规格的情况下更胜一筹,这里不看它。 个人感觉IE一直以来都挺奇葩,确实很有个性,其他主流浏览器支持的wav编码格式它果断无视。但是我们也没办法,用它的人太多了,随着win7系统的潮流,使用IE9的用户也会越来越多,所以还是得让着他。另外说一句现在版本的firefox 2.4也支持mp3编码格式的音频文件了。 我使用这个标签只要是鉴于其事件,需求是按顺序播放一个声音序文件序列,html5媒体标签onended事件(当媒介已抵达结

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.059 (s). 10 q(s)