home about me stuff links follow dashboard

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.



链接我/Link Me



sticker


1 Oreo ♥:

JieMin ♥ said... Reply

很喜欢、谢谢! :)

Post a Comment