整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于任何网站而言，配色方案都是其中最关键的影响因素之一。你可以使用你所熟悉的配色方案，也可以跳出来选择更加大胆、明快、更有性格的配色方案，它们或许更容易给人留下深刻的印象。
而今天我们要说的，是黄色。作为暖色调，黄色象征能量，带来温度，充满生命力，它可以让你的网站看起来更具有亲和力，舒适而温馨。毫无疑问，黄色色调的网站设计大多都非常的醒目，让人难以忽视。
但是同时，它也是一个不容易掌控的颜色，一个不小心可能会毁掉网站的整个设计。所以，你需要清楚地了解黄色的运用手法——比如先看看那些设计优秀的网站是怎样使用大面积黄色色调的。在黄色作为主色调/背景色的时候，文字内容如何展现，各种控件如何使用，这些都值得学习。
明快的黄色和动感的舞蹈有着天然的契合度，这也是为什么瑞士城市舞蹈学院选择使用黄色作为网站的主色调。为了确保网站内容的识别度，设计师采用的是黄黑搭配。
拥有韩国血统的摄影师JamesTupper 也在设计他的作品展示页的时候选择了黄色作为主色调。 在字体配色上，他同样选取了黑色。
YAY 是一个平面设计类的合集网站，黄黑的配色使得文字内容无比的醒目。
黄色的色调和其他的色彩也可以很好的搭配，重要的是控制好对比度，这里的插画的色调控制就非常合理，不会太深，但是和背景的黄色形成了很好的对比。
这是一位来自英国剑桥、获得过不少奖项的设计师的个人作品网站。网站设计大气，但是它最大的特色是交互，无论你是在桌面端、平板还是手机上访问，交互的丰富度都非常的强。
Croscon 是一个植根于设计和数字制造业的定制化软件，网站的配色主色调黄色使用了黑色和白色来做搭配。
Vivedmv 的网站所用的黄色饱和度相对较低，看起来也更加复古，搭配上复古的字体、图形元素，整体的氛围非常的一致。
这个网站在功能开发和内容策略上达到了一个不错的平衡，在色调的搭配上也很好的体现出了设计、开发和内容三方面的功力。
依然是黄、黑、白的色彩搭配，经典的黄黑支撑起整个视觉，而白色在整个配色中显得更加醒目，它承载了LOGO、副标题和关键性的按钮。
作为一个在线学习网站，Lambda 所用的主题基本上是经过深度定制的，深蓝灰和白色占据了大量的面积，而黄色在整个网站中作为提亮色，很好的强调了关键性的内容与操作。
Fitness 是一个为健身房和运动所定制的一个WP主题，极简的风格、黄黑为主的色彩搭配让这个主题在视觉上颇为突出。
Mobirise 是一个免费的BootStrap 模板，整体设计风格非常现代。和前面许多网站在配色上不同，它没有使用黄黑来搭配，而是使用偏橙色的黄色和灰色搭配起来，文字内容则使用了白色。
ENERGY 是一个运动健身类的WP主题，黄色醒目的特色在这个主题中被体现的淋漓尽致。
Ethanol Portfolio 是一个干净简约的免费Bootstrap 网站模板，这个简约的模板是多功能的。黄色的文本标题在暗色调的背景上显得无比清晰。
Xpress 用作作品展示或者时尚类的内容网站都是是相当不错的选择，黄色这一配色在网站中被很好的运用了起来。
Darklowpress 是一个WP博客主题，大量的可定制的轮播图能够让你更好的展示多媒体信息。
Pluton 是一款现代多功能的HTML5着陆页，基于BootStrap来开发的。整个网站使用了许多最新的HTML5、CSS3 和 jQuery 技术。
Agency 是一款有范儿的单页式Bootstrap主题，对于商业机构和小公司而言，这个主题相当的不错。这套主题的设计则是基于Golden PSD。
这个网站是一个为出租车公司所设计的，黄色的色调和出租车的基础色调保持了一致。
Hotel Deluxe 同样是一个响应式的网页模板，其中黄色也是网站中最醒目的色彩而起到关键性的作用。
在的网页中应用了越来越多的3D应用，特别是基于HTML5 Canvas的动画特效，让用户有一种非常震撼的视觉体验。本文收集了8个非常炫酷的3D视觉效果的HTML5动画，都有源代码分享，你可以学习你感兴趣的HTML5动画，一起来看看。
1、CSS3飘带状3D菜单
菜单带小图标这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。
2、HTML5/CSS3 3D纸片折叠动画
今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效，尽管它目前很少能在项目中应用，但从源码中我们可以学到很多HTML5 3D动画的制作知识。这是一款纸片折叠动画特效，利用HTML5和CSS3的相关特性，我们可以将一张张纸片折叠起来，形成很酷的3D动画效果。
3、HTML5 webkit 3D立方体图片旋转滑块应用
今天再来分享一款HTML5 3D立方体动画，这个只是一个3D效果模型，你可以用图片替换演示中的立方体4个面，这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了，由于是基于webkit的，所以有浏览器限制，Google Chrome最佳。
4、HTML5颜色渐变3D文字特效
之前我们已经分享过不少HTML5文字特效，效果都还不错，尤其是这款HTML5摆动的文字特效类似柳枝摆动，更是有非常酷的文字动画效果。今天我们要分享一款HTML5 3D文字特效，文字的颜色是渐变的，同时有文字阴影，更加凸显了3D立体的效果。
5、HTML5 3D图片阴影翻转动画
今天我们要分享一款很酷的HTML5 3D动画特效，这款3D特效可以为你的图片增加阴影的效果，而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果，大家也可以看看。
6、纯CSS3 3D按钮按钮酷似牛奶般剔透
CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。
7、CSS3 3D发光切换按钮
刚刚我们发布过一款CSS3开关切换滑动按钮，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。
8、CSS3 3D弹性按钮
今天要分享的这款CSS3按钮和这款按钮差不错，也同样拥有3D的效果，按钮在按下时带有弹性质感。
微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！
现在我们的表单现在我们的表单实现了跨浏览器一致的功能表现，同时也有一些基本样式。你我都知道，使用 CSS3可以让表单的样式更美观。目前我们的表单样式如下：
#redemption {width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
argin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both; text-align: center;
}
#howYouRateThis,#yearOfCrime {
text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left; width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float: left;
}
#redemption input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20;
border-radius: 8px;
color: white; float: right;
margin-bottom: 10px;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
.polyfill-important .input-range,.polyfill-important .step-c float: right;
}
.polyfill-important .step-controls {
margin-right: -20px!important;
}
唯一需要注意的地方是最后两个样式只在相应的补丁脚本运行时发挥作用。首先，我想让每个 fieldset都有一个好看的渐变背景，相互之间稍微空开一点。下面是针对 fieldset修改后的 CSS 代码：
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}
除了圆角和背景渐变效果，我们唯一需要做的就是再加一点点阴影（box-shadow）效果。 此处省略了各种 CSS3声明的浏览器私有前缀。
在整个示例代码中，你可以看到我混用了各种颜色值。有时是 red 这样的颜色名称，有时是十六进制、RBG 或 HSL。在支持这些颜色模式的浏览器中这样做没什么问题。但在实际生产环境中，为保持一致性和兼容性，你应该只选用一两种颜色模式。
CSS3不仅能轻松地追加样式，而且也能有效阻止在不需要的元素上追加样式。
*请认真填写需求信息，我们会在24小时内与您取得联系。
