I have looked and can't seem to find if it is possible to have darker box shadow around the corners. I know you can do with a .png, but is it possible to do this only with css?
I attached a picture to give an example of what I am trying to accomplish.
.box {
background-color: #dedede;
height: 200px;
width: 200px;
box-shadow: 0 4px 2px -2px rgba(177, 176, 176, 0.74);
}
<div class="box"> </div>
.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">
<h3>Effect 2</h3>
</div>
Related
I found and I integrated this code in my Wordpress.
I would ask you, do you know how to make links in the CSS and where?
I made the links with <a href=""> in the HTML but then I have links only on the text and not on the whole button.
#import url("https://fonts.googleapis.com/css?family=Lato");
*,
*:before,
*:after { /* Slow, yes I know :) */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Lato, Sans-serif;
font-size: 12px;
background: #353138;
background: -moz-radial-gradient(center, ellipse cover, #353138 0%, #1a181c 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c));
background: -webkit-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: -o-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: -ms-radial-gradient(center, ellipse cover, #353138 0%,#1a181c 100%);
background: radial-gradient(ellipse at center, #353138 0%,#1a181c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1);
}
.container {
margin: 0;
width: 100%;
height: 100%;
padding: 20px;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-ms-perspective: 1500px;
perspective: 1500px;
position: relative;
}
.toggle {
color: #fff;
display: inline-block;
line-height: 16px;
font-size: 20px;
float: left;
}
.menu {
margin: 100px auto;
position: relative;
background: #62278d;
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
background: -webkit-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%,#2cc09b 100%);
width: 300px;
border-width: 20px 0;
border-style: solid;
border-color: #fff;
color: #fff;
height: 540px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-box-shadow: 0 0 50px 0 #444;
-moz-box-shadow: 0 0 50px 0 #444;
box-shadow: 0 0 50px 0 #444;
}
input.toggle:checked ~ .menu {
-webkit-transform: translateY(-200px) translateZ(-150px) rotateX(45deg) rotateZ(45deg);
-moz-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
-ms-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
-o-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
}
.menu:before {
content: '';
position: absolute;
height: 30px;
width: 300px;
top: 520px;
left: 0px;
-webkit-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-moz-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-ms-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
-o-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
transform: rotateX(90deg) translateY(-15px) translateZ(15px);
background: #fff;
pointer-events: none;
}
.menu:after {
content: '';
position: absolute;
height: 540px;
width: 30px;
top: -20px;
right: -30px;
-webkit-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-moz-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-ms-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
-o-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
transform: rotateY(90deg) translateZ(-15px) translateX(15px);
border-width: 20px 0;
border-style: solid;
border-color: #fff;
background: #62278d;
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
background: -webkit-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%,#2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%,#2cc09b 100%);
pointer-events: none;
}
.menu .top {
padding: 15px 15px 15px 20px;
width: 100%;
}
.menu .top .search {
position: relative;
display: inline-block;
}
.menu .top .search input {
background-color: transparent;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
color: transparent;
border: 1px solid #fff;
border-radius: 20px;
padding: 10px 30px 10px 15px;
outline: 0 none;
width: 60px;
height: 40px;
position: relative;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 2;
}
.menu .top .search input:focus {
width: 200px;
color: #fff;
}
.menu .top .search:after {
content: '\f002';
font-family: 'FontAwesome';
font-size: 16px;
position: absolute;
color: #fff;
top: 11px;
right: 18px;
width: 20px;
height: 20px;
pointer-events: none;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 1;
}
.menu .top .exit {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
outline: 0 none;
float: right;
cursor: pointer;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 2;
}
.menu .top .exit:focus,
.menu .top .exit:active {
border: 1px solid #fff;
border-radius: 20px;
}
.menu .top .exit:before {
content: '';
pointer-events: none;
position: absolute;
display: block;
width: 30px;
height: 30px;
top: 14px;
left: -6px;
border-width: 0 2px 0 0;
border-style: solid;
border-color: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 1;
}
.menu .top .exit:after {
content: '';
pointer-events: none;
position: absolute;
display: block;
width: 30px;
height: 30px;
top: -6px;
left: -6px;
border-width: 0 2px 0 0;
border-style: solid;
border-color: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu .middle {
position: relative;
min-height: 40px;
list-style: none;
padding: 0;
margin: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menu .middle li {
margin: 0;
padding: 15px 0 15px 40px;
outline: 0 none;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-ms-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);
z-index: 1;
}
.menu .middle li:hover {
-webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.menu .middle li:hover:before,
.menu .middle li:focus:before {
content: '\f0da';
font-family: 'FontAwesome';
font-size: 16px;
position: absolute;
top: 15px;
left: 20px;
}
.menu .middle li:focus,
.menu .middle li:focus:after {
color: #3EAC9E;
background-color: #62278d;
}
.menu .middle li .fa {
padding-right: 15px;
}
.menu .middle li:focus:after,
.menu .middle li:hover:after {
content: '';
position: absolute;
height: 48px;
width: 30px;
top: 0px;
right: -30px;
-webkit-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-moz-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-ms-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
-o-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
transform: rotateY(90deg) translateZ(-14px) translateX(15px);
pointer-events: none;
}
.menu .middle li:hover:after {
-webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
}
.menu .bottom {
height: 40px;
}
.menu-back {
position: absolute;
background: transparent;
top: -20px;
left: 0;
width: 300px;
height: 540px;
-webkit-transform: translateZ(-29px);
-moz-transform: translateZ(-29px);
-ms-transform: translateZ(-29px);
-o-transform: translateZ(-29px);
transform: translateZ(-29px);
-webkit-box-shadow: 100px 100px 50px -30px #111;
-moz-box-shadow: 100px 100px 50px -30px #111;
box-shadow: 100px 100px 50px -30px #111;
z-index: 0;
}
.glass-reflection {
position: absolute;
-webkit-transition: box-shadow 1s;
-moz-transition: box-shadow 1s;
-ms-transition: box-shadow 1s;
-o-transition: box-shadow 1s;
transition: box-shadow 1s;
-webkit-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-moz-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-ms-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-o-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
-webkit-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
-moz-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
border-radius: 200px 0 20px 0 ;
top: 85px;
left: 95px;
width: 200px;
height: 100px;
background-color: transparent;
}
input.toggle:checked ~ .menu .glass-reflection {
-webkit-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
}
<!--
Inspired by this dribble by The Purple Bunny:
https://dribbble.com/shots/1677163-Menu
-->
<div class="container">
<input type="checkbox" class="toggle" id="toggle" checked="checked" /><label class="toggle" for="toggle"> Toggle tilt</label>
<div class="menu">
<div class="top">
<span class="search">
<input type="text">
</span>
<a class="exit" href="#" tabindex="0"></a>
</div>
<ul class="middle">
<li tabindex="0"><i class="fa fa-calendar"></i>Calendar</li>
<li tabindex="0"><i class="fa fa-camera"></i>Photos</li>
<li tabindex="0"><i class="fa fa-check-square-o"></i>Tasks</li>
<li tabindex="0"><i class="fa fa-map-marker"></i>Places</li>
<li tabindex="0"><i class="fa fa-codepen"></i>Codepen</li>
<li tabindex="0"><i class="fa fa-dribbble"></i>Dribbble</li>
<li tabindex="0"><i class="fa fa-user"></i>User account</li>
<li tabindex="0"><i class="fa fa-cogs"></i>Settings</li>
</ul>
<div class="bottom"></div>
<div class="menu-back"></div>
<div class="glass-reflection"></div>
</div>
</div>
Have you tried styling your link to look like a button? Like this?
a{border:solid 1px black; padding:20px;background-color:yellow; text-decoration:none;font-size:1.5em; border-radius:50%;}
I made padding big so you can put mouse all around the text inside of the button and see that it still works.
https://codepen.io/susanwinters/pen/wvWjBYW
Wrap whole button with tag, not only text.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
View Image
Look at the shadow at the bottom of the above popup how do I get this type of shadow
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
<div class="card">
</div>
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
.shadow
{
position: relative;
}
.shadow:before, .shadow:after
{
position: absolute;
z-index: -1;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
-webkit-box-shadow: 0 35px 20px #989898;
-moz-box-shadow: 0 35px 20px #989898;
box-shadow: 0 35px 20px #989898 ;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.shadow:after
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
right: 10px;
left: auto;
}
<!DOCTYPE html>
<html>
<body>
<div class="card shadow">
</div>
</body>
</html>
You have to use css pseudo element along with transform: rotate
Try following snippet.
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.shadow {
position: relative;
}
.shadow:before,
.shadow: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);
}
.shadow: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 shadow">
<h3>test of the week?</h3>
</div>
Hi Iam trying to create shadow to box inside another box but not getting what I want
<div class="box effect2">
<div class="box effect2">
box inside box
<div>
<div>
CSS Styles
.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;
}
I tried this code but not successful. Please tell me if I am doing anything wrong?
I have taken code reference from the css tricks website
Turning my comment into an answer. Both shadows are there, you have the z-index set to -1, so the shadows fall under everything.
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2, .effect3 {
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;
}
.effect3:before,
.effect3:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #cc0000;
-webkit-box-shadow: 0 15px 10px #cc0000;
-moz-box-shadow: 0 15px 10px #cc0000;
box-shadow: 0 15px 10px #cc0000;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
<div class="box effect2">
<div class="box effect3">
box inside box
</div>
</div>
I added another class to the inside box so you can see what's happening. Also, you will have a difficult time setting this style of drop shadow to a child and parent element because of the z-indexes.
EDIT***
Here's the solution you're looking for. I had to add another element:
.box1 {
background: #fff;
width: 400px;
height: 400px;
position: relative;
}
.wrap {
position: relative;
z-index: 5;
}
.box2 {
background: #ccc;
width: 200px;
height: 200px;
margin: 10px;
position: absolute;
}
.effect1:before,
.effect1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect1:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box1 effect1">
<div class="wrap">
<div class="box2 effect2">my box</div>
</div>
</div>
Solution Fiddle: https://jsfiddle.net/9nqcx28a/8/
I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem.
My code:
.item {
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Most flexible answer using only CSS is probably this:
.item {
position: relative; /* or absolute */
}
.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
You can do it using peudo-element (I've used arbitrary values, you need to tweak it yourself) :
.item {
margin-left: 50%;
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.item:before {
z-index: -1;
position: absolute;
content: "";
display: block;
width: 100px;
height: 100px;
top: -30px;
left: 0;
background-color: transparent;
box-shadow: -50px 120px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
<div class="item"></div>
UPDATE
here is a js-fiddle with images available: http://jsfiddle.net/TBwWw/
I am using a tutorial that I found here.
I have an unordered list that simply links the image to a larger one and also displays the image on the page.
<ul class="polaroids">
<li>
<a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
<img src="example/cyan_hawk.jpg" alt="Roeland!">
</a>
</li>
</ul>
And then css that is supposed to be adjusting the image size, add the polaroid effect and a whole lot more.
ul.polaroids a:after {
content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
position: relative;
z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
-webkit-transition: 0 .15s linear;
-moz-transition: 0 .15s linear;
-o-transition: 0 .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
/* On hover, darken the shadows a bit */
ul.polaroids a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
The end result is supposed to be:
But they are just appearing with just the unordered list text decoration and the after title effects like so:
Everyone else in the comments on the tutorial said it worked just fine. I don't understand why it isn't working for me. I do have the css in an external style sheet that is linked and being found correctly. Finally, the Google Chrome console is showing no errors. I have tried it in Google Chrome and Internet Explorer.
Try this:
http://jsfiddle.net/jC84f/1/
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }
First off, all the images are supposed to be in a single ul, not separate ones as you have in your fiddle. Second, you're missing the list styles, and display/float properties to make things wrap.
I was able to get your example to wrap by adding the following CSS:
ul { list-style: none; }
ul li { display: inline; }
ul a {
display: inline;
float: left;
}
ul img { display: block; }
I think this is essentially what you're missing, so you'll probably want to adjust things to how you like (including spacing, classes, etc.). Here is my fiddle: http://jsfiddle.net/jC84f/3/