Skip to content

Instantly share code, notes, and snippets.

@jupegarnica

jupegarnica/boxshadow4.html

Created January 2, 2013 07:57
Show Gist options
  • Save jupegarnica/4432953 to your computer and use it in GitHub Desktop.
Save jupegarnica/4432953 to your computer and use it in GitHub Desktop.
Download ZIP
css box-shadow efect sombra elemento volador
Raw
boxshadow4.html
<style type="text/css">
<!-- BOX SHADOW EFECTOS!-->
#boxcontenedor
{
width:400px;
height:300px;
}
#box
{
position: relative;
width: 400px;
height:100%;
/*background: ;*/
/*-moz-border-radius: 4px;
border-radius: 4px;
padding: 0px;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;*/
margin: 60px auto;
box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.45);
}
#box::before, #box::after {
z-index: -1;
position: absolute;
content: '';
bottom: 12px;
left: 10px;
width: 50%;
top: 80%;
background: rgba(0, 0, 0, 0.45);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.45);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.45);
}
#box::after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
<script type="text/javascript" src="/js/lightbox/jquery.lightbox.min.js"></script>
</head>
<body data-tablet-width="920" data-mobile-width="580">
<div id="boxcontenedor">
<div id="box">
<img width="100%" src="/images/inicio/PequenoSherpa-copia.jpg" id="shadowbox"/>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment