OREO Queen ♥: 教程/Tutorial || 图片模糊变清晰+圆角 / Clear picture fuzzy variable+Rounded

Saturday, July 16, 2011

教程/Tutorial || 图片模糊变清晰+圆角 / Clear picture fuzzy variable+Rounded

给jiemin的

For jiemin

点它/Click it:

第1款:鼠标指向图片时，图片从模糊变清晰+圆角

The 1st style:When cursor touched the picture, the picture will becomes clear from the fuzzy and rounded

之前:有耳朵

Before:The ear have still there

之后:耳朵不见了 =)

After:The ear missing =)

中文/Chiness:

① 信息中心 --> 设计 --> 修改HTML

② 按Ctrl+F找

]]></b:skin>

③ 在]]></b:skin>上面放以下代码

img {opacity: .70; -moz-opacity: .70; filter: alpha(opacity=85); -webkit-transition-duration:.4s;}img:hover {filter: alpha(opacity=80); moz-opacity: 1; opacity: 1; -moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;}

④ 预览，储存

完成!!
祝你成功!!

英文/English:

① Dashboard --> Design --> Edit HTML

② Press Ctrl+F on your keyboard and found out the code below

]]></b:skin>

③ Copy the code below and paste it above ]]></b:skin>

img {opacity: .70; -moz-opacity: .70; filter: alpha(opacity=85); -webkit-transition-duration:.4s;}img:hover {filter: alpha(opacity=80); moz-opacity: 1; opacity: 1; -moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;}

④ Preview , Save

Done!!
Wish you good luck!!

第2款:鼠标指向图片，图片变圆角

The 2nd style:When cursor touched the picture,the picture will becomes rounded

Berofe

After

中文/Chiness:

① 信息中心 --> 设计 --> 修改HTML

② 按Ctrl+F找

]]></b:skin>

③ 将以下代码放在]]></b:skin>上面

img { -moz-opacity: .70; filter: alpha(opacity=85); -webkit-transition-duration:.4s;}img:hover {-moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;}

④ 预览，储存

完成!!
祝你成功!!

英文/English:

① Dashboard --> Design --> Edit HTML

② Press Ctrl+F on your keyboard and found out the code below

]]></b:skin>

③ Copy the code below and paste it above ]]></b:skin>

img { -moz-opacity: .70; filter: alpha(opacity=85); -webkit-transition-duration:.4s;}img:hover {-moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;}

④ Preview , Save

Done!!
Wish you good luck!!

注意/Attention:

你可以自行更改角度
-moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;
将粉红色数字改一改，数字越大，角度越明显哦!! =)

You can customize the radius by yourself
-moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px;
Change the Pink colour number,the higher number,means that the pictures rounded will more obvious.