CSS3 Wrapping Drop Shadows
-
-
- Designhow
- Elite Rocketeer
- Posts: 1013
- Thanks: 0
-
Hey guys,
I might be miles behind with not knowing this but found it on a tutorial site...I got this to work on one module , only on one side. when I try to apply it to any others it is quite harsh and again only one side. How do you guys do this magic?
70.32.73.244/joomla/en/
.rokstories:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
} - Last Edit: 13 years 6 months ago by Designhow.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Not exactly sure what you're trying to accomplish, but if you want the shadow to be on all sides, you need to specify 4 pixel values, instead of 3. I always use this web page as a reference for box shadows, there are a lot of examples and codes for them. I find it helpful, maybe you will too.
http://www.css3.info/preview/box-shadow/ - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- That is an image effect, not CSS3. There is actually an image that contains the shadows that is added as a background property. You could just grab that image and code out of the template and apply it to yours. Might be a bit tricky but it's possible, you just have to find the right code.
- The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.055 seconds