Posts Tagged: css3

HTML5 — No Comments
12
一 12

css3文字颜色渐变、动画特效效果

css3颜色渐变、动画特效效果演示：

72色 72COLOR.COM

CSS3颜色渐变的文字特效,利用css3的animation属性还能做出动感十足的特效。上面的效果大家看到了把，那就是用下面的css3代码实现的，很简单的几行代码就能实现文字颜色渐变和动态效果，以前不是flash就是要用javascript脚本语言。

<code>
<style type=”text/css”>
p.color_shine
{
font-size: 3em;
margin: 0 auto;
padding:20px 0;
}

.color_shine
{
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 125px;

color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;

-webkit-animation-name: color_shine;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes color_shine
{
0%
{
background-position: top left;
}
100%
{
background: top right;
}
}
</style>
<!– HTML –>
<p class=”color_shine”>交互设计中心-72色 72COLOR.COM</p>
</code>

交互设计 — No Comments
15
十二 11

用css3做漂亮的水晶按钮

css3制作水晶按钮

以前还用Photoshop制作透明水晶按钮的时候都要跟着网上教程学，就是现在用photoshop做水晶按钮也不是很简单就能做出很漂亮的按钮，现在有了css3，只要几行css代码就可以了，想怎么调试就怎么调试，想要什么颜色就要什么颜色，赶紧试试吧！

HTML结构：

<div class="button aqua">
  <div class="glare"></div>
  Button Label
</div>

css 代码：


.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;

/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

预览地址：http://girliemac.com/sandbox/button.html
原文地址：http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

交互设计 — No Comments
30
十一 11

只用css3制作漂亮的滚动条

只用css3制作漂亮的滚动条

只用css3就能做出来上图这么漂亮的滚动条，是不是很感叹，是不是想让css2、不支持css3的IE版本赶快死去，我们这些苦逼的IT民工们的好日子快来了。

点击这里预览效果吧

下载源代码

制作详细页面

交互设计 — No Comments
1
七 11

css3可以让背景、边框透明文字内容不透明

用css3的RGBA属性能单独控制div的背景、边框、内容透明目前支持的浏览器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA允许你控制某个特性填充颜色的不透明度，无论是文本、背景、边框还是背景颜色。

设置颜色透明度的时候，你需要使用RGB颜色值，不可以再使用十六进制值，而那个”A”则代表透明度，你可以设置从0(透明)到1(不透明)之间的数值。

1
rgba(0-255,0-255,0-255,0-1)

你还可以单独使用RGB值:

1
2
3
4
5
6
7
8
.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

如果想让DIV背景透明，文字不透明，再也不用对DIV透明以后，还要把内容飘起来。现在直接写DIV的背景颜色透明“background-color: rgba(0,0,0,0.5);”就OK啦。