经验分享程序开发文档资料数据资源其它资源

css3图片浮雕特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3图片浮雕特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

css3图片浮雕特效代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	// wrap image with <span class="image-wrap"> for styling
	$('#demo img').each(function() {
		var imgClass = $(this).attr('class');
		$(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');
		$(this).removeAttr('class');
	});

});
</script>

<title>css3图片浮雕效果</title>
<style>
body {
	font: 90%/150% Arial, Helvetica, sans-serif;
	color: #eee;
	width: 800px;
	max-width: 90%;
	margin: 20px auto;
	background: #383b3d url(images/body-bg.png);
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #F90;
	text-decoration: none;
}
p {
	margin: 0 0 1em;
}
h1, h2, h3 {
	line-height: 110%;
}
h1 {
	font: bold 80% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 2px;
}
h2 {
	margin: 0 0 8px;
	font-size: 200%;
}

/* demo style */
.image-wrap {
	margin-right: 5px;
	margin-bottom: 5px;
}
.box {
	margin: 0 0 50px;
	border-top: solid 1px #444;
}

/************************************************************************************
NORMAL IMG WITHOUT THE SPAN WRAP (DEMONSTRATION PURPOSE)
*************************************************************************************/
.normal img {
	border: solid 5px #000;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
	box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}


/************************************************************************************
IMAGE WRAP (REQUIRED)
*************************************************************************************/
.image-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
}
/* image-wrap:after pseudo element (overlaying container) */
.image-wrap:after {
	content: ' ';
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1px;
	left: -1px;
	border: solid 1px #1b1b1b;
	-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.image-wrap img {
	vertical-align: bottom;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

/************************************************************************************
IMAGE STYLES
*************************************************************************************/
/* embossed */
.embossed .image-wrap:after {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.6), inset 0 -7px 0 rgba(255,255,255,.3);
}

/* soft embossed */
.soft-embossed .image-wrap:after {
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 3px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -6px 2px rgba(0,0,0,.6), inset 0 -8px 2px rgba(255,255,255,.3);
}

/* cutout or pressed */
.cutout .image-wrap:after {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.6);
}

/* glossy */
.glossy .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,.15) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,.15)));
	background: linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,.15) 100%);
}
</style>
</head>

<body>

<h2></h2>

<div class="box normal">
	<h3>正常图像（不含跨度包）</h3>
	<a href="#"><img src="images/img.png"></a>
	<a href="#"><img src="images/image-2.jpg"></a>
	<a href="#"><img src="images/image-3.jpg" width="70"></a>
	<a href="#"><img src="images/image-4.jpg" width="60"></a>
</div>

<div id="demo">

	<div class="box">
		<h3>基本风格（与跨度包裹）</h3>
		<p><a href="#"><img src="images/image-1.jpg"></a></p>
		<a href="#"><img src="images/image-2.jpg"></a>
		<a href="#"><img src="images/image-3.jpg" width="70"></a>
		<a href="#"><img src="images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box embossed">
		<h3>浮雕风格</h3>
		<p><a href="#"><img src="images/image-1.jpg"></a></p>
		<a href="#"><img src="images/image-2.jpg"></a>
		<a href="#"><img src="images/image-3.jpg" width="70"></a>
		<a href="#"><img src="images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box soft-embossed">
		<h3>软浮雕风格</h3>
		<p><a href="#"><img src="images/image-1.jpg"></a></p>
		<a href="#"><img src="images/image-2.jpg"></a>
		<a href="#"><img src="images/image-3.jpg" width="70"></a>
		<a href="#"><img src="images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box cutout">
		<h3>镂空风格</h3>
		<p><a href="#"><img src="images/image-1.jpg"></a></p>
		<a href="#"><img src="images/image-2.jpg"></a>
		<a href="#"><img src="images/image-3.jpg" width="70"></a>
		<a href="#"><img src="images/image-4.jpg" width="60"></a>
	</div>
	
	<div class="box glossy"> 
		<h3>光面覆盖</h3>
		<p><a href="#"><img src="images/image-1.jpg"></a></p>
		<a href="#"><img src="images/image-2.jpg"></a>
		<a href="#"><img src="images/image-3.jpg" width="70"></a>
		<a href="#"><img src="images/image-4.jpg" width="60"></a>
	</div>
	
</div>
<!-- /demo -->
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
162.66 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
162.66 KB
立即下载
邓妹娴
了解
打赏作者 鼓励作者
Html JS 图片特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章