Skip to content

最新文章

16

高清精美壁纸:2013年3月桌面日历壁纸免费下载

  过完中国传统的农历新年,大家又开始奔波忙碌了。令人期待的2013年3月桌面日历壁纸新鲜出炉,供大家免费下载。高清日历桌面壁纸可以直接在桌面上看到某一天所对应的星期,并且还含农历哦,非常方便实用,赶紧为你的桌面换装吧!

您可能感兴趣的相关文章

 

2013年3月桌面日历壁纸——晶莹水滴

 

2013年3月桌面日历壁纸——甜美女生

 

2013年3月桌面日历壁纸——甜蜜生活

 

2013年3月桌面日历壁纸——靓丽美女

 

2013年3月桌面日历壁纸——可爱猫咪

梦想天空博客关注前端开发技术,展示最新HTML5CSS3应用,分享实用的jQuery插件,推荐网页设计案例。

 

2013年3月桌面日历壁纸——动物世界

 

2013年3月桌面日历壁纸——丰收季节

 

2013年3月日历桌面壁纸——思念的声音

 

2013年3月日历桌面壁纸——微笑在我心

 

2013年3月日历桌面壁纸——天使的翅膀

 梦想天空博客关注前端开发技术,展示最新HTML5CSS3应用,分享实用的jQuery插件,推荐网页设计案例。

 

2013年3月日历桌面壁纸——歌唱生活

 

2013年3月日历桌面壁纸——童话世界

 

本文链接:高清精美壁纸:2013年3月桌面日历壁纸免费下载

编译来源:梦想天空 (jizhula.com)◆ 关注前端开发技术 ◆

本文链接

原文来自:博客园-梦想天空

16

那些帮助你成为优秀前端工程师的讲座——《移动开发篇》

  这篇文章是前端优秀讲座和讨论列表系列连载第四篇,向大家分享宝贵的移动开发经验。前端领域发展迅速,只有时刻掌握前端发展趋势和技术动态,学习前沿的开发思想和理念才能让自己跟上时代的步伐,保持自己的技术优势。

 

《触屏设备中的滚动挑战》

Embracing Touch: Cross-Platform Scrolling, Mark Dalgleish (Video)

Mark Dalgleish 分享跨平台的出触屏滚动实现中的挑战和经验。

Screenshot

 

《Native, HTML5 和 Hybrid App 开发模式》

Native, HTML5 and Hybrid Mobile Development, Eran Zinman

Eran Zinman 分享原生、HTML5 和混合三种移动开发模式的差别。

Screenshot

 

《性能、分发和 Facebook 在 HTML5 上的实践》

On the Future of Mobile Web Apps, Simon Cross

Simon Cross 带领大家一起展望未来的移动 Web 应用。

Screenshot

 

《构建支持触摸的交互界面》

Creating Responsive HTML5 Touch Interfaces, Stephen Woods (Video | Audio)

Stephen Woods 向大家分享创建响应式的 HTML5 触摸交互界面经验。

Screenshot

 

《移动开发中的调试工具》

Mobile Debugging, Remy Sharp

在移动设备上调试 Web 应用一项艰苦的工作,Remy Sharp 分享他的宝贵经验。

 

《响应式设计技术》

Responsive Web Design: Clever Tips and Techniques, Vitaly Friedman

Vitaly Friedman 向大家分享响应式设计的技巧和技术。

Screenshot

 

 

本文链接:那些帮助你成为优秀前端工程师的讲座:移动开发篇

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接

原文来自:博客园-梦想天空

16

2012年最有用的50款 jQuery 插件集锦——《网页布局篇》

  2012年,众多的 jQuery 新插件发布出来,可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的,同时也是最有用的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。

您可能感兴趣的相关文章

 

Zoomooz.js

Zoomooz.js

Zoomooz.js 是一款易于使用的插件,能使任何网页元素放大,支持 3D 转换。使用示例:

$(document).ready(function() {
$(“#element”).click(function(evt) {
$(this).zoomTo({targetsize:0.75, duration:600});
evt.stopPropagation();
});
});

  插件下载     效果演示

 

equalize.js

equalize.js

equalize.js 是一款非常有用的 jQuery 插件,用于均分元素的宽度或者高度。使用示例:

$(‘.parent’).equalize(‘height’); // default, same as above
$(‘.parent’).equalize(‘outerHeight’);
$(‘.parent’).equalize(‘innerHeight’);
$(‘.parent’).equalize(‘width’);
$(‘.parent’).equalize(‘outerWidth’);
$(‘.parent’).equalize(‘innerWidth’);

  插件下载     效果演示

 

Wookmark

Wookmark

Wookmark 这款 jQuery 插件用于创建一个动态的多列布局。使用示例:

$(‘#myContent li’).wookmark({offset: 2});

  插件下载     效果演示

 

Freetile.js

Freetile.js

Freetile 能够帮助你把组织内容在一个高效,动态和响应的布局中。使用示例:

$(‘#container’).freetile({ animate: true, elementDelay: 30 });

  插件下载     效果演示

 

gridster.js

gridster.js

Gridster 用于实现建立直观的可拖动的横跨多个列的元素布局。使用示例:

$(function(){ //DOM Ready

$(“.gridster ul”).gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});

});

  插件下载     效果演示

 

Stellar.js

Stellar.js

Stellar.js 是一款非常优秀的 jQuery 视差滚动特效插件。使用示例:

// For example:
$(window).stellar();
// or:
$(‘#main’).stellar();

  插件下载     效果演示

 

turn.js

turn.js

turn.js 是轻量的 jQuery 杂志插件,基于 HTML5 技术实现。使用示例:

$(“#flipbook”).turn({
width: 400,
height: 300,
autoCenter: true
});

  插件下载     效果演示

 

jQuery HiddenPosition

jQuery HiddenPosition 可以让你放置任何元素,即使它们被隐藏。使用示例:

if($(‘#hiddenposition-a’).is(‘:not(:visible)’)) highlightOver($(‘#hiddenposition-a’));
if($(‘#hiddenposition-b’).is(‘:not(:visible)’)) highlightOver($(‘#hiddenposition-b’));
if($(‘#hiddenposition-of’).is(‘:not(:visible)’)) highlightOver($(‘#hiddenposition-of’));

  插件下载     效果演示

 

Responsive Measure

Responsive Measure

Responsive Measure 可以帮助你生成响应式设计中的字体的理想尺寸。使用示例:

$(‘section’).responsiveMeasure({
// Variables you can pass in:
idealLineLength: (defaults to 66),
minimumFontSize: (defaults to 16),
maximumFontSize: (defaults to 300),
ratio: (defaults to 4/3)
});

  插件下载     效果演示

 

jQuery Scroll Path

jQuery Scroll Path

压轴的 jQuery Scroll Path 是一款非常帮的自定义路径滚动插件。使用示例:

$.fn.scrollPath(“getPath”)
// Move to ‘start’ element
.moveTo(400, 50, {name: “start”})
// Line to ‘description’ element
.lineTo(400, 800, {name: “description”})
// Arc down and line to ‘syntax’
.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
.lineTo(600, 1600, {
callback: function() {
highlight($(“.settings”));
},
name: “syntax”
})
// Arc and rotate back to the beginning.
.arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: “end”});

// We’re done with the path, let’s initate the plugin on our wrapper element
$(“.wrapper”).scrollPath({drawPath: true, wrapAround: true});

  插件下载     效果演示

 

您可能感兴趣的相关文章

   

本文链接:2012年最有用50款 jQuery 插件:网页布局篇

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ jizhula.com

本文链接

原文来自:博客园-梦想天空

31

《前沿视点》——2013年最值得关注的网页设计流行趋势

  在过去的几年里,我们看到建设网站的方式发生了巨大的变化。随着浏览器对 HTML5/CSS3 Web 标准的支持的不断增强,越来越多的用户已经转移到移动平台。在设计界,有很多独特的想法,每隔一段时间就发生变化!

   在这篇文章中,我想介绍一些我们已经看到正不断变化的趋势。其中,许多设计理念已经存在了很长一段时间。但是,我认为在2013年里,这些独特的想法将会更加的蓬勃发展。网上提供了很多可以免费下载的开源项目和用户界面,这样设计人员可以专注于自己的领域。

移动优先的设计

  响应设计的理念并不仅仅只网站能够缩放到更小的尺寸,设计师的意识形态也应该发生改变。这里向大家推荐 DesignShack 上的一篇文章,其中谈到了这个想法。

  往往更容易规划最重要的界面元素,让他们排布成为一个移动的布局。如果这些元素不合适这样,你将不得不删除一些。同时,你可以规划布局将如何应对的窗口变大。您将有空间包含一个侧边栏,也可能是2个,以及许多其它的页面元素。

 

 

  A List Apart 上面有一本书叫《Mobile First它是由 Luke Wroblewski 编写的,他带来了很多和这里同样的想法。一次性制作移动优先的设计往往很困难,可以从小的尝试开始,慢慢改进。

  移动网站设计和响应式网站设计的优秀案例:

 

无限滚动

  许多社交媒体网站已经开始应用无限滚动效果到信息面板、时间线和用户订阅的内容里。这种效果是由于 Twitter 和 Tumblr 独特的布局风格而流行起来的,最近 Pinterest的 也在其主页上采用了这种无限的页面滚动。

 

  

  设计人员可能会问,为什么无限滚动非常有用?首先,它提供了一个无缝的界面,无需重新加载页面。但是,用户要为不同的页面生成永久链接就困难了,而这一切是真实存在的问题的,所以说并不是每一个网站都适合使用无限滚动。我觉得无限滚动最好的地方是,你可以不断加载信息而又不需要一个特定的分页样式。

  例如,博客归档文件就不合适使用无限滚动,因为读者可能会想直接进入到第15或25页,而不是向下滚动多次。但是 Tumblr 以及 Pinterest 却非常适合使用,因为这些信息是动态的,不断变化的,使用 Ajax 方式加载数据进来会让用户觉得更加舒服

空白和极简主义

  极简主义已经是讨论了很多年的话题了,早已经是网页设计的一部分,但是也在不断进化,以适应这个新的发展趋势。极简主义的设计能够让用户关注主要内容。但是,即使内容非常密集的网站,可以利用较小的区域中的空白以释放空间。

 

  

  另一个大的误解是,认为空白设计应该是白色的。但事实上黑色风格的布局也是有空白的,因此这个“空白”的意思其实应理解为“空的区域”。在页面中留下一些空间,让用户的视觉能够很好的分离内容,能够更容易消化内容,给用户留下美好的第一印象。

 

 

  下面向大家推荐一批非常优秀的简约风格网站作品案例,相信你能从中获得很多的设计灵感:

 

自然的设计元素

  CSS3 给网页设计领域带来了如此多的变化:通过 @font-face 可以载入更多自定义字体以及关键帧动画都展示出 CSS 更先进的功能。即使是最基本的 CSS3 属性已影响了自然的设计布局的使用。

  这些元素包括具有圆角,盒阴影以及背景渐变等等,在以前这些效果都是需要图片来实现的现在你完全可以只使用 CSS3 代码生成这些效果。2013年,将有更多使用图片的网页布局被 CSS 属性取代。

 

 

  我一直很喜欢 Dabblet 这个网站,它为每个新页面都使用了背景渐变效果。这个 WEB 应用程序可以和 GitHub Gist 框架结合使用,允许开发人员实现构建 HTML/CSS 原型。整个界面是基于 CSS3 实现,你可能会注意到在短短几年的时间,Web 领域已经发生了很大的变化。

大照片背景

  我以前向大家分享过很多大照片背景在网页设计中应用的案例,这种应用趋势并没有放缓。事实上,我看到更多的网站使用这种设计风格。这种网站的布局可以切合一个非常具体的感觉或情感上的颜色和背景样式。大照片是带给用户特殊情感的另外一种方式来。

  然而,我认为这种趋势不是适合每个人。正确的情况是,你的网页上有足够的空间,大的背景下能带给访客外形美观的视觉感受。最大的问题是要让布局适合内容,内容要清晰可读。这就是为什么大背景图片的最佳应用场景通常是在目标页(着陆页)或一些公司和机构的网站。

 

 

  这种独特的风格也非常适合用于设计作品集网站和个人网站,可以与你的访客提供一个更深层次的联系。在您的网站上的访客会好奇你是谁,你做了什么。提供一张照片,展示了一个简短的自我介绍,让访客知道你是谁,那将是非常不错的。大照片也可用于显示您的创造性工作,比如插画,矢量图片,甚至是你自己的照片。

  在网页中应用大图片作为背景的优秀案例:

 

简洁的源代码

  众多优秀的 CSS 框架让 Web 开发人员的编码时间大大缩短,这意味着在短短的几分钟内,使用合适的工具,你可以建立一个完整的两列或三列的网站布局。这也意味着使用更少的 HTML 标签就可以实现相同的效果。

  构建代码简洁的网站意味着一切都更精简,要少得多。这是好事,因为更小的文件尺寸意味着能更快的从服务器加载。另外,简洁的代码使得编辑布局的时候也能迅速而简洁,没有任何困难。多学习其他优秀的开发人员的经验,能够帮助你编写更优美的 HTML & CSS 代码。

 

 

  我向大家推荐的两个最好的资源——Github 以及 Stack Overflow。前者有很多开源的源代码,你可以下载并应用到实际的网站项目中。后者是一个非常有用的问答社区,开发者在上面互相寻求帮助。这些网站提供许多的好材料,帮助你编写干净,可读的代码。

写在最后

  每年的年初,我们一定都会发掘出一些网页设计领域的新模式和设计理念。网络让设计师们能够相互进行信息共享和技术讨论,不分技术水平的高低,进入网页设计领域不分早晚,现在就是最好的时代。

  我上面列举的这些趋势是对2013年网页设计领域的一些推测,并不一定每个都能在今年得到很好的传播和发展,让自己不落后的最好的办法积极关注新趋势,阅读最新的博客文章和教程,掌握最新的 Web 标准。此外,如果您有任何意见或建议,欢迎留言和大家一起交流。

 

本文链接:2013年最值得关注的网页设计趋势(译自:WDL

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接

原文来自:博客园-梦想天空

31

CSS3 经典教程系列:CSS3 阴影(text-shadow)详解

  《CSS3 入门教程系列》前一篇文章详细介绍了 border-radius 的用法,今天这篇文章我们在一起来看看 CSS3 中实现圆角效果 text-shadow 属性的具体用法。在以前,阴影效果一般都是做成图片,现在有了 CSS3 可以直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。

 

  text-shadow 曾经在 CSS2 中就出现过,但在 CSS 2.1版本中又被抛弃了,现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视,而且  CSS3 这么多属性中,我个人觉得 text-shadow 运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。

基本语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是:
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…

取值范围:

  <length>:长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值

  <color>:指定阴影颜色,也可以是rgba透明色

  <shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。

  如下图所示:

  

简单说明:

  可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

  浏览器的兼容性:

  

  我们来看个实例。首先给所有的DEMO一个公用的样式和类名:

.demo {
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px/100% “微软雅黑”, “Lucida Grande”, “Lucida Sans”, Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}

  接下来我们在每个Demo上加上自己特定的样式,分别如下所示:

.demo1 {
text-shadow: red 0 1px 0;
}

  

  效果是不错,可是让我们头痛的是IE是不支持text-shadow效果,但为了在兼容这一问题,我们只好使用滤镜filter:shadow来处理(本人不提倡使用滤镜)。filter:shadow滤镜作用与dropshadow类似,也能使用对象产生阴影效果,不同的是shadow可产生渐近效果,使用阴影更平滑实现。

  滤镜语法:

E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

  其中E是元素选择器,Color用于设定对象的阴影色;Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

  我们先不管IE下的效果了,我个人认为text-shadow运用好了,也能像photoshop一样制作出非常好的效果,下面我这里罗列出一些比较好看的实例以供大家参考

  注:下面所有的Demo需要加上这个公用的样式:

.demo {
background: #666666;
width: 440px;
padding: 30px;
font: bold 55px/100% “微软雅黑”, “Lucida Grande”, “Lucida Sans”, Helvetica, Arial, Sans;;
color: #fff;
text-transform: uppercase;
}

  效果一:Glow and Extra Glow effect(也就是NEON effect)

.demo2 {
text-shadow: 0 0 20px red;
}

  

  辉光效果,我们设置比较大的模糊半径来增加其辉光效果,你可以改变不同的模糊半径值来达到不同的效果,当然你也可以同时增加几个不同的半径值,创造多种不同的阴影效果。就如下面的NEON效果。

.demo3 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}

  

  效果二:Apple Style Effect

.demo4 {
color: #000;
text-shadow: 0 1px 1px #fff;
}

  

  效果三:Photoshop Emboss Effect

.demo5 {
color: #ccc;
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}

  

  效果二和效果三,我想用photoshop的朋友一定很熟悉,是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意,其模糊值一定要设置为0,使文本不具有任何模糊效果,主要用来增加其质感,你也可以像photoshop中制作一样,改变不同的投光角度,从而制作出不同的效果,这里我就不举例子了,感兴趣的朋友可以自己尝试一下。

  效果四:Blurytext Effect

.demo6 {
color: transparent;
text-shadow: 0 0 5px #f96;
}

  

  用text-shadow制作模糊的效果主要要注意一点就是,把文本的前景色设置为透明transparent,如果模糊值越大,其效果越糊糊;其二,我们不设置任何方向的偏移值。如果结合前面的photoshop emboss效果,可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。

  我们结合前面的Photoshop Emboss效果,我们可以制作出一个带有模糊的浮雕效果:

.demo7 {
color: transparent;
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
}

  

  效果五:Inset text effect

.demo8 {
color: #566F89;
background: #C5DFF8;
text-shadow: 1px 1px 0 #E4F1FF;
}

  

  这种效果需要注意以:文字的前景色要比背景色暗,阴影颜色稍比背景色亮一点点,这一步很重要,如果阴影色太亮看起来会怪,如果太暗将没有效果显示。具体实现可能看看stylizedweb的制作。Inset效果是文本的影子效果,也是常见的一种效果,阴影是同一个小偏移量给人一种微妙的突出效果。

  效果六:Stroke text effect

.demo9 {
color: #fff;
text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96;
}

  

  描边效果跟我们在Photoshop相比,我承认效果差很多,出现断点,但有时还是可以试用达到一种特殊的描边效果,其主要运用两个阴影,第一个向左上投影,而第二向右下投影,还需注意,制作描边的阴影效果我们不使用模糊值。

  效果七:3D text effect

.demo10 {
color: #fff;
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
}

  

  我们换过投影方向可以制作出另外一种3D文字效果:

.demo11 {
color: #fff;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
}

  

  3D文字效果运用原理就是像Photoshop一样,我们在文字的下方或上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作出3D效果。同时我们层数越多,其越厚重。换成用text-shadow制作就是使用多个阴影,并把阴影色设置相同,给其使用rgba色效果更佳,如上面的实例。

  效果八:Vintge/Retro text effect:

.demo11 {
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
}

  

  Vintage retro这种风格的文字效果是由两个文本阴影合成的,这里需要注意的是:第一个阴影色和背景色相同;文本前景色和第二个阴影色相同

  效果九:Anaglyphic text effect

.demo13 {
color: rgba(255, 179, 140,0.5);
text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
}

  

  anaglyphic文字效果起到一种补色的效果,从而制作出一种三维效果图。其效果是用css重新使用的文字阴影和文本前景的rgba色组合而成。在文本的前景色和阴影上同时使用rgba色,使底层的文字是通过影子可见。

  上面我主要列出了九个不同效果的实例,当然大家可以改变各种方式制作出一些特殊的效果,也再一次证实CSS3中的text-shadow实力是不浅的,希望大家能喜欢上这个属性,并能更好的使用这个属性。虽然现在IE不支持,但大家不要惧怕使用CSS3,因为我们做前端的迟早都会需要掌握这些新技术的。

您可能感兴趣的相关文章

 

本文链接:CSS3入门教程:CSS3阴影详解(整理自:W3CPLUS

编译来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

本文链接

原文来自:博客园-梦想天空

31

JavaScript 项目构建工具 Grunt 实践:合并文件

   Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。上一篇文章《Grunt:基于任务的 JavaScript 项目构建工具》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍如何使用 Grunt 合并文件。

 

  

 

  Grunt 内置 concat(文件合并)、lint(代码校验) 和 min(代码压缩) 任务,在 grunt.js 文件配置好任务后,运行 grunt 命令就可以自动完成一系列的项目构建操作了,如图示:

 

  

 

  对应的 Grunt 配置文件代码如下:

/*global module:false*/
module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: ‘<json:GruntDemo.jquery.json>’,
meta: {
banner: ‘/*! <%= pkg.title || pkg.name %> – v<%= pkg.version %> – ‘ +
‘<%= grunt.template.today(“yyyy-mm-dd”) %>\n’ +
‘<%= pkg.homepage ? “* ” + pkg.homepage + “\n” : “” %>’ +
‘* Copyright (c) <%= grunt.template.today(“yyyy”) %> <%= pkg.author.name %>;’ +
‘ Licensed <%= _.pluck(pkg.licenses, “type”).join(“, “) %> */’
},
concat: {
dist: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'],
dest: ‘dist/<%= pkg.name %>.js’
}
},
min: {
dist: {
src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
dest: ‘dist/<%= pkg.name %>.min.js’
}
},
qunit: {
files: ['test/**/*.html']
},
lint: {
files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']
},
watch: {
files: ‘<config:lint.files>’,
tasks: ‘lint qunit’
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
jQuery: true
}
},
uglify: {}
});

// Default task.
grunt.registerTask(‘default’, ‘lint qunit concat min’);

};

  这篇文章先介绍 concat 任务,后面几个任务将会在随后的文章陆续介绍。

Grunt 合并文件

  Grunt 内置的 concat 任务用于合并一个或者多个文件(或者指令,例如<banner>指令)到一个文件。concat 任务的项目配置框架:

// 项目配置
grunt.initConfig({
// 项目元数据,用于 <banner> 指令
meta: {},
// 将要被合并的文件列表
concat: {}
});

  基本用法

  把 src 目录下的 intro.js、projject.js、outro.js 三个文件合并到 built.js 文件并存放在 dist 目录,配置示例:

grunt.initConfig({
concat: {
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: ‘dist/built.js’
}
}
});

  添加注释

  还可以通过 <banner> 指令在合并文件中添加注释,例如包名、版本、生成时间等,示例代码:

grunt.initConfig({
pkg: ‘<json:package.json>’,
meta: {
banner: ‘/*! <%= pkg.name %> – v<%= pkg.version %> – ‘ +
‘<%= grunt.template.today(“yyyy-mm-dd”) %> */’
},
concat: {
dist: {
src: ['<banner>', '<file_strip_banner:src/project.js>'],
dest: ‘dist/built.js’
}
}
});

  多个构建目标

   在实际项目中,往往需要根据模块生成多个目标文件,例如基础模块和插件模板分开打包,配置示例:

grunt.initConfig({
concat: {
basic: {
src: ['src/main.js'],
dest: ‘dist/basic.js’
},
extras: {
src: ['src/main.js', 'src/extras.js'],
dest: ‘dist/with_extras.js’
}
}
});

  动态文件名

  Grunt 合并任务还可以生成动态的文件名,

grunt.initConfig({
pkg: ‘<json:package.json>’,
dirs: {
src: ‘src/files’,
dest: ‘dist/<%= pkg.name %>/<%= pkg.version %>’
},
concat: {
basic: {
src: ['<%= dirs.src %>/main.js'],
dest: ‘<%= dirs.dest %>/basic.js’
},
extras: {
src: ['<%= dirs.src %>/main.js', '<%= dirs.src %>/extras.js'],
dest: ‘<%= dirs.dest %>/with_extras.js’
}
}
});

  配置好以后,运行下面的命令就可以进行文件合并操作了:

grunt concat

  合并后的代码示例如下:

/*! Gruntdemo – v0.1.0 – 2013-01-22
* https://github.com/dreamsky/grunt-demo
* Copyright (c) 2013 Andy Li; Licensed MIT */

(function($) {

// Collection method.
$.fn.awesome = function() {
return this.each(function() {
$(this).html(‘awesome’);
});
};

// Static method.
$.awesome = function() {
return ‘awesome’;
};

// Custom selector.
$.expr[':'].awesome = function(elem) {
return elem.textContent.indexOf(‘awesome’) >= 0;
};

}(jQuery));

您可能感兴趣的相关文章

 

本文链接:Grunt:基于任务的 JavaScript 项目命令行构建工具

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接

原文来自:博客园-梦想天空

31

20套华丽的应用程序图标,带给你不一样的视觉体验

  选择最佳的应用程序图标集对于 Web 应用来说非常重要的。这些图标必须遵循所有的视觉体验指导方针,必须适合整体设计,能够帮助简化交互和导航。你必须避免使用有歧义的图标,以免使用户无法了解他们的行动,因为这可能会让用户在使用应用的过程中遇到很多的挫折,并最终关闭或删除应用程序。

 

  在这篇文章中,我已经收集了20个华丽的图标集,适用于几乎任何类型的设计。这些图标有一个干净的和描述性的外观,同时遵循良好的设计原则,相信你会喜欢。

Delicious Berries

17. icons

33 Free Social Media Icons

4. icons

Jigsoar icons

18. icons

Metro Icons for Icon Packager

12. icons

Pace Social Icon Set

19. icons

Retro Candy

11. icons

Premium Pixels Icon Set

20. icons

Yummygum

10. icons

Mono Icons

9. icons

Social Postage Stamps

8. icons

Icons metro style

13. icons

Social Media Badge Icons

7. icons

梦想天空博客关注前端开发技术,展示最新HTML5CSS3应用,分享实用的jQuery插件,推荐网页设计案例。

Socialis 2

6. icons

WhistlePuff Desktop Set

5. icons

Metro Games Icons

14. icons

Glyphicons

15. icons

Token by Brsev

3. icons

梦想天空博客关注前端开发技术,展示最新HTML5CSS3应用,分享实用的jQuery插件,推荐网页设计案例。

789 Modern Metro Style UI Icons

2. icons

Geomicons

您可能感兴趣的相关文章

 

本文链接:20套华丽应用程序图标,带给你不一样的视觉体验

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

原文来自:博客园-梦想天空

31

CSS3 经典教程系列:CSS3 圆角(border-radius)详解

  《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。

  以前制作圆角效果,我们都需要使用多张圆角图片做为背景分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,非常繁琐。

 

  现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。

  既然 border-radius 有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?有这么多,那我们就开始吧:

基本语法:

  border-radius : none | <length>{1,4} [/ <length>{1,4} ]?

取值范围:

  <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

简单说明:

  border-radius 是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

  1、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

  2、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值

  3、有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

  4、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

  前面,我们主要看了 border-radius 的缩写格式,其实 border-radius 和 border 属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:

border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左下角

  这里说一下,各角拆分出来取值方式:<length> <length> 中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。

  border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,我们看看 border-radius 在不同内核浏览器下的书写格式:

  1、Mozilla(Firefox, Flock等浏览器)

-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角

  等价于:

-moz-border-radius: //简写

  2、WebKit (Safari, Chrome等浏览器)

-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角

等价于:

-webkit-border-radius: //简写

  3、Opera浏览器:

border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角

等价于:

border-radius: //简写

  4、Trident (IE)

  IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的,这里就不在重复。

  为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性,那么我们在具体应用中时需要把我们的 border-radius 格式改成:

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

  其拆分开来的格式相应需要加上 -moz 和 -webkit,上面的代码其实就等价于下面的代码:

-moz-border-radius-topleft: <length> <length> //左上角
-moz-border-radius-topright: <length> <length> //右上角
-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角

  另外需要特别注意的是,border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在 border-radius 前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

  我们初步来看一个实例,HTML代码:

<div class=”demo”></div>

  为了更好的看出效果,我们给这个demo添加一点样式:

.demo {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}

  注:如无特殊声明,本文实例所有基本代码格式如上所示,只在该元素上添加border-radius属性设置。

.demo {
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

  这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL(上右下左)的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:

.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}

  不仿看看他们的效果:

  

  三、支持的浏览器:

  

  上面我们介绍了border-radius的基本用法,以及在各大浏览器下的格式等,下面我们通过实例来介绍其具体的用法:

  一:border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:

.demo {
border-radius: 10px;
}

其等价于:

.demo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

  效果:

  

  二:border-radius设置两个值,此时top-left等于bottom-right并且他们取第一个值;top-right等于bottom-left并且他们取第二个值,也就是说元素 左上角和右下角相同,右上角和左下角相同

.demo {
border-radius: 10px 20px;
}

  等价于:

.demo {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}

  效果:

  

  三:border-radius设置三个值,此时top-left取第一个值,top-right等于bottom-left并且他们取第二个值,bottom-right取第三个值:

.demo {
border-radius: 10px 20px 30px;
}

  等价于:

.demo {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 30px;
}

  效果:

  

  四:border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值:

.demo {
border-radius:10px 20px 30px 40px;
}

  等价于:

.demo {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}

  效果:

  

  从上面四个实例中我们可以看出border-radius和border取值非常相似,我们border遵循TRBL原则(从上边右边下边左边分别对应1、2,3,4四个值),只不过border-radius换成了左上角(top-left)对就值1,右上角(top-right)对应值2,右下角(bottom-right)对应值3,左下角(bottom-left)对应值4.

  上面四个实例都是水平和垂直半径相等情况下border-radius的应用,下面我们来看几个水平和垂直半径值不一样的实例:

  一、border-radius: 水平 / 垂直:只设置一个水平和一个垂直半径时,那么水平半径分别指定了元素个四个角的水平半径值,同样垂直半径指定了元素的垂直半径值,此时四个角具有相同的效果,因为他们具有相同的值:

.demo {
border-radius: 10px / 20px;
}

  等价于: 

.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
} 

  效果:

  

  此时我们每个角不在是四分之一圆了,前面我们也说过,只有水平和垂直半径值相同时,他们才具有四分之一圆特性,这样一来,我们可以改变不同的半径值,制作一些特殊的图形效果,感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。

  二、border-radius: 水平1 水平2 / 垂直1  垂直2:设置了两个水平值和两个垂直值,此时我们top-left和bottom-right具有相同的水平和垂直半径,也就是其中的水平1和垂直1;而top-right和bottom-left也具有相同的水平和垂直半径值,也就是水平2和垂直2,我们他拆分出来就是:

border-top-left-radius: 水平1 垂直1;
border-bottom-right-radius: 水平1 垂直1;
border-top-right-radius: 水平2 垂直2;
border-bottom-left-radius: 水平2 垂直2;

  具体我们来看下面的实例:

.demo {
border-radius: 10px 20px / 20px 10px;
} 

  等价于:

.demo {
border-top-left-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-top-right-radius: 20px 10px;
border-bottom-left-radius: 20px 10px;
}

  效果:

  

  上面两种都是相互对应的取值,我们来看一个实例,水平有三个取值,而 垂直只有两个取值:

.demo {
border-radius: 10px 20px 30px / 50px 60px;
}

  等价于:

.demo {
border-top-left-radius: 10px 50px;
border-top-right-radius: 20px 60px;
border-bottom-left-radius: 20px 60px;
border-bottom-right-radius: 30px 50px;
}

  效果:

  

  我们从上面等价代码中可以知道,不管他们怎么取值,“/”前后各自按TRBL顺序取值。

  上面几种都是我们常见的一些应用,那下面我们来看几种特殊点的应用:

  一、对于border-radius还有一个内半径和外半径的区别,它主要是元素 边框值较大时,效果就很明显,当我们border-radius半径值小于或等于border的厚度时,我们边框内部就不具有圆角效果,例如下面的实例:

.border-big {
border: 15px solid green;
border-radius: 15px;
}

  效果:

  

  我们接着上面这个例子,把 border-radius半径值改成比边框值大一点:

.border-small {
border: 15px solid green;
border-radius: 25px;
}

  效果:

  

  为何当border-radius的半径小于元素边框的厚度时,内部没有圆角效果?我在这里说一下,因为我们的border-radius的内径值是等于外径值减去边框厚度值,当他们的值为负时,内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时,我们内外曲线的圆心才会在同一位置。

  二、如果角的两个相邻边有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

.demo {
border-width: 10px 5px 20px 3px;
border-radius: 30px;
}

  效果:

  

  三、相邻两条边颜色和线条样式不同时,那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样,宽度不一样的实例:

.demo {
border-color: red green blue orange;
border-width: 15px 30px 30px 80px;
border-radius: 50px;
}

  效果:

  

  上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里

  border-radius能应用在各种元素中,但在img和table应用时会有点差别的,首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常,而在其他浏览器都不能对图片进行剪切,我们先来看一个实例:

img {
border: 5px solid green;
border-radius: 15px;
}

  我们来看其在各浏览器下的效果:

  

  左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果,我们可以看得出,图片根本就没有圆角效果,右图是在Firefox4.0下的效果,低于这个版本的和左图一样效果,如果需要达成一致效果,大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

table {
border-collapse: collapse;
border: 2px solid red;
background: green;
border-radius: 15px;
}

  效果:

  

  关于表格的demo可以查看这里

  那么到此,我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助,感兴趣的朋友可以观注本站后面的内容,我们下节将介绍CSS3中的文本阴影(text-shadow)的用法。更希望感兴趣的朋友一起探讨和学习 CSS3 更多的技术知识。

您可能感兴趣的相关文章

 

本文链接:CSS3入门教程:CSS3圆角详解(整理自:W3CPLUS

编译来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

本文链接

原文来自:博客园-梦想天空

31

谈谈构建单页布局网站的创意技术——附优秀案例

  在过去的几年中,不断涌现出新的自定义网站设计技术。一个非常流行的想法是把所有的主要内容放在一个页面,使用动态滚动动画来定位内容,这种单页布局在只需要显示相关信息的一小部分的目标网页和移动应用程序制作网站经常使用。

您可能感兴趣的相关文章

 

  在这篇文章中,我想向大家介绍单页网站中一些有趣的技术。希望这些想法能够给正在寻找这方面内容的年轻设计师提供灵感。

视差滑动效果

  可能是因为实现这种效果比较复杂,视差滚动的概念对于很多设计师来说仍然是相当陌生。我看到过众多优秀的例子,例如像 Pixel Stadium 这样的杰出代表,这个网站易于浏览,纹理也是让人眼花缭乱。

 

像素体育场网站的布局设计界面

 

  当你向下滚动页面的时候,顶部导航栏会出现并锁定到窗口,这使得用户可以快速跳过或转换页面到不同的部分。布局是完全响应式设计的,会自适应浏览器窗口的宽度!这一切都说明,单页的布局可能会非常好看,也很灵活。

移动应用程序着陆页面

  Android 和 iOS 应用程序开发人员知道,推出品牌对于自己的营销努力是至关重要的。这就是为什么更小的移动应用程序的网站包含的信息通常设在一个页面上。它花费更少的精力而且效果看起来也好多了。

 

Infomatic应用程序iphone网站布局singlepage的

 

  这个网站采用了相当简约的布局,没有很多细节。大部分的设计是围绕应用程序的屏幕截图,环绕着 App Store 的徽章按钮。您想促进销售的话,使用单页布局是实现这个目标最好的布局风格。

隐藏的导航栏

  为了在在屏幕上节省空间,网站的导航条只有在滚动条滚动一定的距离,头部的内容看不到了之后才出现。网站 Radiologie 为这种技术提供了一个很好的示范。

 

Radiologie网站单页面滚动工具栏资产净值

 

  让当前的导航栏和网站的主题匹配是很好的做法,但是,因为它会在页面上保持固定,理论上你可以使用任意数量的设计风格。我想一个更好的例子是 Rule of Three

 

网站英国singlepage布局规则

 

  他们的网站是专注于一个撰稿人行业协会的专业人士,使用暗色风格纹理,配色方案也符合版面设计。当你向下滚动页面,你会发现导航链接固定在顶栏,这是一个很好的解决方案。

动态转换效果

  创建自己的动态页面动画的过程很复杂的。我不建议刚开始使用 JavaScript 的开发者走这条道路,但它可以是一个很好的学习经验。看一个例子:FK-Agency website

 

FK局网站单页面布局风格动画

 

  这个网站是可以同时在垂直和水平方向扩展。请注意,你不能在布局上/下翻页,必须滑动导航链接。在某些类似的服务和作品集网站中也会这种设计,你必须水平方向上滚动页面。对于一些访客,这种技术会让他们困惑,所以要小心使用。

水平滑动板

  这种技术和动态过渡风格是非常相似的,但水平滑动效果只要通过谷歌搜索就能找到很多的开源插件可以实现因此这种效果相比上面几种更简单。下面是我很喜欢的一个网站例子。

 

努米底亚网页响应的网页布局

 

优秀作品案例

  这里收集的单页网站非常值得关注,都是单页面布局的优秀作品。可以验证上面这些观点,为设计师提供更多的帮助。这些网站使用不同的布局,你会发现各种各样的不同的用户界面技术。另外,请记得给个评论,让我们知道您的想法。

Teamgeek

team geek website interface webdesign single pages

Funny Faces Camera

iphone app website funny faces design

Dash Creative

creative designs gallery icons dash agency portfolio

 

Kinderfotografie

german photography website single page layout

 

Lost Phone Experiment

parallax website sliding scrolling content webdesign

 

Marketing Facts

html5 info webpage single layout design

State of the Economy

state survey united states economy facts

Touch Gesture Icons

mobile touch icons website scrolling

Pipeline

pipeline website single page static top toolbar

 

 

Laymon

laymon cooking website parallax scrolling design interface

AxiaCore

django development projects freelance business axiacore

Ideakites

iphone android ios app development studio website agency

Jmore Design

jmore design website layout interface inspiration single-page

ngage

fixed ngage scrolling website layout design

M.dot App

mdot studio website design single page website

Creative9

space design website infinite scrolling singlepage

Mirrool Creek Lamb

mirrool creek website design interface layout

Startup Giraffe

vectors circles website design singlepage studio startups

Rate Us

rateus website layout scrolling inspiration single-page

Mitchell ME

 

您可能感兴趣的相关文章

 

本文链接:构建单页面布局网站的创意技术——附优秀案例展示

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

原文来自:博客园-梦想天空

31

CSS3 经典教程系列——CSS3 RGBA 用法详解

  CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生,他就是 Red(红色) Green(绿色)和 Blue(蓝色),那么现在我们所说的 RGBA 又是什么呢?

 

  RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)的色彩空间。虽然它有的时候被描述为一个颜色空间,但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说,大家就跟着我一起往下看吧。

基本语法:

  R:红色值。正整数 | 百分数

  G:绿色值。正整数 | 百分数

  B:蓝色值。正整数| 百分数

  A:透明度。取值0~1之间

取值区间:

  <length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

  <percentage> :Saturation(饱和度)。 取值为0%到100%之间的值;

  <percentage> :Lightness(亮度)。 取值为0%到100%之间的值;

  <opacity> :alpha(透明度)。 取值在0到1之间;

简单说明:

  RGB 色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

  RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 – 255。百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。

  浏览器的兼容性:

  

  如果庞统说 RGBA 是制作透明色(透明背景色、透明边框色、透明前景色等),大家不由会想起 opacity 这个东西。他在我们 CSS2 中制作背景色通常用到,可是要用他来制作边框色或都说前景色的话,那他就只能在边上站着了,有心无力呀。

  现在我们先来看一个 RGBA 和 Opacity 的对比实例,HTML 代码:

<div class=”example-opacity”>
<p>Opacity效果</p>
<ul>
<li class=”opacity opacity1″>100%</li>
<li class=”opacity opacity2″>80%</li>
<li class=”opacity opacity3″>60%</li>
<li class=”opacity opacity4″>40%</li>
<li class=”opacity opacity5″>20%</li>
<li class=”opacity opacity6″>0</li>
</ul>
<p>CSS3的RGBA效果</p>
<ul>
<li class=”rgba rgba1″>1</li>
<li class=”rgba rgba2″>0.8</li>
<li class=”rgba rgba3″>0.6</li>
<li class=”rgba rgba4″>0.4</li>
<li class=”rgba rgba5″>0.2</li>
<li class=”rgba rgba6″>0</li>
</ul>
</div>

  我们分别给这两上 ul 中的 li 应用相关样式, 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。

  Opacity样式

li.opacity{
float: left;
width: 50px;
height: 50px;
}
li.opacity1 {
background: rgb(255,255,0);
opacity: 1;
filter:alpha(opaity=100);
}
li.opacity2 {
background: rgb(255,255,0);
opacity: 0.8;
filter:alpha(opaity=80);
}
li.opacity3 {
background: rgb(255,255,0);
opacity: 0.6;
filter:alpha(opaity=60);
}
li.opacity4 {
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opaity=40);
}
li.opacity5 {
background: rgb(255,255,0);
opacity: 0.2;
filter:alpha(opaity=20);
}
li.opacity6 {
background: rgb(255,255,0);
opacity: 0;
filter:alpha(opaity=0);
}

  RGBA样:

li.rgba {
float: left;
width: 50px;
height: 50px;
}
li.rgba1 {
background: rgba(255,255,0,1);
}
li.rgba2 {
background: rgba(255,255,0,0.8);
}
li.rgba3 {
background: rgba(255,255,0,0.6);
}
li.rgba4 {
background: rgba(255,255,0,0.4);
}
li.rgba5 {
background: rgba(255,255,0,0.2);
}
li.rgba6 {
background: rgba(255,255,0,0);
}

  我们来看看其效果:

  

  效果中我们可以看出,他们相同之处就是背景色完全是一样的,但区别就是一直让大家觉得头痛的问题,那就是 Opacity 后代元素会随着一起具有透明性,所以我们 Opacity 中的字随着透明值下降越来越看不清楚,而 RGBA 不具有这样的问题,但是其支持的浏览器中有一个占在大市场份额的 IE 不支持,这也就是让我们需要去做兼容,(听到兼容二字大家是不是特烦,我也是的)希望 IE 早点能实现。

  在 CSS2 中 Opacity 能实现透明,而且大多主流浏览器都支持,虽然 IE 下有点麻烦:

/* IE5 – 7 */
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
/* Everyone else */
opacity: 0.8;

  那为什么不使用 Opacity 而要使用 RGBA 呢?

  从我们上面的实例中我们也知道,RGBA 比元素设置 CSS 的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

  在 RGBA 还没有出世前,我们都是使用 Opacity 来做透明,但这里存在一个问题,就是我们在父元素中使用了 Opacity,那么其垢代元素都会受其影响,我想这个问题大家都有碰到过,为了解决这样的问题我们需要增加一个空的 div 来专门放置使用透明的背景,然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用 Opacity 的实例。首先来看 HTML:

<div class=”bg-box”>
<div class=”bg”>
<div class=”bg-content”>
<p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
</div>
</div>
</div>

  先给他们附上相应的样式:

.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opaity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}

.bg p {
padding: 5px 10px;
color: white;
}

  效果:

  

  从效果中我们明显的看出,这里和我们前面那个例子一样,名叫 bg 的 div 中设置了Opacity,造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题,在不使用别的新技术下,也就是说坚持使用 Opacity。那么我们就需要添加一个空的层,在这个地方应用透明背景层首先来看看改变一下 HTML 结构吧

<div class=”bg-box”>
<div class=”bg”> </div>
<div class=”bg-content”>
<p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
</div>
</div>

  现在我们需要提把 bg-content 和 bg 层重合起来,换句话说就是把透明背景层单独放在另外一个 div,然后把内容层和背景层重叠。换而言之,我们需要在 bg 这个 div 上设置透明色,而在 bg-content 这个 div 上放置内容,并且都使用定位,保证 bg 这个 div 在 bg-content 这个 div 下面。具体看看其 CSS 的变化:

.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opaity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.bg-content p {
padding: 5px 10px;
color: white;
}

  首先我们在 HTML 中把 bg 这个 div分 离出来了,让他和 bg-content 这个 div 变成兄弟关系,然后通过 CSS 把他们都定位在同一位置,只是 bg 放在了 bg-content 的下面(z-index)控制,另外在 bg 的 div 上应用了透明。看看这样一来我们有什么变化,效果如下:

  

  跟没有处理之前相比是不是完美多了。可是这样弄就是有一点麻烦,现在 CSS3 的 RGBA 完全可以帮大家解决这样的问题了,接着我们在看一个用 RGBA 制作的效果吧,看看他是不是完全一样的。

  HTML代码:

<div class=”bg-box”>
<div class=”bg-content”>
<p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
</div>
</div>

  我们只要在 bg-content 中应用一个 background:rgba(); 就能有上面那种效果了,具体看看代码吧:

.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0,0.5);
}
.bg-content p{
padding: 5px 10px;
color: white;
}

  效果:

  

  从效果的对比中我们可以明显的看出,和 Opacity 做出的效果是完全一样的。但是这里有一个问题是我们讨厌的IE(除IE9以外)都不支持 CSS3 的 RGBA 属性。

  那么这样我们在 IE 下不是什么都没有吗?回答是肯定的,虽然 IE 不支持但我们不能什么都不给他呀,这样一来我们就碰到一个新名词”fallback color“,它的意思是我给IE备份一个色,在不支持 RGBA 的情况下,我照样给他一个色,而对 RGBA 支持的浏览器并不会带来影响,那我们一起看看这个fallback color怎么用吧。

  其实很简单,我们可以给其制作一张图片或都只给其加一个色,我们这些就只加一个色吧拿前面的实例来说吧,我们只要把 bg-content 的样式换一下:

.bg-content {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: rgb(0,0,0); /*The Fallback color*/
background: rgba(0, 0, 0,0.5);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)”; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
}

  这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。如果你和我一样不知道怎么转换这个值,你可以采用下面这个工具:CSS背景颜色属性值转换 有关于这个工具的使用大家可以点击志哥的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》,关于RGBA-IE-FALLBACK更多的知识可点击这里进入。

.rgba {
background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
background: rgba(0, 0, 0,0.5);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)”; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
}

  上面代码中的颜色值可以根据自己的需求修改,此处只是一个代表性的值。

  我们前面简单的带过一句,我们 RGBA 不单可以应用在 background 上,我们还可以应用在只要设置了颜色的地方都可以使用,我在这里简单的说一下几种:

  第一种:前景色color

  HTML:

<p class=”norgba-color”>用rgba改变我的字体颜色</p>
<p class=”rgba-color”>用rgba改变我的字体颜色</p>

  CSS样式:

.norgba-color {
color: rgb(255, 0, 0);
}
.rgba-color {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0,0.5);
}

  效果:

  

  第二种边框色border-color

  HTML:

<p class=”norgba-border-color”>用rgba改变我的边框颜色</p>
<p class=”rgba-border-color”>用rgba改变我的边框颜色</p>

  CSS样式:

.norgba-border-color {
border:5px solid rgb(255,0,0);
width: 200px;
}
.rgba-border-color {
border:5px solid rgb(255,0,0);
border:5px solid rgba(255,0,0,0.5);
width: 200px;
}

  效果:

  

  第三种:字体的阴影色text-shadow

  HTML:

<p class=”norgba-text-shadow”>用rgba改变我的字体阴影颜色</p>
<p class=”rgba-text-shadow”>用rgba改变我的字体阴影颜色</p>

  CSS:

.norgba-text-shadow {
text-shadow : 0 2px 1px rgb(255,0,0);
}
.rgba-text-shadow {
text-shadow : 0 2px 1px rgb(255,0,0);
text-shadow : 0 2px 1px rgba(255,0,0,0.3);
}

  效果:

  

  第四种改变边框阴影色

  HTML:

<p class=”norgba-box-shadow”>用rgba改变我的边框阴影颜色</p>
<p class=”rgba-box-shadow”>用rgba改变我的边框阴影颜色</p>

  CSS:

.norgba-box-shadow {
border: 5px solid green;
width: 200px;
-webkit-box-shadow: 0 2px 2px rgb(255,0,0);
-moz-box-shadow: 0 2px 2px rgb(255,0,0);
box-shadow: 0 2px 2px rgb(255,0,0);
}
.rgba-box-shadow {
border: 5px solid green;
width: 200px;
-webkit-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
-moz-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
box-shadow: 0 2px 2px rgba(255,0,0,0.6);
}

  效果:

  

  最后需要告诉大家的一点,这几种使用 RGBA 的方法,目前只有在支持 RGBA 属性的浏览器才能正常显示,如果需要使用的朋友,请考虑这方面的显示差别。那么到这里关于 CSS3 的 RGBA 我就介绍完了,希望能给大家的学习带来一定的帮助,更希望志同道合的朋友一起探讨一起学习一起进步。

深入阅读

 

 

本文链接:CSS3 入门教程:CSS3 RGBA(整理自:W3CPLUS

编译来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

本文链接

原文来自:博客园-梦想天空