收藏
    首页
大连仟亿科技
客服中心
  • 电话
  • 电话咨询：0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置：仟亿科技 > 新闻中心 > 常见问题

网站制作之用CSS3实现图像风格

作者：billionnet 发布于:2012/5/18 18:18:53 点击量：

 

当在图像元素上直接使用CSS3内阴影或者圆角边框时，浏览器对于CSS样式的渲染并不完mei。但是，如果图像作为背景图像使用时，你可以为它添加任何样式，而且可以实现完mei的渲染。Darcy Clarke和我一起编写了一个如何使用jQuery来动态创建完mei圆角边框的快速教程。今天我要重启这个话题，向你展示使用CSS的背景图像技巧我们还可以做多少事情。我将向你展示如何使用盒阴影、圆角边框和转换来创建不同的图像样式。

查看演示

问题（见演示）
查看演示，你会发现第一排的图像应用了圆角边框和内阴影。Firefox在图片元素上支持圆角边框，但是不支持内阴影的渲染。Chrome和Safari完全不支持圆角边框和内阴影的渲染。

解决方案
要使用圆角边框和内阴影，解决方案是把所需的图像设置为背景图像。

动态的方式
要采用动态的方式实现，你可以使用jQuery来将每一个图像元素动态的包装为背景图像。如下的jQuery代码使用span标签来包装所有的图像，并且将图像应用为背景图像（jQuery代码来自Darcy Clarke）。

 
  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>  

输出
上面的代码将输入如下的HTML代码：

 
  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>  

圆形图像（见演示）
现在图片已经被应用为背景图像，你几乎可以为它添加任何样式。如下是一个用圆角边框创建的简单圆形图像。如果你还不熟悉CSS3，请阅读我对CSS3的基础教程。

 

CSS

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

卡片风格（见演示）
如下是一个用多内阴影值创建的卡片图像样式。

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;  
  9. }  

浮雕风格（见演示）

做一些调整，我可以将卡片样式变成浮雕样式。

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;  
  9. }  

软浮雕风格（见演示）
这几乎和浮雕样式相同，我只加了1个像素的模糊。

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;  
  9. }  

剪贴画风格（见演示）
再次通过对内阴影的调整，我可以让它看起来像一个剪贴画效果。

CSS

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

变形和发光（见演示）
在这个例子汇总，我为图像的包装元素添加了transition。当鼠标滑过，它会从圆角边框变为圆形并添加发光的效果。发光效果采用多盒阴影值实现。

 

CSS

 
  1. .morphing-glowing .image-wrap {  
  2.     -webkit-transition: 1s;  
  3.     -moz-transition: 1s;  
  4.     transition: 1s;  
  5.   
  6.     -webkit-border-radius: 20px;  
  7.     -moz-border-radius: 20px;  
  8.     border-radius: 20px;  
  9. }  
  10.   
  11. .morphing-glowing .image-wrap:hover {  
  12.     -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
  13.     -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
  14.     box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
  15.   
  16.     -webkit-border-radius: 60em;  
  17.     -moz-border-radius: 60em;  
  18.     border-radius: 60em;  
  19. }  

光泽覆盖（见演示）
我们采用:after伪类元素实现如下的光泽渐变覆盖效果。

CSS

 
  1. .glossy .image-wrap {  
  2.     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);  
  3.     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);  
  4.     box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);  
  5.   
  6.     -webkit-border-radius: 20px;  
  7.     -moz-border-radius: 20px;  
  8.     border-radius: 20px;  
  9. }  
  10.   
  11. .glossy .image-wrap:after {  
  12.     position: absolute;  
  13.     content: ' ';  
  14.     width: 100%;  
  15.     height: 50%;  
  16.     top: 0;  
  17.     left: 0;  
  18.   
  19.     -webkit-border-radius: 20px;  
  20.     -moz-border-radius: 20px;  
  21.     border-radius: 20px;  
  22.   
  23.     background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);  
  24.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));  
  25.     background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);  
  26. }  

投影（见演示）
在这个例子中，我将覆盖渐变换到底部来创建投影效果。

 

CSS

 
  1. .reflection .image-wrap:after {  
  2.     position: absolute;  
  3.     content: ' ';  
  4.     width: 100%;  
  5.     height: 30px;  
  6.     bottom: -31px;  
  7.     left: 0;  
  8.   
  9.     -webkit-border-top-left-radius: 20px;  
  10.     -webkit-border-top-right-radius: 20px;  
  11.     -moz-border-radius-topleft: 20px;  
  12.     -moz-border-radius-topright: 20px;  
  13.     border-top-left-radius: 20px;  
  14.     border-top-right-radius: 20px;  
  15.   
  16.     background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);  
  17.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));  
  18.     background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);  
  19. }  
  20.   
  21. .reflection .image-wrap:hover {  
  22.     position: relative;  
  23.     top: -8px;  
  24. }  

光泽和投影（见演示）
在这个示例中，我将:before和:after合并，用来创建带投影效果的光泽头像。

CSS

 
  1. .glossy-reflection .image-wrap {  
  2.     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);  
  3.     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);  
  4.     box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);  
  5.   
  6.     -webkit-transition: 1s;  
  7.     -moz-transition: 1s;  
  8.     transition: 1s;  
  9.   
  10.     -webkit-border-radius: 20px;  
  11.     -moz-border-radius: 20px;  
  12.     border-radius: 20px;  
  13. }  
  14.   
  15. .glossy-reflection .image-wrap:before {  
  16.     position: absolute;  
  17.     content: ' ';  
  18.     width: 100%;  
  19.     height: 50%;  
  20.     top: 0;  
  21.     left: 0;  
  22.   
  23.     -webkit-border-radius: 20px;  
  24.     -moz-border-radius: 20px;  
  25.     border-radius: 20px;  
  26.   
  27.     background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);  
  28.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));  
  29.     background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);  
  30. }  
  31.   
  32. .glossy-reflection .image-wrap:after {  
  33.     position: absolute;  
  34.     content: ' ';  
  35.     width: 100%;  
  36.     height: 30px;  
  37.     bottom: -31px;  
  38.     left: 0;  
  39.   
  40.     -webkit-border-top-left-radius: 20px;  
  41.     -webkit-border-top-right-radius: 20px;  
  42.     -moz-border-radius-topleft: 20px;  
  43.     -moz-border-radius-topright: 20px;  
  44.     border-top-left-radius: 20px;  
  45.     border-top-right-radius: 20px;  
  46.   
  47.     background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);  
  48.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));  
  49.     background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);  
  50. }  

磁带风格（见演示）
这里使用:after来在图像的上部创建磁带式的渐变。

 

CSS

 
  1. .tape .image-wrap {  
  2.     -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);  
  3.     -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);  
  4.     box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);  
  5. }  
  6.   
  7. .tape .image-wrap:after {  
  8.     position: absolute;  
  9.     content: ' ';  
  10.     width: 60px;  
  11.     height: 25px;  
  12.     top: -10px;  
  13.     left: 50%;  
  14.     margin-left: -30px;  
  15.     border: solid 1px rgba(137,130,48,.2);  
  16.   
  17.     background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);  
  18.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));  
  19.     background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);  
  20.     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);  
  21. }  

变形和上色（见演示）
在如下的示例里，我使用:after元素在鼠标滑过时创建径向渐变。

 

CSS

?
  1. .morphing-tinting .image-wrap {  
  2.     position: relative;  
  3.   
  4.     -webkit-transition: 1s;  
  5.     -moz-transition: 1s;  
  6.     transition: 1s;  
  7.   
  8.     -webkit-border-radius: 20px;  
  9.     -moz-border-radius: 20px;  
  10.     border-radius: 20px;  
  11. }  
  12.   
  13. .morphing-tinting .image-wrap:hover {  
  14.     -webkit-border-radius: 30em;  
  15.     -moz-border-radius: 30em;  
  16.     border-radius: 30em;  
  17. }  
  18.   
  19. .morphing-tinting .image-wrap:after {  
  20.     position: absolute;  
  21.     content: ' ';  
  22.     width: 100%;  
  23.     height: 100%;  
  24.     top: 0;  
  25.     left: 0;  
  26.   
  27.     -webkit-transition: 1s;  
  28.     -moz-transition: 1s;  
  29.     transition: 1s;  
  30.   
  31.     -webkit-border-radius: 30em;  
  32.     -moz-border-radius: 30em;  
  33.     border-radius: 30em;  
  34. }  
  35. .morphing-tinting .image-wrap:hover:after  {  
  36.     background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));  
  37.     background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);  
  38. }  

羽毛边圈（见演示）
径向渐变还可以作为遮罩使用来创建圆形的羽毛效果，如下所示。

CSS

  1. .feather .image-wrap {  
  2.     position: relative;  
  3.   
  4.     -webkit-border-radius: 30em;  
  5.     -moz-border-radius: 30em;  
  6.     border-radius: 30em;  
  7. }  
  8.   
  9. .feather .image-wrap:after  {  
  10.     position: absolute;  
  11.     content: ' ';  
  12.     width: 100%;  
  13.     height: 100%;  
  14.     top: 0;  
  15.     left: 0;  
  16.   
  17.     background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));  
  18.     background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);  
  19. }  

浏览器支持
这个技巧几乎可以工作在任何支持圆角边框、盒阴影、:after和:before的浏览器上（例如Chrome、Firefox和Safari）。不支持的浏览器会显示没有任何样式的图像。
使用你的创造力
正如你看到的一样，使用:before和:after伪元素你几乎可以创建任何图像风格。如果你有更富有创造力的图像风格，请在评论中分享。



分享到：

评论加载中...
内容：
评论者： 验证码：
  

Copyright@ 2011-2017 版权所有：大连仟亿科技有限公司 辽ICP备11013762-1号   google网站地图   百度网站地图   网站地图

公司地址：大连市沙河口区中山路692号辰熙星海国际2215 客服电话：0411-39943997 QQ：2088827823 42286563

法律声明：未经许可，任何模仿本站模板、转载本站内容等行为者，本站保留追究其法律责任的权利！ 隐私权政策声明