How add a curl shadow in bootstrap 3 div like this http://www.paulund.co.uk/creating-different-css3-box-shadows-effects ?
My code :
<div class="row">
<div class="col-md-3">
<div class="well index">
<h1><span class="title">My title</span></h1>
<p>em ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa </p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
Thaks ;-)
To avoid some unsightly margin-padding issues, I'd put it on the well:
http://jsfiddle.net/isherwood/yLDjT/
.well:before, .well:after {
z-index: -1;
position: absolute;
content:"";
bottom: 15px;
left: 20px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.well:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 20px;
left: auto;
}
Just add any of this classes to you div depending of witch effect you prefer.
/*==================================================
* Effect 1
* ===============================================*/
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 3
* ===============================================*/
.effect3
{
position: relative;
}
.effect3:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/*==================================================
* Effect 4
* ===============================================*/
.effect4
{
position: relative;
}
.effect4:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5
{
position: relative;
}
.effect5:before, .effect5:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 6
* ===============================================*/
.effect6
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect6:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect7:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 8
* ===============================================*/
.effect8
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
Related
I have this html code
and now I want to put this html inside "SHOULD COME HERE" below
<div class="box-text">
<h3>Effect 2</h3>
</div>
with this CSS:
.box-text {
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
margin: 0 auto;
padding: 50px;
position: absolute;
width: 500px;
}
/*==================================================
* Effect 2
* ===============================================*/
.box-text:before, .box-text:after {
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-5deg) rotate(-5deg);
background: transparent;
bottom: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
content: ' ';
height: 10px;
left: 12px;
position: absolute;
transform: skew(-5deg) rotate(-5deg);
width: 40%;
z-index: -1;
}
.box-text:after {
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
-webkit-transform: skew(5deg) rotate(5deg);
left: auto;
right: 12px;
transform: skew(5deg) rotate(5deg);
}
And if I want to do this, the shadow of the 1st code set disappears. I am new to html/css and it somehow doesn't make sense to me why the shadow would disappear and I would be happy for any tips. If not it's ok as well :) here is the code I want to put it inside:
body {background:#ccc}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box-text {
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
margin: 0 auto;
padding: 50px;
position: absolute;
width: 500px;
}
/*==================================================
* Effect 2
* ===============================================*/
.box-text:before, .box-text:after {
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-5deg) rotate(-5deg);
background: transparent;
bottom: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
content: ' ';
height: 10px;
left: 12px;
position: absolute;
transform: skew(-5deg) rotate(-5deg);
width: 40%;
z-index: -1;
}
.box-text:after {
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
-webkit-transform: skew(5deg) rotate(5deg);
left: auto;
right: 12px;
transform: skew(5deg) rotate(5deg);
}
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
<!-- SHOULD COME HERE -->
<div class="box-text">
<h3>Effect 2</h3>
</div>
</div>
</div>
For those wondering, I had to delete the style attributes inside html:
style="background-color:#aaa;
Still dont get why.. but I'll update once I know
How can I create shadows like this using CSS3:
I have tried playing around with:
box-shadow: 6px 6px 6px -6px #919191;
Unfortunately it does not turn out the way I want it.
try this:
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box effect2"></div>
from [http://cssdeck.com/labs/different-css3-box-shadows-effects ][1]
I have a element I would like to shadows to create a page curl effect with using before and after css properties. I have done this else where on an item that has relative positioning. This works fine and was done like this:
.feed li{
display:block;
height:50px;
width:80%;
margin-left:10%;
position:relative;
clear:both;
margin-top:20px;
overflow:visible;
background:#FFF;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.feed li:before, .feed li:after{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 0px;
bottom: 12px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
z-index: -1;
}
.feed li:after{
left:auto;
right: 0px;
top:12px;
bottom:auto;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.4);
}
However when I use a similar method on an object the z-index appears to be overridden and has my shadows appear on top of the element instead of behind it. This is what I have for this:
.nav{
z-index:1;
position:fixed;
background:#FFF;
top:0px;
bottom:0px;
left:0px;
width:200px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.nav:before,.nav:after{
content:'';
position:fixed;
background: transparent;
z-index: -1;
width:195px;
height:50%;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.6);
}
.nav:before{
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
bottom:0px;
left:0px;
}
.nav:after{
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
bottom:auto;
top:0px;
left:0px;
}
I'm not entirely sure what the problem is here, I have done this method on other items without any problems. The only I can thnik of is that fixed elements are affected differently to others.
tl;dr: Fiddle
Referring to W3C:
The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.
That means they lie on another stack relative to the parent. It is possible to position them behind the parent though. That's done by adding a negative z-index like you did.
But it seems like there's a problem putting those pseudo elements behind the parents background (if it has one). As a solution it is suggested to add z-index:1; and position:relative; to the parent. That's why your first example works fine while the one with position:fixed; causes problems.
In my solution I changed the markup:
<div class="nav">
<div class="content">lorem ipsum</div>
<div class="shadows"></div>
</div>
and applied appropriate rules to the elements. I don't know how you imagined the navigation to look in the end, but I think my solution looks great. See Fiddle.
HTML code:
<div class="box">Paper Curl</div>
CSS3 code:
.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: #f0ab67;
}
.box:before, .box:after
{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
z-index: -1;
}
.box:after
{
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}
Below is the "paper curl" I wanted to achieve:
http://postimg.org/image/v0l84bmdv/
Below is the curve I could make so far:
http://codepen.io/anon/pen/BCLpE
Can anyone help me out on how to achieve the curves as perfect as in the image? I am not sure whether to go with image or we can do it with CSS3 itself.
Your demo shows that you had the right direction. You just need to tweak it a little by trial and error. Here is the edited code:
.box {
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: white;/* #f0ab67;*/
border:1px solid lightgray;
}
.box:before, .box:after {
position: absolute;
width: 48%;
height: 10px;
content: ' ';
left: 20px;
bottom: 40px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skew(-5deg) rotate(-3deg);
-moz-transform: skew(-5deg) rotate(-3deg);
-ms-transform: skew(-5deg) rotate(-3deg);
-o-transform: skew(-5deg) rotate(-3deg);
transform: skew(-5deg) rotate(-3deg);
-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
z-index: -1;
}
.box:after {
left: auto;
right: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: skew(5deg) rotate(3deg);
-moz-transform: skew(5deg) rotate(3deg);
-ms-transform: skew(5deg) rotate(3deg);
-o-transform: skew(5deg) rotate(3deg);
transform: skew(5deg) rotate(3deg);
}
NOTE: I've tried using the white color instead of the color you used originally to make it look like the paper in the picture. And it may not be exactly what you want, if so just wait for another better answer :)
Demo.
Tip: You can try yourself changing the box-shadow, especially the blur and the color to make it exactly what you need. The blur I used in the demo is 6px, but looks like 4px is better.
when creating shadows, sometimes its best to use the elements background as shadow while setting its opacity to a very low number.
here is a FIDDLE
html:
<div class="paper"></div>
css:
body {
background:#ededef;
padding:0;
margin:0;
}
.paper {
position: relative;
margin:0 auto;
height:100px;
width:500px;
background:#ffffff;
border:1px solid #dcdcdc;
}
.paper:before {
position: absolute;
width: 45%;
height: 20px;
content:' ';
left: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,-5deg);
-moz-transform: skew(0deg,-5deg);
transform: skew(0deg,-5deg);
z-index: -1;
}
.paper:after {
position: absolute;
width: 45%;
height: 20px;
content:' ';
right: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,5deg);
-moz-transform: skew(0deg,5deg);
transform: skew(0deg,5deg);
z-index: -1;
}
I'll go with my tunning too :) DEMO From my earlier comment
/* prefix auto-generated in demo link */.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background:white;
box-shadow:inset 0 0 0 1px lightgray;
}
.box:before, .box:after
{
position: absolute;
width: 50%;
height: 20px;
content: ' ';
left: 25px;
bottom: 30px;
transform:
skew(-7deg)
rotate(-3deg);
box-shadow:
0 30px 2px 7px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.box:after
{
left: auto;
right: 25px;
transform:
skew(4deg)
rotate(3deg);
}
img {
max-width:100%;
}
body {
background:#E7EBEC;
}
i am developing my custom site and have developed a pure css Carousel. There is one problem that whenever i navigate to second image the position does not remain fixed. :( it changes to bottom i mean the position changes to bottom.Please help me to fix this and Is there any way to add auto-scrolling in it?? This is the code:
Html:
<div id="slider">
<!-- Sildes -->
<img id="one" src="image Url 1" />
<img id="two" src="image Url 2" />
<img id="three" src="image Url 3" />
<img id="four" src="image Url 4" />
<img id="five " src="image Url 5" />
<!-- Links for the slides! -->
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
Css:
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider ul li:first-child {
margin-left: 16px;
}
#slider ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider ul li:last-child {
margin-right: 0;
}
#slider ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider ul li a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);
}
#slider img#five {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
}
#slider ul li a[href="#five"] {
background: #777;
}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}
http://jsfiddle.net/NaL88/
Nice work.
I Don't understand you issue with the bottom. I cant find a problem (using chrome).
for auto-scroll, if you are trying no javascript than you could apply css animation using keyframes on hover.
regarding css selectors, use child selector (a > b) when possible. its more efficient than descendant selector (a b)
by the way, here is variation of the carousel with no li elements wrapping the anchor, using display: inline:block. less DOM depth , less elements = more efficient
fiddle
HTML:
<div id="slider">
<!-- Sildes -->
<img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
<img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
<img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
<img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
<img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
<!-- Links for the slides! -->
<section>
</section>
</div>
CSS:
#slider {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
#slider:before, #slider:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider section {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider > section > a {
width: 12px;
height: 12px;
display: inline-block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider > section > a:hover {
background: #888;
}
#slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider img:target {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img#five {
opacity: 1;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
#slider img:not(:target), #slider img:target ~ img#five {
opacity: 0;
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
#slider > section > a[href="#five"] {
background: #777;
}
#one:target ~ section > a[href="#one"],
#two:target ~ section > a[href="#two"],
#three:target ~ section > a[href="#three"],
#four:target ~ section > a[href="#four"],
#five:target ~ section > a[href="#five"] {
background: #777;
}
#two:target ~ section > a[href="#five"],
#three:target ~ section > a[href="#five"],
#four:target ~section > a[href="#five"],
#one:target ~ section > a[href="#five"] {
background: #aaa;
}