交互设计中心|72色

HTML5 — No comments
12
一 12

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
10
一 12

jQuery切割图片插件生成缩略图

堪比流行flash切割头像的插件一样方便一样酷，自由选择图片任意部分任意大小。

还可以得到及时反馈所需要的鼠标滑动时的信息，同样可以生成缩略图。

插件的使用起来特别方便，具体使用法请看传送门：

插件演示

下载地址

交互设计 — No comments
15
十二 11

用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
01
十二 11

2011年12月Godaddy优惠码域名1美元

2011年12月Godaddy域名活动，1美元。

每个用户好像只能买一个域名，貌似还限定了一个信用卡。（本次活动只能用信用卡付款）

SPECIAL OFFER! $1.00 DOMAIN NAME! Register any available .COM, .US, .MOBI, .BIZ, .NET, .ORG, .CA, .CO.UK and .IN domain for just $1.00!*
优惠码：getfit
10000个或者1月31日前
注册地址：godaddy.com

Godaddy域名注册优惠码

优惠码: cjc695dom cjc749dom cjc749chp
cjc749IDC
说明: $7.49 .COM 注册
有效期: N/A

优惠码： cjc749b004
注册com域名 $7.49美元

优惠码: cjcPRIVATE
说明: 域名隐私保护
有效期: 2011年12月

优惠码: cjctld749
说明: $7.49 .NET 注册
有效期: N/A

优惠码: cjctld749
说明: $7.49 .ORG 注册
有效期: N/A

优惠码: cjcUS349
说明: $3.49 .US 注册
有效期: N/A

交互设计 — No comments
30
十一 11

只用css3制作漂亮的滚动条

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

点击这里预览效果吧

下载源代码

制作详细页面

交互设计 — No comments
22
十一 11

针对IE6的最大宽度最小宽度及高度的css、js的写法

众所周知IE6早晚要死，可是它现在还在还在好死不或着，我们还要面对显示，还是要对IE6做下特殊的处理，下面就看看最大宽度和最小宽度的解决方法把：
先说说大家常用的css里面写一些js的方法,后面再说说纯js的方式，因为有的时候由于站点的框架问题不能用css里面的方法，就要用到纯js的方法。

1、IE6支持最大宽度，解决CSS代码：
.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}

说明：max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;
则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-width的CSS样式代码，完整：
max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;
这里的1000和1000px是你需要的数值，注意3个数值的相同。

设置最大max-width的时候别忘记加上overflow:hidden;
Continue reading →

交互设计 — No comments
01
七 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啦。

交互设计 — 2 comments
16
五 11

小功能没做好还不如没有

在京东上，我发现了这个功能挺好的，我就研究了一下，在排序的下方有个选择城市库存状态的，我选择了上海并勾选了仅显示现货，如下图：

列表里面每个产品的下面多了一个标签“现货”，如下图。

我感觉很实用，以前我在京东上买东西经常都是看到热门促销的东西，但过去都是没货，这次我看到了这个冰箱，点过去，显示没货，md什么情况，难道是网站的缓存，我回到列表多刷了几次，还是显示“现货”，算了我看别的，过了一个小时我回来，列表里依然是显示“现货”，点进去还是显示 “无货”。

nnd 坑爹呢是吧，最近融资了15个亿都花到哪里了，难道没请QA，不过京东的这个细节还是做的挺好的，但是做的不好的体验还不如不放出来。

交互设计 — 3 comments
23
四 11

五一放假火车票那些事儿

昨天在公司楼下买火车票，去的时候我还在纠结到底是买动车回家还是做卧铺回家，因为动车到家的时间是夜里，不认为五一回家票会那么紧张，结果到了那里一看还好只是十几个人在排队，但是到我的时候还是悲剧了，只有站票，问我要不要，我在沉思状，售票的直接说到一边去想，看来不容我考虑，直接买了一张。

今天早上想想还是直接买好返程票的实在，但是周末早上能起多早呀，我不到八点就去了，一看人那叫个多呀，可想而知，站票都没有，我想假期最后一天返回的，没办法就在退后一天，答曰，到下午三点才能出票，好我就三点来。

到下午2点多，我就去了，到那里2点半，还好我排到十几名把，几分钟后，我后面排了好长对，心中窃喜，估计几天有戏，这时，出来一个售票的阿姨，挨个问到哪里，买什么票。登记到一个小本子上，神马情况，传说中的实名登记吗？到我的时候问好了去哪里，没要身份证，神马情况，难道是黄牛？

三点一到，前面人很快都买到了票，而且速度都挺快，这时我有所醒悟，果不其然，到我的时候问我到哪里的票，我说到***，售票员直接说到旁边窗口拿票，我那个欢喜呀，到旁边窗口，看到那个阿姨拿了好多票，在哪里发。

给力的售票点，真的很给力，他们先登记每个人去哪里，然后在3点一到专心打票，尽量节省我们买票人询问妨碍他们打票的时间，这样以来他们就会在那个3点一过的有限时间里多多打出车票。抢在别的售票点前面。

扯到网站上去，是不是就和我们的图片预加载一个道理呢？

交互设计 — 3 comments
25
二 11

手机照片到邮箱再到电脑乱码

昨天心血来潮把以前诺基亚手机里的照片上传到qq邮箱里，因为那个老机器不带内存卡，上传的时候就看到上传后文件件名变成乱码了，没在意想着无所谓，从邮箱下载到电脑里的时候，杯具鸟，打开看图片啥都没有，我想可能是乱码的问题，我重命名，结果出现假死现象，我强行关掉了文件夹，再打开始，重命名的那个照片好了，于是我重命名第二个，有假死，我又强行关掉，更杯具鸟，整个文件夹打不开。呵呵，神马情况。我重启电脑，还是打不开这个文件夹。

我用acdc浏览文件夹，哎可以看到我重命名的两个图片，其余都看不到，用ps打开，根本就打不开文件夹，我试着用我电脑上的所有作图的看图的软件都打不开这个文件夹了。于是乎问了google，无果，更改文件夹属性，把只读去掉，还是不行，不知道为什么我想到了用rar把文件夹压缩，然后用winrar打开，奇迹出现了，可以打开了，也可以重名了，我全部重命名好了，把这个文件夹解压出来，嘿嘿，好了，照片可以打开了。

交互设计中心|72色交互设计、用户体验