I am trying to apply the lifted shadow effect with css to a box but when I use the negative z-index the shadow goes behind the box and the effect that should stay at the bottom of the box disappears too instead of staying for the effect to take place.
Here is my code and how it should look: http://jsfiddle.net/K7tSy/4/
.boxz:before {
z-index: 1;
position: absolute;
content: "";
bottom: 8px;
left: 28px;
width: 90%;
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);
-ms-transform: rotate(-3deg);
transform: rotate(2deg);
}
And this is the test site http://www.codita.ro/asd/ notice if I set the z-index to negative the effect disappears instead of showing up like on the fiddle. Can someone explain whats preventing it from displaying like on in the fiddle when I set the negative z-index?
Your element is a child of a container that doesn't have a z-index stacking context. If you are putting it within a div for a background color, style the div with a "position: relative" and z-index = 1 to set a stacking context within the container.
Ref:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context?redirectlocale=en-US&redirectslug=CSS%2FUnderstanding_z-index%2FThe_stacking_context
Remove content : "" from class .boxz:before.
Hope this will give you result as you want.
I have tested in your http://www.codita.ro/asd/
OP
Add background-color:#FFFFFF in your wrapall class.
Related
i have a school project where i need to replicate a website.
i want to add the shadow effect under text in a stretched oval way but i cant figure out how to do this prefectly, i just end up with a blurry rectangle.
this is what i have at the momentClick here
and this is what it is supposed to look like Click here
This is the code that i have (that creates the blurry rectangle
box-shadow: 0 50px 20px -8px #000000;
can anyone help me on how to make the shadow that i have now into the shadow that it is supposed to be? (2nd picture)
Thanks in advance,
I would use a pseudo-element, translate and rotate it through transform, and add a filter: blur to it. Do note eventual compatibility issues.
button {
position: relative;
margin: 2rem;
}
button::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translate(0, 200%) rotateX(70deg);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
filter: blur(3px);
}
<button>Click me</button>
I am facing a problem in adding a box shadow to the right border of a polygon shape just like the image below:
and I want to add shadow where the red line is as you can see it in the image below:
and I made this shape simple by this:
HTML:
<div class="shape">
....
</div>
CSS:
.shape {
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
I did not used clip-path, since it is not compatible with IE and you have to do some extra settings to make it work on Firefox and some other browsers and I wanted to keep it simple so I went with the easy way. But the problem i am facing is to add shadow to the right corner only using CSS. Is there any solution for that? or I will have to use clip-path in order to add shadow to right corner?
If you can afford that the image is slightly rotated... (4 degrees)
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:35px;
}
.rightDiagonal img{
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
margin:-15px;
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
<div class="rightDiagonal">
<img src="http://placehold.it/100x180/0ba">
</div>
otherwise...
if not, than you'll need an additional layer (<div>) of complexity, where the most outer div is the wrapper, the inner div has the shadow and is at 4deg degrees and than the inner image if restored to 0 using -4deg
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:15px;
}
.rightDiagonal div {
display:inline-block;
overflow:hidden;
margin: -15px 0 -15px -15px;
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
.rightDiagonal img{
margin-right: -15px;
transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
}
<div class="rightDiagonal">
<div><img src="http://placehold.it/100x180/0ba"></div>
</div>
<div class="rightDiagonal">
<div><img src="http://placehold.it/170x200/a0b"></div>
</div>
Try this CSS:
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :
Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.
FIDDLE HERE (this is what I could achieve so far. )
Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::
<ul class="bxslider fade out">
<li><img src="img/bp-1.jpg" /></li>
</ul>
CSS ::
.bxslider {
margin: 0;
padding: 0;
}
.bxslider li {
position: relative;
display: table;
}
.bxslider li:after {
content: '';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
box-shadow: 0px 2px 15px rgba(0,0,0,.7);
z-index: -1;
background: rgba(0,0,0,.2);
}
.bxslider li img {
width: 100%;
max-width: 300px;
}
P.S. I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.
But adding a box-shadow to an image in bx-slider is a challenge , here's why ::
bx-slider adds a class called bx-viewport which has the following css overflow: hidden;, and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .
OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .
So how do I go about doing this?
You can check my approach on JSFiddle.
I have added title inside by using H3.
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
<h3>X1 UNFOLDED</h3>
</li>
Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li. JsFiddle Link
HTML:
<ul class="bxslider">
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
</li>
</ul>
CSS:
.bxslider > li {
padding-bottom: 20px;
}
.img-wrapper:after {
content:'';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
z-index: -1;
background: rgba(0, 0, 0, .2);
}
Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider.
Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.
This is how I added a box-shadow to my carousel images:
http://jsfiddle.net/Yq3RM/995/
.bx-viewport {
padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
box-shadow: 0 0 3px 0 #000;
}
As the title suggests I'm having an issue with an inset box shadow going underneath my H2 elements background, I need it to be above the element.
http://jsfiddle.net/9QYT4/
I've set the background image up to allow easy editing of the colors depending on pages of the site visited, any help on how to make the shadow appear above the h2 is appreciated, thanks!
Also, would it be possible to do something like this with a png gradient as well? That would be a better solution as I'm trying to only get the shadow on the right (but it's showing on the top and bottom as well)
SASS
#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
color:#646567;
text-align:center;
}}
View the HTML on the JSfiddle, thanks!
I created pseudo after element that contains your shadow: http://jsfiddle.net/jPUX3/
#region-postscript-second:after{
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%; width: 14px;
box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}
and to #region-postscript-second I added:
position: relative;
Here at the end is something about one side box-shadows - http://css-tricks.com/snippets/css/css-box-shadow/
The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too.
When the mouse is not over the boxes, they go back to the same size with no drop shadow.
Normal:
Mouse over:
Scroll over the boxes to see the effect here.
jsFiddle DEMO
Hovering over elements and making them larger can be done in many ways, and it depends on your layout requirements and the framework your using.
Since those boxes appear to be div's with CSS3 box shadow property, you can do something like that in pure CSS using :hover
HTML:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
CSS:
body {
background-color: black;
}
.box {
background-color: grey;
width: 200px;
height: 400px;
float: left;
border: 6px solid red;
margin: 10px;
}
.box:hover{
width: 250px;
/* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
height: 452px;
/* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
/* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
/* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
margin-top: -18px;
-moz-box-shadow: 0 0 50px red;
-webkit-box-shadow: 0 0 50px red;
box-shadow: 0 0 50px red;
}
EDIT 2:
Revised jsFiddle DEMO
You can accomplish this using "transform: scale(x,y)" to zoom your element.
E.g.
div:hover{
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
will zoom your div by 1.5 times on x-axis and keep 1.25 times on y-axis.
To add shadow -
div:hover{
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
This is easily accomplished with some HTML and CSS. They're commonly called "Dropdown" menus or "pop-out" menus and there are tons of tutorials on how to make them; here's one:
http://www.seoconsultants.com/css/menus/tutorial/