CSS3仿LOGO图片阴影特效

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动,阴影可以是无规则的,而且阴影的大小也是随时变化的,本例子就是用CSs3写成一个Logo,然后再加以阴影特效,重点不是展示阴影效果有多漂亮,而是如何去实现这种CSS3效果。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>接触角测定仪</title>

<style>

*{margin:0;padding:0;line-height:1.5;font-size:1px;}

.wrap{ width: 240px; height: 240px;

border-bottom-left-radius: 120px;

border-bottom-right-radius: 120px;

border-top-right-radius: 120px;

background:#b1e4ff;

border:2px solid #789cb6;

box-shadow: 5px 5px 7px #999;

-moz-border-bottom-left-radius: 120px;

-moz-border-bottom-right-radius: 120px;

-moz-border-top-right-radius: 120px;

position:relative;margin:10px;

}

.font_e{font-size:300px;color:#fff; position:absolute;left:0;top:0;width: 240px; height: 240px;text-align:center;

line-height:210px; font-family:"Arial", Gadget, sans-serif;}

.tip{border-color:#fff transparent transparent transparent;border-style:solid;border-width:50px;font-size:0; position:absolute;top:-40px;left:-40px;

-webkit-transform: rotateZ(135deg);

    -moz-transform: rotate(135deg);

    transform: rotateZ(135deg);

}

.tip_2{width:50px;height:50px; background:#fff; position:absolute;top:25px; left:25px;

-webkit-transform: rotateZ(135deg);

-moz-transform: rotate(135deg);

transform: rotateZ(135deg);

}

</style>

</head>

<body>

<div class="wrap">

<div class="font_e">e</div>

    <div class="tip"></div>

    <div class="tip_2"></div>

</div>

</body>

</html>


CSS3仿LOGO图片阴影特效,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。