獻(xiàn)給網(wǎng)頁(yè)設(shè)計(jì)師的HTML5/CSS3/JS便捷工具
是時(shí)候?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)師的來(lái)一組便捷的輔助工具了。日新月異的網(wǎng)頁(yè)技術(shù)革新催生了大量的設(shè)計(jì)與開(kāi)發(fā)工具,HTML5/CSS3幾乎成了設(shè)網(wǎng)頁(yè)設(shè)計(jì)師的必修課,而強(qiáng)大的JS也為網(wǎng)頁(yè)提供了更多的可能性。尤其是HTML5,作為一門極為有用且實(shí)用的標(biāo)記語(yǔ)言,它賦予網(wǎng)頁(yè)設(shè)計(jì)師創(chuàng)造更優(yōu)秀網(wǎng)頁(yè)的可能。
這也是為什么,身為網(wǎng)頁(yè)設(shè)計(jì)師的你需要不停地了解最新的技術(shù)趨勢(shì)和新興工具,這些全新的庫(kù)、框架、插件和技術(shù)能讓你的網(wǎng)頁(yè)如虎添翼。
HTML5使得設(shè)計(jì)師和開(kāi)發(fā)者在各個(gè)不同領(lǐng)域都比之前更強(qiáng)大了??焖伲?,安全,響應(yīng)式,這些特性使使得設(shè)計(jì)師和開(kāi)發(fā)者可以創(chuàng)造出更加強(qiáng)大更富有創(chuàng)意、更快速、性能優(yōu)異的APP和網(wǎng)頁(yè)。所以,接下來(lái)我所推薦的工具就是幫你搞定這些問(wèn)題的。
簡(jiǎn)約的響應(yīng)式圖表 – CHARTIST.JS
![獻(xiàn)給網(wǎng)頁(yè)設(shè)計(jì)師的HTML5/CSS3/JS便捷工具 三聯(lián)](/UploadFiles/2015-07/2/14362800054535780.jpg)
由于社區(qū)對(duì)于圖表類JS庫(kù)的失望,Chartist.js 誕生了。盡管有上百種不同的庫(kù)可供你選擇,但是用它們的時(shí)候,你總會(huì)碰到意想不到的問(wèn)題,需要不停調(diào)整。
FSVS – 全屏垂直滑塊
![](/UploadFiles/2015-07/2/14362800062427464.jpg)
這是使用jQuery和CSS3寫(xiě)的一個(gè)簡(jiǎn)約全屏垂直滑塊組件,支持鼠標(biāo)混動(dòng)、點(diǎn)擊并托拽,以及觸摸手勢(shì)。
Nikolay Talanoy 設(shè)計(jì)的的全屏滑塊控件
![](/UploadFiles/2015-07/2/14362800102044982.jpg)
組件本身的設(shè)計(jì)令人驚艷,更重要的是它還擁有不錯(cuò)的動(dòng)效。
Cody House 設(shè)計(jì)的大圖滑塊控件
![](/UploadFiles/2015-07/2/14362800123998411.jpg)
這是一個(gè)橫跨屏幕響應(yīng)式且易于定制的滑塊控件。
Elevator.js
![](/UploadFiles/2015-07/2/14362800146385562.jpg)
Elevator.js 修正了老范兒的回到頂部按鈕的效果,如果你非常在意這個(gè)細(xì)節(jié)的設(shè)計(jì)不妨來(lái)試試這個(gè)吧。
Pure CSS Questionnaire Concept (hover items)
![](/UploadFiles/2015-07/2/14362800163472935.jpg)
固定背景特效
![](/UploadFiles/2015-07/2/14362800184886367.jpg)
這是一個(gè)不錯(cuò)的模板,充分利用了background-attachment 的CSS屬性來(lái)創(chuàng)造固定背景的效果。
使用SVG創(chuàng)造模糊效果
![](/UploadFiles/2015-07/2/14362800202829605.jpg)
3D 折疊面板
![](/UploadFiles/2015-07/2/14362800212465633.jpg)
使用jQuery和CSS創(chuàng)造出折疊控制面板的效果,隱藏次要內(nèi)容。
圓形彈出式導(dǎo)航菜單
![](/UploadFiles/2015-07/2/14362800229188867.jpg)
使用SASS和CSS3營(yíng)造出來(lái)的過(guò)度、變換的動(dòng)畫(huà)效果,點(diǎn)擊圖表,彈出更多選項(xiàng)。
登錄框概念設(shè)計(jì)
![](/UploadFiles/2015-07/2/14362800236469714.jpg)
交互式托拽色彩概念設(shè)計(jì)
![](/UploadFiles/2015-07/2/14362800241057684.jpg)
這是一個(gè)頗為好玩的插件,當(dāng)你在處理網(wǎng)站視覺(jué)稿的時(shí)候,只需要將色彩腿拽到對(duì)應(yīng)的地方就可以實(shí)現(xiàn)著色。
本文地址:http://www.likemindfilms.com/tutorial/wd2830.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏