01 2013 档案
摘要:text-shadow 曾经在 CSS2 中就出现过,但在 CSS 2.1版本中又被抛弃了,现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视,而且 CSS3 这么多属性中,我个人觉得 text-shadow 运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。
阅读全文
摘要:Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。上一篇文章《Grunt:基于任务的 JavaScript 项目构建工具》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍如何使用 Grunt 合并文件。
阅读全文
摘要:选择最佳的应用程序图标集对于 Web 应用来说非常重要的。这些图标必须遵循所有的视觉体验指导方针,必须适合整体设计,能够帮助简化交互和导航。。在这篇文章中,我已经收集了20个华丽的图标集,适用于几乎任何类型的设计。这些图标有一个干净的和描述性的外观,同时遵循良好的设计原则,相信你会喜欢。
阅读全文
摘要:前一篇文章详细介绍了CSS3 RGBA 的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。以前制作圆角效果,我们都需要使用多张圆角图片做为背景分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,非常繁琐。
阅读全文
摘要:过去的几年中,不断涌现出新的自定义网站设计技术。一个非常流行的想法是把所有的主要内容放在一个页面,使用动态滚动动画来定位内容,这种单页布局在只需要显示相关信息的一小部分的目标网页和移动应用程序制作网站经常使用。在这篇文章中,我想向大家介绍单页网站中一些有趣的技术。希望这些想法能够给正在寻找这方面内容的年轻设计师提供灵感。
阅读全文
摘要:颜色在 CSS 中有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)的色彩空间。虽然它有的时候被描述为一个颜色空间,但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说,大家就跟着我一起往下看吧。
阅读全文
摘要:这篇文章收集了Google 前端工程师 Addy Osmani 分享在 Speaker Deck 的15个精彩幻灯片,每个都是精华中的精华,真正的干货!相信你认真阅读之后一定会有收获!Addy Osmani 创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator,出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本书籍,还是著名 jQuery、Modernizr 以及 Backbone.js 框架的贡献者。
阅读全文
摘要:文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
阅读全文
摘要:2012年对于网页设计领域来说是非常有趣的一年,响应式设计的流行孕育了辉煌的重新设计:巧妙的布局、清晰的排版和强烈的色彩对比。下面分享一组独特的网页设计作品,这组优秀网页作品向你展示的对于未来网页设计发展的想法会让你倍感兴奋。
阅读全文
摘要:Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍 Grunt 中的任务和指令。
阅读全文
摘要:这篇文章收集了25款精美的免费 CSS 网站模板分享给大家,您可以免费下载使用。相信这些漂亮的免费 CSS 网站模板既能够帮助您节省大量的时间和精力,又能有很满意的效果。
阅读全文
摘要:这篇文章是前端优秀讲座和讨论列表系列连载第三篇,分享 JavaScript 开发和编码技巧以及构建大规模 Web 应用程序的经验。前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。
阅读全文
摘要:本文是《2012年度最独特的网页设计作品展示》第二篇,2012年对于网页设计领域来说是非常有趣的一年,响应式设计的流行孕育了辉煌的重新设计:巧妙的布局、清晰的排版和强烈的色彩对比。这里分享一组独特的网页设计作品,这并不是一个完整的集合,只是众多优秀网页作品的代表。
阅读全文
摘要:Web Lab 由五个 Chrome 实验装置组成,展现互联网给生活带来的非凡变化,让世人体验 Web 的神奇!这些装置在伦敦科学博物馆进行了长达一年的展出,任何地方、任何人都可以通过 chromeweblab.com 和这些装置互动。到底是什么东西呢?赶紧来瞧瞧。
阅读全文
摘要:Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。推荐 Windows 用户使用 Git Shell 来进行命令行操作。安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell。
阅读全文
摘要:2012年对于网页设计领域来说是非常有趣的一年,响应式设计的流行孕育了辉煌的重新设计:巧妙的布局、清晰的排版和强烈的色彩对比。下面分享一组独特的网页设计作品,这组优秀网页作品向你展示的对于未来网页设计发展的想法会让你倍感兴奋。
阅读全文
摘要:Font Awesome 是一套专门为 Twitter Boostrap 设计的字体图标库。这套图标集几乎囊括了网页中可能用到的所有图标,除了包括 Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。
阅读全文
摘要:过去的2012年,Web 领域有众多新变化:HTML5 将在2014年成为推荐标准;W3C 任命了4位新编辑来管理 HTML5 规范并托管到 Github 上面;WHATWG 继续致力于活动的 HTML 标准(Living Standard)。这一年,响应式设计和 Twitter Boostrap 引导了主流,微软发布了 IE10,Chrome 和 Firefox 这都新发布了7个版本。这一年,众多优秀的网页设计作品涌现出来,这篇文章精心挑选了2012年排名前20的 HTML5 网站,相信这些优秀网站能够带给你惊喜。
阅读全文
摘要:徽章是设计中使用的基本元素之一,是帮助你销售产品和提升产品人气的非常有效的方式。如果你想让网页中的某个产品吸引用户的注意力,你可以给它加个徽章。下面分享一组充满吸引力的免费矢量徽章集合,赶紧收藏吧。
阅读全文
摘要:Motio 是一个简单但功能强大的的实现精灵动画和平移的 jQuery 插件。Motio 要求元素在动画容器内,在 CSS 背景图像中实现动画效果。在基于精灵的动画中,容器应该和一帧精灵的尺寸一样。例如,如果你有10帧水平方向的精灵,总共 1000 x 100 像素,那么动画容器应为 100×100 像素大。
阅读全文
摘要:这篇文章是前端优秀讲座和讨论列表系列连载第二篇,包含未来的前端开发趋势和 CSS 开发两部分内容。前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。
阅读全文
摘要:这篇文章收集了9张高清的2013年2月桌面日历壁纸,供大家免费下载。高清日历桌面壁纸可以直接在桌面上看到某一天所对应的星期,并且还含农历哦,非常方便实用,赶紧为你的桌面换装吧!中国传统农历新年越来越近了,吊丝们都在坑爹的12306上面秒火车票,拼得头破血流也不一定能换来一张回家的票,真是这个时代的悲剧。不闲扯了,这不是今天的主题,今天是分享好东西的。
阅读全文
摘要:404页面在我们平常浏览网页的时候并不会经常碰到,也因此很容易被忽略,但是有一些无意中出现的404页面的确很有意思。404页面也有一些特别的用途,例如显示公益广告,推广网站自身的内容等等,自定义404页面也是改善网站用户体验的一个方面。这篇文章向大家分享25个史上最有创意的404页面设计集锦,同时分享:一组漂亮的404错误页面模板下载。
阅读全文
摘要:您是否正在寻找精美的高品质的 PSD 文件?在这里,我收集了50套新鲜出炉的精美 PSD 文件,分享给设计师朋友们。 在这个 PSD 文件集合中,你可以找到 UI 工具包,设计界面,图标集,网站模板,网页徽章和 PSD 图标等等。
阅读全文
摘要:这是《CSS3 探索发现》系列文章的第二篇,分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。推荐阅读:《CSS3 探索发现系列一:一组梦幻般的 CSS3 动画按钮效果》。这些闪亮的按钮使用了两个 DIV 实现,一个是按钮主要部分,一个是用来显示光泽。下面是在线演示,很漂亮吧?把鼠标放在按钮上试试,有惊喜哦!(温馨提示:在 Chrome,Firefox 和 Safari 浏览器中效果最佳。
阅读全文
摘要:Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS,带给你灵活性和全面的控制。你可以让让个流动或者固定,还可以根据需要为每个媒体添加布局。更改列和间隔宽度,并根据需要删除或添加列。这个网格系统让您的的标记语义化,没有任何“grid_x”类。除非你想使用它们,在这种情况下,它们也可以包括在内。深刻的网格使用负外边距计算列。与其他网格系统不同,流体布局在每一个浏览器看起来几乎完全一样。
阅读全文
摘要:移动互联网在过去一年呈现爆发性增长,掀起移动互联网应用的热潮。众多互联网公司都争相推出手机应用和手机网站,想在移动大蛋糕中分一杯羹。这篇文章向大家分享20款精美的手机网站模板,可以免费下载。
阅读全文
摘要:在2012年,HTML5 游戏开发迈出了一大步。众多优秀的 HTML5 游戏让我们明白,我们并不需要高科技的演示或例子就能知道 HTML5 已经足够成熟,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争。正如标题所说,这篇文章推荐的10款精彩的 HTML5 游戏把技术发挥到了极致,用事实证明,HTML5 能够可以创建出真实的,好玩的游戏。
阅读全文
摘要:今天分享字体集合特别分享给平面设计师。在这篇文章中,你可以找到25款新鲜出炉的免费英文艺术字体。在之前,我发表了众多高品质字体相关的文章,有手写字体、空心字体、火焰字体、简历字体、涂鸦字体、节日字体、装饰字体和复古字体等等。
阅读全文
摘要:您是否在寻找高品质的 PSD 文件?在这里,我收集了50个新鲜出炉的精美 PSD 文件,分享给设计师朋友们。 在这个 PSD 文件集合中,你可以找到 UI 工具包,设计界面,图标集,网站模板,网页徽章和 PSD 图标等等。
阅读全文
摘要:今天,我们为您带来20佳来自世界各地的顶级品牌鞋电子商务网站设计。现在网上购物是越来越受欢迎,在线购物让我们可以足不出户买到心仪的商品。设计电子商务网站是一项非常有挑战性的任务。如果网站销售的是顶尖品牌的鞋,那么网站应该传达一种奢侈的风格,如果是女鞋,这要期体现出时尚潮流,男鞋则要体现成熟稳重的风格。
阅读全文
摘要:过去的这一年,CSS3 被更多的人关注和学习,应用得越来越多。这篇文章挑选出的2012年最值得关注的 CSS3 教程能够帮助你更好的掌握 CSS3 的实际使用。CSS3 提供了众多强大的视觉效果特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。
阅读全文
摘要:这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件。jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果。希望这些插件对你有所帮助,能够帮助你节省时间和精力。
阅读全文
摘要:Elusive Icons 是一套网页字体图标,可用于任何项目。这套图标集包含270款圆滑的矢量图标,特别适合基于 Twitter Bootstrap 的项目。它使用的是开源的字体,在项目中使用没有任何授权的问题。如果你不那么在意许可证,那么还有很多类似的字体图标库可以使用,最引人注目的是 Font Awesome。下载此字体时,你还会收到所有 SVG 格式的矢量图标,这样你就可以修改这些字体,使其更加完善,并贡献到 Github 上面。
阅读全文
摘要:网页中的颜色呈现会受到各种因素的影响,即使你的网页使用了非常漂亮的配色方案,但是如果每个人浏览的时候看到的效果都不相同,那么你的配色理念就不能够非常好地传达给浏览者。使用216网页安全色进行网页配色可以避免颜色失真问题。网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果。
阅读全文
摘要:年度盛宴系列继续奉献境内才内容,今天分享字体集合特别分享给平面设计师。在这篇文章中,你可以找到25款新鲜出炉的免费英文艺术字体。在之前,我发表了众多高品质字体相关的文章,有手写字体、空心字体、火焰字体、简历字体、涂鸦字体、节日字体、装饰字体和复古字体等等。
阅读全文
摘要:前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。著名的 Google 前端工程师 Addy Osmani 在 Smashing Magazine 发布了一篇文章,分享了他认为能够帮助前端工程师的优秀讲座和讨论列表。梦想天空将发布连载博文向大家一一呈现,敬请关注!
阅读全文
摘要:这是2012年最佳 Photoshop 教程系列文章的最后一篇,这些优秀的 Photoshop 教程教大家如何设计和制作精美的网站。如果你跟着教程一步一步的学些,能够学到很多在 Photoshop 中制作网页的技巧。同系列文章:Photoshop 实例教程【文字特效篇】、Photoshop 实例教程【照片特效篇】、Photoshop 实例教程【绘图篇】。
阅读全文
摘要:经典网页设计设计系列给大家带来激发你灵感的20个多彩的网页作品。五彩缤纷的网页和简洁清爽的网页一样讨人喜欢,有时候颜色可以完全改观一个网站的外观,一起欣赏。
阅读全文
摘要:gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
阅读全文
摘要:这篇文章向大家分享40套很漂亮的纹理背景图片素材,如果你正在寻找高质量的纹理背景,那么这篇文章你一定要记得收藏。纹理背景图片对设计师来说非常有用,个性的纹理背景可以让你的网站看起来更加优雅时髦,脱颖而出。纹理背景图片通常都是高质量的图片,一般有木质纹理、布质纹理、金属纹理和石质纹理等形式。
阅读全文
摘要:Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以用 Javascript 操作Dom 轻松创建各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制热议形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。Raphaël 是跨浏览器的矢量图形库,目前支持 Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
阅读全文
摘要:听说 IE10 全面支持 HTML5,于是在自己的 Win7 SP1 64 位操作系统上安装了,想体验一下。没想到一打开浏览器,滚动栏右侧有黑条,输入网址回车电脑立马蓝屏重启了。靠谱的方法:关闭所有IE窗口,单击开始按钮,在搜索框内输入 inetcpl.cpl,按回车。在 Internet 属性对话框中点击高级,勾选使用软件呈现而不使用 GPU 呈现,点击确定。最后问题解决了,打开 IE9 浏览器时,右侧的黑边没有了。
阅读全文
摘要:这篇文章向大家展示2012年里在纹理应用,图像选择,文字排版和导航设计等各个方面都特别优秀的网站作品。你需要花时间慢慢浏览这些优秀的设计,看看2012年里这些让人难忘的创意网站作品能带给你哪些启发。
阅读全文
摘要:图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天这篇文章向大家推荐12款非常实用的 jQuery 图片轮播效果插件,它们可以让帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。
阅读全文
摘要:这篇文章收集了一批非常精美的,充满创造性的立体折叠效果的名片设计作品。这些设计新颖的企业名片能够给客户留下深刻的印象,对于推介公司的产品和业务有非常大的帮助,一起欣赏。
阅读全文
摘要:新年伊始,首先衷心祝愿朋友们2013年身体健康,万事如意!这篇文章向大家展示2012年中在纹理应用,图像搭配,文字排版和导航设计等各个方面都特别出色的国外优秀网站作品。你需要花时间慢慢浏览这些优秀的设计,看看这些创意网站作品能带给你哪些启发。
阅读全文
摘要:本文向大家分享一批新鲜出炉的2013年1月日历桌面壁纸,供大家免费下载。桌面壁纸是电脑桌面所使用的背景图片,可以根据大小和分辨率来做相应调整。 壁纸让我们的电脑看起来更好看,更漂亮,更有个性。所以,今天我为大家收集的这批非常精美的高清日历桌面壁纸,有多种尺寸可以选择,赶紧为你的桌面换装吧!
阅读全文
摘要:正则表达式通常被用来检索或替换符合某个模式的文本内容,编写正则是开发人员的必备技能。简单的正则表达式一下就能看懂含义,但是复杂的正则理解起来就很困难了。Jeff Avallone 开发了一款 JavaScript 正则表达式可视化工具,是 GitHub 上的开源项目,它能够让正则表达式字符串以 Railroad 形式图形化,便于阅读和理解。
阅读全文
摘要:我们生活在一个视觉的世界里,被众多的视觉效果环绕。不管你是在电脑前还是在户外,我们接触大量的图片,颜色和字体等等。字体是视觉元素成功的重要因素之一,在网页设计图形设计中扮演者关键角色。字体大宝库系列文章今天给大家带来的是16款燃烧的火焰效果英文字体,可以免费下载使用。
阅读全文
摘要:你开始做一个项目的时候,用线框图把你的想法勾勒出来非常重要。这是你把想法变成际成果的必要步骤,通过绘制线框图原型才能决定怎么样做更合理。今天这篇文章收集了13款超级有用的优秀网页线框图工具分享给大家,这些工具能够帮助你做出优秀的线框图。
阅读全文
摘要:这是2012年度最佳 Photoshop 教程系列文章的第三篇,这些优秀的 Photoshop 教程教大家如何制作各种精美的文字特效。这些教程是从众多教程中精选出来的,如果你跟着教程一步一步的学些,能够学到很多新技术,例如照片特效处理,文字效果和绘图技巧等等,成为 Photoshop 高手。
阅读全文
摘要:纹理的使用非常广泛:网站,横幅,LOGO以及名片等很多场合都会使用。使用纹理的最大好处是能够帮助设计师节省大量的时间,不需要自己去制作图形。同时,纹理能够让你的设计项目更有趣,更有个性。下面是20个使用纹理的华丽的网站实例。
阅读全文
摘要:这篇文章收集了几张高清的2013年桌面日历壁纸,是全年类型的,供大家免费下载。桌面壁纸是电脑桌面所使用的背景图片,可以根据大小和分辨率来做相应调整。高清桌面日历壁纸让我们的电脑看起来更漂亮,更有个性,可以方便的查看星期和日历。
阅读全文