time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果

时间:2012-11-23 00:40 点击:3281次 字体:[ ]




  在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。

  demo预览地址:http://webdesignerwall.com/demo/css3-image-styles/

 

  问题

  通过查看demo能注意到,我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius,但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。

  1. .normal img {  
  2.   bordersolid 5px #000;  
  3.   -webkit-border-radius: 20px;  
  4.   -moz-border-radius: 20px;  
  5.   border-radius: 20px;  
  6.   -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);  
  7.   -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);  
  8.   box-shadow: inset 0 1px 5px rgba(0,0,0,.5);  

firefox效果:

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

chrome/safari

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

 

  变通方案

  为了使border-radius 和 内嵌box-shadow能够正常工作,我们需要把图片转换成background-image的方式。

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

 

  动态方式

  为了动态完成这一工作,我们需要借助jquery为每一个图片添加背景图片的包装。下面的js代码为每一个图片添加了一个span的包装,span的背景图片路径就是图片的路径。

  代码比较简单,我想就没有讲解的必要了。不清楚了可以直接去查jquery的api。

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
  2. <script type="text/javascript">  
  3. $(document).ready(function(){  
  4.  
  5.   $("img").load(function() {  
  6.     $(this).wrap(function(){  
  7.       return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';  
  8.     });  
  9.     $(this).css("opacity","0");  
  10.   });  
  11.  
  12. });  
  13. </script> 

 

  输出

  上面的代码会输出如下结果:

  1. <span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;"> 
  2.     <img src="image.jpg" style="opacity: 0;"> 
  3. </span> 

  圆形图片

  添加我们使用border-radius来实现圆形图片的效果,效果如下:

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

  css:

  1. .circle .image-wrap {  
  2.     -webkit-border-radius: 50em;  
  3.     -moz-border-radius: 50em;  
  4.     border-radius: 50em;  

  卡片风格

  下面是卡片风格的图片,使用了多个内嵌box-shadow。

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

  css:

 

  1. .card .image-wrap {  
  2.     -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);  
  3.     -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);  
  4.     box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);  
  5.  
  6.     -webkit-border-radius: 20px;  
  7.     -moz-border-radius: 20px;  
  8.     border-radius: 20px;  

浮雕风格

  浮雕风格

  下面是浮雕效果。

【HTML5实践教程】5、使用box-shadow, border-radius 和 transition创建不同图片样式效果_www.fengfly.com

  css:

  1. .embossed .image-wrap {  
  2.     -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);  
  3.     -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);  
  4.     box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);  
  5.  
  6.     -webkit-border-radius: 20px;  
  7.     -moz-border-radius: 20px;  
  8.     border-radius: 20px;  

 



本文地址 : http://www.fengfly.com/plus/view-210415-1.html
标签: HTML5 transition border-radius box-shadow
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: