使用 javascript(jQuery) + css 实现字体阴影效果

最新推荐文章于 2020-06-04 19:42:37 发布

weixin_33849942

最新推荐文章于 2020-06-04 19:42:37 发布

阅读量593

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/sanji/blog/63808

版权

为什么80%的码农都做不了架构师？>>>

偶然突发奇想想到了小时候做的艺术字，就是在笔画比较宽的字右边加上线条做成立体效果，我觉得这种想法也是可以使用 CSS 来实现的，通过一点点 CSS 就可以造成阴影效果，比如增加 border 并且配合使用相对定位来做一些浮动的效果，或者凸出来那样或者凹进去的按钮。要么就是字体通过字体叠加也能够实现阴影效果。下面就来介绍一种实现阴影效果的方法。

阴影效果一般就是用来配合在进行一些点击或者鼠标浮动的时候会出现效果反馈。这里为了便于说明我使用了 ul来搭建框架,前面的日志也介绍过如何使用 ul 来制作自己想要的列表菜单，这里就不多说啦。有人反映 CSS 占得高度过大，所以这次在高度上进行了压缩。我已经尽量的所见 CSS 的各项属性，争取使每一个属性都有自己无法被取代的意义。如果有不明白的地方可以M我。

设计思想：

两个相同的文字进行错位叠加造成阴影效果，专业的说法是滑动门技术 …

注意事项:

1总体 bgcolor 要在 ul 中进行设定托底

2在 li 中控制字符具体的排列，这里我没有设置 width 所以是按照内容自动扩展的，以后以可以在这里使用定宽，因为是使用了两层 span 来实现阴影，特别还给阴影 span 加了偏移，所以在 span 中控制字体的位置的话会杯具的。

3阴影 span 的偏移可以自定义。字体大点儿的话，可以偏移多一些。另外阴影 span position 设置成 absolute 后，图层会自动前移的(凸显在前端)。

<!DOCTYPE html>
<html>
  <head>
    <title>CssFontShadow.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    
    <!-- bgcolor 1165a1 border  1px solid #0D5995 -->
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<style type="text/css">
			body{margin: 0;padding: 0;}
			ul{margin: 200px auto;padding: 0;background-color: #1165a1;width: 600px;}
			ul li{list-style: none;margin: 0;position: relative;float: left;background-color: transparent;border-right: 1px solid #0D5995;padding: 10px;}
			ul li span{margin: 0;font-size: 1em;color: white;background-color: transparent;position: relative;cursor: pointer;}
			ul li span.shadow{color: #131C25;position: absolute;top: 11px;left: 11px;}
			ul li span.hide{display: none;}
			div.clear{clear: both;}
		</style>
		<script type="text/javascript">
			// 跟以往不同，元素由多个层级进行叠加的话则不能使用常规的 css 来改变样式了
			$(document).ready(function(){
				
				/* 鼠标悬停事件绑定 */
				$("ul").delegate(".over","mouseover",function(){
					$(this).parent().find(".shadow").toggleClass("hide");
				});
				
				/* 鼠标悬停事件绑定 */
				$("ul").delegate(".over","mouseout",function(){
					$(this).parent().find(".shadow").toggleClass("hide");
				});
				
				/* 鼠标点击事件绑定 */
				$("ul").delegate(".click","click",function(){
					$(this).parent().find(".shadow").toggleClass("hide");
				});
				
			});
		
		</script>
  </head>
  
  <body>
  	<ul>
  		<li>
	  		<span title="没有阴影效果">noEffect</span>
  		</li>
  		<li>
	  		<span class="shadow">withShadow</span>
	  		<span title="有阴影效果">withShadow</span>
  		</li>
  		<li>
	  		<span class="shadow hide">mouseOverChange</span>
	  		<span title="鼠标悬停阴影效果" class="over">mouseOverChange</span>
  		</li>
  		<li>
	  		<span class="shadow hide">mouseClickChange</span>
	  		<span title="鼠标点击阴影效果" class="click">mouseClickChange</span>
  		</li>
  		
  		<div class="clear"></div>
  	</ul>  		
  </body>
  
</html>

转载于:https://my.oschina.net/sanji/blog/63808