如何创建CSS3圣诞树装饰品

在本指南中，我们将展示CSS3在绘制复杂形状方面的强大功能。我们将只使用CSS3和HTML(没有图像)神奇地创建圣诞树装饰品。特别地，我们要画图装饰物这是圣诞树的标志性装饰。

请注意，这只是一个有趣的概念验证，探索CSS3的可能应用程序。如果您打算在生产环境中使用它，您应该知道我们将要创建的东西使用的W3C规范在许多浏览器(如IE6到IE8)中还没有或永远不会被支持。此外，必须更新标记以避免为空div元素。

• 视图演示
• 下载源

CSS成分

在我们开始之前，让我们快速浏览一下我们将使用什么。

1. :在而且:在伪元素：使用伪元素将帮助我们减少需要使用的不必要的HTML。如果你以前在CSS2中使用过圆角，你可能知道，为了产生灵活的圆角来适应各种大小的内容，你必须使用大量的空div之类的。通过使用这些元素，我们将有最少的标记。

   在这种情况下，只有一个空的div每个小玩意，如果你有进取心，你会填充一些文本内容。注意，这些伪元素在CSS2规范中。

2. CSS3线性和径向梯度：为了获得金属色填充和闪耀的小玩意，我们将使用颜色梯度。
3. 盒子阴影，变换，边界半径等:为了创建这些形状，我们将使用不必，变换,这个特性(适用于圆角)。

超文本标记语言

首先，让我们创建标记。正如您在下面可以看到的，这个结构非常小，只包含最少的必需标记。

因为地球仪需要是块元素，所以我选择了这样做< div >而不是< span >，但是，如果你不舒服，你可以使用< span >标签，然后使用显示:块CSS属性/值对。我把它们放在一个无序的列表中，因为我认为它们是一组没有特定层次结构的项目(例如。red-bauble不大于green-bauble)，因此，对我来说，无序列表的隐喻被保留了下来。

< ul id = "bauble-container"> 
 
 
 
 
 
 
 
 
 
 
 
  .

id /类说明:

1. # bauble-container是我们的无序列表，它将用于锁定列表项(<李>)，更具体。
2. .bauble是装饰的主要部分;球形。
3. .red-bauble，.blue-bauble，.yellow-bauble而且.green-bauble是用于添加颜色变化的类。它使我们的工作更加灵活，这样，如果你想要各种不同的组合，你就不会局限于我选择的颜色组合。例如，你可以有两个黄色的小玩意，也可以没有黄色的小玩意——这就是为什么我们使用类，而不是id。

CSS

以下是一些风格规则，它们将把我们上面无聊的无序列表变成一套神奇的圣诞树装饰品。

为了进行讨论，我在下面注释了CSS，以便您可以看到它是如何突出显示CSS的主要部分的。请注意，在生产环境中，您不希望样式表中有这么多注释，因为这太过分了，而且会增加样式表的文件大小。

/*一般*/HTML{背景:#f2f5f6;/*如果不支持渐变则返回背景颜色*/背景:-moz-linear-gradient(top， #f2f5f6， #c8d7dc);背景:-webkit-gradient(线性，左下，左上，颜色停止(0，#c8d7dc)，颜色停止(1，#f2f5f6));高度:100%;} #小容器{列表样式:无;/*删除项目*/宽度:568 px;Margin: 150px auto;/*居中*/填充:0;/*在生产环境中，如果你在全局样式表中重置你的样式，这可能不需要://www.psicolabor.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/ */} #小容器li {margin: 0 20px;/*让我们增加一些空间*/浮:左;/*将它们放在一行*/中｝/*这是添加圣诞装饰物的部分*/#小玩意容器li:before{内容:"";背景:#达达达;/*后退*/背景:-moz-linear-gradient(底部，#9c9c9c, rgba(255,255,255,0));Background: -webkit-gradient(线性，左下，右上，from(#9c9c9c)， color-stop(100%， rgba(255,255,255,0));高度:50 px;宽:2 px;显示:块;保证金:0自动;｝/*提醒旋转它们*/#小容器li:n -child(odd) {-moz-transform: rotate(-5deg);/* Firefox */-webkit-transform:旋转(5度);/* Chrome和Safari */-o-transform:旋转(5度);/* Opera */-ms-transform:旋转(5度);/ *惊喜!
IE9自带前缀*/} #小容器li:n -child(even) {-moz-transform: rotate(5deg);-webkit-transform:旋转(5度);-o-transform:旋转(5度);-ms-transform:旋转(5度);｝/*装饰小玩意*/.bauble {-moz-border-radius: 100px;border - radius: 100 px;-moz-box-shadow: 0 0 5px #777777;Box-shadow: 0 0 5px #777777;-webkit-box-shadow: 0 0 5px #777777;Border: 1px solid rgba(0,0,0,0.3);位置:相对;身高:100 px;宽度:100 px;｝/*样式的小玩意头*/.bauble:before{内容:"";背景:# fff;/*后退*/背景:-moz-linear-gradient(左，#fff， #9c9c9c， #fff， #9c9c9c);背景:-webkit-gradient(线性，左中心，右中心，从(#fff)，颜色停止(25%，#9c9c9c)，颜色停止(50%，#fff)，颜色停止(75%，#9c9c9c));-moz-border-radius: 2 px;border - radius: 2 px;-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2)， 0 -1px 0 rgba(255,255,255,0.3)插入;盒影:0 1px 0 rgba(0,0,0,0.2)， 0 -1px 0 rgba(255,255,255,0.3)插入;-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2)， 0 -1px 0 rgba(255,255,255,0.3)插入;边框:1px solid #dadada;高度:10 px;宽度:20 px; position: absolute; left: 50%; top: -12px; margin-left: -10px; }/*添加反光*/.bauble:在{内容:"";-moz-border-radius: 100 px;border - radius: 100 px;背景:# fff;/*后退*/背景:-moz-linear-gradient(底部，#fff, rgba(255,255,255,0.1));背景:-webkit-gradient(线性，左下，右上，从(#fff)，颜色停止(100%，rgba(255,255,255,0.1));位置:绝对的;上图:0;左:50%;margin-left: -40 px;透明度:0.15;身高:80 px;宽度:80 px;｝/*着色*/.red-bauble{背景:#c8171f;背景:-moz-radial-gradient(中心45度，圆形盖，#f9d0be， #c8171f);-webkit-gradient(径向，40% 40%，0,40% 40%，50，从(#f9d0be)，到(#c8171f));} .blue-bauble{背景:#00a1ee;/*后退*/背景:-moz-radial-gradient(中心45度，圆形盖，#cde6f9， #00a1ee);-webkit-gradient(径向，40% 40%，0,40% 40%，50,from(#cde6f9)， to(#00a1ee));} .yellow-bauble{背景:#fcb83d;/*后退*/背景:-moz-radial-gradient(中心45度，圆形盖，#fcf3a6， #fcb83d);-webkit-gradient(径向，40% 40%，0,40% 40%，50,from(#fcf3a6)， to(#fcb83d));} .green-bauble{背景:#4d8d00;/*后退*/背景:-moz-radial-gradient(中心45度，圆形盖，#d1e5b2， #4d8d00);-webkit-gradient(径向，40% 40%，0,40% 40%，50,from(#d1e5b2)， to(#4d8d00));｝

Web浏览器如何呈现CSS3的比较

那么我们的工作在不同的浏览器中是怎样的呢?让我们看一看，好吗?

Mozilla Firefox 3.6

谷歌Chrome 6.0.4

在谷歌Chrome中，你可能会注意到略有不同的色调，因为CSS3渐变渲染方式的差异。

Safari 5.02

Safari和Chrome中的装饰品几乎相同，因为它们使用相同的布局引擎(WebKit）.

Opera 10.63

虽然Opera浏览器支持大多数W3C CSS3规范，但由于缺少颜色梯度，因此它们降级为我们为背景属性。

IE9预览

IE9的行为类似于Opera，但关于这款浏览器的最新消息是，它将支持像WebKit这样的2D转换(有自己的供应商前缀，- ms -）.

IE8

即使IE8支持伪元素:在而且:在在美国，它完全缺乏CSS3支持，所以我们的小玩意看起来就像盒子。我把它放在这里只是为了让你看看我们的工作在不支持CSS3的浏览器中是如何退化的。它们看起来像软盘(链接，因为我们的年轻观众可能不知道这些古老的设备是什么)，所以它们可能适合一个极客家庭的圣诞树!

IE6和IE7不能参加我们的圣诞派对，原因众所周知:它们缺乏不仅仅是CSS3规范的支持，而且:在而且:在伪元素;所以我们在这两个浏览器中有四个不同颜色的方块。我希望你能受到启发了解CSS3在本指南中，你已经发现了一两个可以在你的项目中使用的技巧。祝你圣诞快乐，节日快乐!

相关内容

• 100个非常有用的CSS技巧和技巧
• CSS重置综合指南
• CSS3卡片戏法:一个有趣的CSS3实验