一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Design

网页变模糊js代码

<![if !IE]> <script> /* * by moli */ $(document).ready(function(){ if(document.cookie.indexOf("lu=") == -1 ){ // 延时2秒 setTimeout("jQuery.mxblur.interID = setInterval('jQuery.mxblur.begin()', 5)", 1500); } }); $.mxblur = { interID : null, num: 0.01, begin : function() { jQuery.mxblur.blur( jQuery.mxblur.num ); if(jQuery.mxblur.num > 3) { jQuery.mxblur.num = 0; if(confirm("少年!是不是代码写多了?眼睛模糊了?")) { alert("太累啦,就该歇歇啦,愚人节快乐:)"); clearInterval(jQuery.mxblur.interID ); jQuery.mxblur.blur(0); document.cookie = "lu=lu"; } } jQuery.mxblur.num = jQuery.mxblur.num + 1 /100; }, blur : function() { $("body").css("-webkit-filter","blur("+$.mxblur.num+"px)"); $("body").css("-moz-filter","blur("+$.mxblur.num+"px)"); $("body").css("-o-filter","blur("+$.mxblur.num+"px)"); $("body").css("-ms-filter","blur("+$.mxblur.num+"px)"); $("body").css("filter","blur("+$.mxblur.num+"px)"); $("body").css("filter","url(blur.svg#"+ $.mxblur.num.toFixed(1) +")"); } } </script> <![endif]>   from:http://www.oschina.net/code/snippet_563269_34669

龙生   04 Apr 2014
View Details

网页背景缩放示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body style="background-image: url(http://ww4.sinaimg.cn/large/7a09523bgw1edljfnqcz7j20zk0k0wld.jpg); background-attachment: fixed; background-size: cover; -webkit-background-size: cover; background-position: 50% 0px; background-repeat: initial initial;"> </body> </html>

龙生   28 Feb 2014
View Details

CSS 单位

尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。 ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) pt 磅 (1 pt 等于 1/72 英寸) pc 12 点活字 (1 pc 等于 12 点) px 像素 (计算机屏幕上的一个点) 颜色 单位 描述 (颜色名) 颜色名称 (比如 red) rgb(x,x,x) RGB 值 (比如 rgb(255,0,0)) rgb(x%, x%, x%) RGB 百分比值 (比如 rgb(100%,0%,0%)) #rrggbb 十六进制数 (比如 #ff0000)   from:http://www.w3school.com.cn/css/css_units.asp

龙生   27 Feb 2014
View Details

站酷设计公开课:听韩雪冬谈网站设计——餐厅网站设计案例分享(原创文章)

站酷设计公开课     站酷设计公开课是由站酷网为设计师们量身策划的系列线上设计讲座。站酷网将会根据酷友们的需求不定期邀请各设计门类的人气设计师及设计高手和大家分享他们的设计心得和独门技巧。如果有您希望听到的课程或者您希望担任我们的主讲老师,欢迎在“站酷设计公开课”小组提交选题或报名。   站酷设计公开课无需提前报名,请在直播时,准时来到本页面,在教室界面中输入任意的户名,选择任意的头像登陆,即可在线听课,并在课堂上举手、发言,与主讲老师轻松交流。直播结束后24小时内,本页面会生成可随时查阅的该课程回放,供未参加直播的设计师学习。 友情提示: 1 直播时请大家注意维护课堂秩序,不要不断鼓掌或刷屏干扰课程进行,对于严重影响课堂秩序的听众,我们会将其移出课堂。 2 为了避免您的提问因为刷频没有被讲师看到,我们开辟了小组讨论贴,欢迎大家在这里 http://group.zcool.com.cn/post/ZMTAyMzQ1Mg==.html 向讲师提问,工作人员会将问题整理好后直接提交讲师解答,也欢迎大家课后继续讨论交流。 3 直播课堂容量为1000人,由于课堂容量有限,晚来的同学可能无法进入教室参加直播,请见谅。 4 未能参与直播的同学欢迎在本页面查看回放并在本帖留言评论与大家持续交流。     第五期  听韩雪冬谈网站设计    ——餐厅网站设计案例分享   直播时间:2013年7月3日(星期三)20:30 – 22:00   课程简介:三个定位迥异的餐厅,三个各具风格的网站设计方案,优艺客创始人,知名网页设计设计师韩雪冬带来设计实例分享。从定位开始,需求出发,从流程讲开,从元素应用到层次把握,为你打开网站设计思路。带着你的问题来,让我们一起谈谈网站设计。   讲课嘉宾:韩雪冬(kaven) 站酷网推荐设计师,优艺客(uelike)、uehtml酷站推荐平台创始人,世界权威电子设计杂志NEWWEBPICK推荐设计师,收录电子杂志(第29期),新西兰GOUW设计师平台收录。中国设计联盟2010-11中国十佳网页(互动)设计师及专访设计师,中国设计联盟2012-13中国十佳网页(互动)设计师评委。作品荣获欧美css设计奖项cssdesignawards。曾受邀为呱呱视频社区,飞信,创新工场做设计指导讲座和分享。     站酷主页:http://uelike.zcool.com.cn/ 优艺客(uelike):http://www.uelike.com uehtml酷站推荐平台: http://www.uehtml.com/       课堂案例:       作品传送门:http://www.zcool.com.cn/work/ZMjk2OTI4.html       作品传送门:http://www.zcool.com.cn/work/ZMTAxODEwMA==.html         作品传送门:http://www.zcool.com.cn/work/ZMjI4NTE5Mg==.html   from:http://www.zcool.com.cn/article/ZNDcyODQ=.html

龙生   19 Feb 2014
View Details

12个令人印象深刻的JavaScript和HTML5的内容呈现框架

随着网页开发的指数式增长,越来越多的人投身到其中并贡献了诸多精美的网站。这些伟大的网站也许不同于那些不同的商业视角并且它们可以在各种行业做出贡献。随着网站开发领域的迅速改变和成长,为了简化日常开发工作以及拟定良好的开发规范,很多开发人员引入新技术。如果我们从业务的角度来看,有许多不同类型的企业强烈需要在他们的网站上实现内容呈现。 内容呈现是一个表现总体印象的视觉细节的基本方式。基于这个目的各种不同的语言像Javascript,HTML5 都可将这些特性嵌入到网页钟来。但是手动做这项工作着实耗费时间,为了更好的完成这项工作,开发者提供了基于框架的灵活方式来将它应用与网页中。甚至最好的开源平台WorkPress同样提供了灵活的方式来在网页中使用内容呈现。 在这些框架和函数库的帮助下,内容呈现网页的制作变得更简单和方便了。现在在 web 上有很多 JavaScript/HTML5 的内容呈现框架,用来帮助创建现代化布局的内容呈现 web 页面。这些 JavaScript 和 HTML5 内容呈现框架是创建现代化浏览器演示文稿最简单的方式,也是 web 开发者能更好的开发 web 应用方式。让我们来看看下面要介绍的 30+ JavaScript/HTML5 内容呈现框架,欣赏完后不要忘记跟大家分享你的经验和最喜欢的框架或者函数库,说说你喜欢的理由哦:) 1) 内容呈现框架 –  Deck.js Deck js 是给人印象最深刻,最高级的 HTML 内容演示框架之一,有着许多新的令人惊叹的功能和特性来展示用户的幻灯片。 2) 内容呈现框架 –  Tacion.js Tacion js,是个 jQuery 移动端框架,帮助用户创建一个实时的内容演示文稿。 3) 内容呈现框架 – Fathom.js 这个内容呈现框架是用 CSS 风格的 HTML 来创建幻灯片放映模式,使用带有一些 jQuery 驱动的 javaScript 去控制幻灯片放映的效果。 4) 内容呈现框架 – Impress.js Impress js,这是带有迷人的界面风格和许多创造性功能的最让人难以忘怀的 HTML/javascript 内容呈现框架。 5) 内容呈现框架 – Reveal.js Reveal js,是个 HTML 内容呈现框架,提供现代化的滑块功能,帮助用户创建独特的幻灯片放映效果。 6) 内容呈现框架 –  Presenteer.js 7) 内容呈现框架 –  Jmpress.js jmpress 也是众所周知的让人印象深刻的内容呈现框架。 8) 内容呈现框架 –  DZ Slides DZ Slides 是使用最新的 HTML5 和 CSS3 技术去创建用户的内容呈现框架。 9) 内容呈现框架 […]

龙生   17 Feb 2014
View Details

30 个免费的响应式 HTML5 CSS3 网站模板

网站模板这种东西根本无需任何文字介绍,有图才是真相! Free Retina Ready Responsive App Landing Page Website Template Demo| Download Flat Design Portfolio Template Demo| Download Brushed | Responsive One Page Template Demo| Download Big Picture HTML5 Template Demo | Download Tesselatte – A free responsive site template Demo | Download OVERFLOW Demo | Download Runkeeper a mobile app Responsive web Template Demo| Download Pinball Responsive Grid Style Blog Flat web template Demo| Download Bak One singlepage Flat Corporate Responsive website template Demo| Download Free HTML Template Andia Demo| Download Free Template Produkta: 4 HTML Templates in One Demo| Download Website – HTML5, CSS3, jQuery […]

龙生   17 Feb 2014
View Details

20 个具有惊艳效果的 jQuery 图像缩放插件

jQuery相对与Flash的魔力已经贯穿整个网络。尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边站了。 相比笨重的Flash,使用jQuery可以轻松的创建复杂的自定义动画效果以及提供友好的SEO,因此在两者之间的选择也就是明摆着的事儿了。 一些酷炫的jQuery 图片效果,类似于不同方向滑入,轻松添加动画,掷入、排序、放大效果,摇拍,图片拍摄效果,滑动效果以及大量其他的仅仅需要少量编码的特效使得jQuery称为开发者和网站制作的首选。 下面的jQuery插件对含有需要大量空间的巨型图片的网站非常有用–通常有这样沉重的图像负载的网站,其加载过程会非常慢,但通过这些 jQuery 图像插件,图像不仅能够用无限的特效呈现视觉刺激,而且页面加载的速度也会达到标准。 这里介绍的是20个jQuery图像缩放插件的演示,它们可以描绘出无数的图像效果,可以被利用来为最终用户提供一个更诱人的视觉体验。享受它们吧! 1. ElevateZoom ElevateZoom是一个可以轻松创建图像缩放界面的高度可定制jQuery插件。它可以对一个单独的高品质图像或两幅图像(一个缩略图和一个高品质版本)进行工作。缩放窗口可以放置在页面(或图像)的任何部分,还有一个选项可以内置缩放以节约视觉空间。 2. Mlens mlens,是一个很小的jQuery插件(minified 和 gzipped 之后只有约 1KB),简化创建了这个放大镜的很多功能。它有几个参数,如镜片的形状(圆形或方形)、镜头的尺寸,以及定制边界的选项。它的多个实例可以用在同一页面,其WordPress插件正在开发中。 3. Cloud Zoom Cloud Zoom 是许多高知名度的零售网站都使用的一个横空出世的流行jQuery图像缩放插件。持续改进,定期更新和技术支持使它成为那些为了客户而需要一个成熟、可靠的jQuery图像缩放解决方案的忙碌开发者们青睐的选择。 4. Nivo Zoom Nivo Zoom 是一个类似Lightbox但更为简单的图像缩放jQuery插件,来自流行的 Nivo Slider 的开发者。此插件是轻量级的(压缩后只有4KB),只集中在图像上,并配备了一堆的设置。它支持5种不同的变焦类型,并可以显示图像的标题(能很好处理长文本)。 5. FancyBox FancyBox 是一个可以为你网页上的图像、HTML内容和多媒体提供漂亮和优雅的缩放功能的工具。它建立在流行的JavaScript框架jQuery之上,易于实施和定制。 6. Zoomy Zoomy 是一个快速和易于集成的插件,可以放大任何图片。它是一个灵活的缩放插件,可以用于同一图像的两个拷贝,或者一个链接到其自身的图像。大多数的CMS系统会保存或创建同一图像的多个尺寸版本,所以它可以被轻松设置。只需在所显示的较小的图像上链接较大的放大图像,并告诉插件缩放时使用该链接即可。这只需要一点点脚本。 7. EasyZoom EasyZoom 是一个优雅的、高度优化的jQuery图像放大和平移插件,它基于 Alen Grakalic 的工作。EasyZoom 支持触摸式设备,并很容易用CSS定制。 8. jQuery Zoom jQuery Zoom 是一个jQuery的小插件,用于在 mousedown 或 mouseover 时放大图像。它已经在 Firefox,Safari,Chrome,Internet Explorer 6、7、8、9,和 Opera 11 下测试通过。它遵循MIT协议发布。 9. Zoomooz.js Zoomooz.js 是个易用的可以对任意网页元素进行放大的jQuery插件。你只要对任意 HTML 元素添加名为“zoomTarget”的class,就可以对其添加放大效果。放大可以通过点击body来重置。它在Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera 和 Chrome 上测试通过。 10. Easy Image Zoom Easy Image Zoom […]

龙生   14 Feb 2014
View Details

Web 开发者必备的 14 个 JavaScript 音频库

网页设计可能是现在最有趣的领域之一了。这块的东西对所有的人,不管是知识储备里有料没料的,都敞开大门,机会多多哦。 其最大的特点就是随着时间的推移,实践的深入,你可以慢慢学习着成为一个大鸟。 涉足这个领域,Google将会是你最好的导师,同时她也将毫无偏颇的对你的水平进行评价。设计并不全是铁定的要为应用程序的创建或者编程语言的一些逻辑应用进行大量的编码工作。她更像是创造力同逻辑代码的结合,从而可以使您开发出可以用美丽来评价的东西。 在网页设计的领域,玩转你手中工具的过程中也蕴藏着巨大的机遇。有趣的是,特定开发者存在的原因就在于并不是每一个人都同时具备编写逻辑代码的技能,并且拥有风格的艺术创造能力。 因此,在这种情况下我们就可以理直气壮的认为拥有两种技能的人机遇最大,他们 在这个领域比其他人更有机会收获成功。现在需要意识到的一个最重要的问题就是一个人类,或者让我称之为人,不会同时拥有所有的素质。这就是为什么从主要的编程语言角度来考虑,我们也会有对开发方面需求的原因。 这意味着更好更新的代码段和工具将会对开发者有帮助。一个开发的部分的 存在,在这个领域中就相应会有大量对新事物的需求,就像我们在这里将要讨论的音频效果。 老实说,向站点中加入音频效果会很有用处,这仍然是目前最好的开发者需要经历的一个发展阶段之一。现在喜爱使用Javascript进行设计的人拥有了发挥音频特性的基础设施,这就证明了它是一个可以推动网页设计向前发展的巨大舞台。这可能是网页设计领域加入的最新的也是最酷的东西之一,并且毫无疑问的事实是它将保持一个更长的发展时期。 1) JavaScript 音频库 –  Buzz Buzz 是一个小而强的 Javascript 库,能让你方便的利用上新的  HTML5 音频元素. 在非现代浏览器上它会悄悄的消失掉. 2) JavaScript 音频库 – Timbre js Timbre.js 提供了一种采用像jQuery和node.js采用的那种现代Javascript使用方式来处理和合成音频的功能. 他有许多的 T-Object (正式的称呼是: 音色对象Timbre Object),可以连接起来为整体的音效渲染定义基于图形的路由. 3) JavaScript 音频库 – jPlayer 4) JavaScript 音频库 – Annyang Annyang 是一个可以让你的访问者用语音命令操作你的站点页面的小巧的js库. Annyang 支持多种语言,但是没有其他依赖,仅重2kb,并且免费. 5) JavaScript 音频库 – Sound Manager 2 With the help of在 HTML5 和 Flash 功能的帮助下, SoundManager 2 基于单一的Javascript API提供可靠的跨平台音频支持. 6) JavaScript 音频库 – Plivo Plivo WebSDK 允许你直接从任意的web浏览器发送和接收声音. 他们提供了一个页面 SDK ,而在  SDK 的帮助下你可以创建像 Click to Call, Conferencing Apps 以及甚至像 Webphones 那样的应用程序. 7) JavaScript音频库 – SoundJS Javascript音频库SoundJs提供了简单的API和强大的功能,适合用于处理音频。 8) JavaScript音频库 – jWebAudio Web Audio可以被用于网络应用中声音的处理和同步。jWebAudio隐藏了Web Audio的技术细节,让控制音频变得更容易。 9) JavaScript音频库 – ION Sound 10) Howler js – 现代Javascript网络音频库 11) JavaScript音频库 – Fifer js 12) JavaScript音频库 – Twilio js Twilio.js让你在浏览器和Twilio应用之间建立音频连接。你可以在浏览器里使用主动或被动音频连接,以此构建网络电话、对讲机、网络会议、即时通话系统等等应用。 13) JavaScript音频库 – Audiolet 14) JavaScript音频库 […]

龙生   12 Feb 2014
View Details

前端优秀辅助工具(html5+css3)(转载)

CSS3对于前端工程师来说,越来越重要了。有很多CSS3的效果真的不需我们自己一个一个 去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很 多时间,让你有更多的时间去做自己想要做的事情。   CSS Animatie CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。   http://cssanimate.com/   Long Shadows Generate Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。 http://sandbox.juan-i.com/longshadows/     Fontastic Fontastic是一个在线生成字体图标的app,可以定制属于自己的图标字体。 http://fontastic.me/   Screensiz.es Screensiz.es站收集整理了移动端的相关尺寸。   http://screensiz.es/phone   Live Tools Live Tools是一个UI制作工具,他提供了按钮、表单、icon图标和Ribbons的制作工具, 可以在线配置相关参数,生成你需要的效果代码。   http://livetools.uiparade.com/index.html   Button Generator 生成和图片效果一样的按钮工具。 http://www.cssbuttongenerator.com/     @FONT-FACE GENERATOR @FONT-FACE GENERATOR只需其中一种字体,就可以帮我们转换成@font-face各浏览器 下所需的所有字体格式。只是中文字体太大,不太好用。   http://www.fontsquirrel.com/tools/webfont-generator     @font-face ICON图标 ICON使用@font-face制作是越来越普遍了,但有一些icon字体库有几个icon,而往往我 们有时候只需要其中的几个,加载所有的icon感觉浪费,其实没有必要这么做的,在线 有两个网站,上面提供了各种字体icon库,我们只需要选择其中的部分,进行安装就OK了。 http://fontello.com/     http://icomoon.io/app/#/select       Ultimate CSS Gradient Generator Ultimate CSS Gradient Generator真心的好用,是我常用的一个在线制作渐变的工具, 他除了类似于photoshop的渐变工具之外,还是firefox和chrome浏览器的一个插件。而 且还能生成兼容IE的滤镜代码,好强大的。 http://www.colorzilla.com/gradient-editor/       Pageblox Pageblox是一款在线生成布局的工具,提供了七种常见的布局模式,而且还可以根据自 己的需求做一些自定义的设置。 https://www.pageblox.com/generate   CSS Load CSS Load是一款纯代码制作loading的工具。 http://www.w3cplus.com/source/front-end-developer-excellent-tool.html […]

龙生   10 Feb 2014
View Details
1 5 6 7 10