I want to add box shadow to left and right side of a div , here I am attaching a image for that, I don't know how to do this, can somebody help me please? please notice that shadow should be to the point mark on left and right.
body {
background-color: red;
}
.boxWrapper {
height: 100%;
overflow: hidden;
margin: 30px auto;
width: 500px;
padding: 0 60px;
}
.box {
position: relative;
border-radius: 3px;
padding: 20px;
min-height: 300px;
background-color: #fff;
}
.box:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(-8deg);
left: 20px;
background-color: transparent;
box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3);
}
.box:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(8deg);
right: 20px;
background-color: transparent;
box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3);
}
<div class="boxWrapper">
<div class="box">
box
</div>
</div>
So this is definitely a neat question. I've played around and was able to at least come up with a stepping stone to the right solution. I've been doing it with the box-shadow method that has been mentioned, but have added it to both an :after and :before pseudo-selector.
Then, I've rotated both these selectors 8 degrees (just to mimic your provided image) and found that it was still showing some unwanted shadow both above the element and below the element.
To solve that, I wrapped the box with a box wrapper thats sole purpose was to define the size of the box as well as hide anything overflowing on the tops and bottoms.
It will definitely need to be adapted to how you need it, as it kinda feels hacky. But I think this provides some ideas on how to approach the problem.
I've created a Codepen so you can see it at work.
http://codepen.io/RyanAaronGreen/pen/Kagdad
Hopefully this gets you what you need. The documentation for the box-shadow property is located Here on MDN.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background-color: pink;
height: 100%;
padding: 10px;
}
.content {
width: 85%;
margin: 0 auto;
box-sizing: border-box;
height: calc(100% - 10px);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3);
background-color: white;
}
<div class="container">
<div class="content">
Hello
</div>
</div>
Use this samples
CSS3 drop shadow
Related
I want to position a custom button element under it's sibling, so that the sibling's shadow effect will be visible on button. Currently the shadow isn't visible on button, but under it. See code snipped to better understand what I mean by that:
.parent {
position: absolute;
}
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
z-index: 10;
}
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: 1;
}
<div class="parent">
<div class="box"></div>
<div class="button">x</div>
</div>
Apply position: relative; to .box so that it will support the z-index value without effecting the layout.
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 10;
}
Another option is to change z-index of .button to -1. But it may have other effects in the layout since the element will be positioned behind all other elements.
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: -1;
}
Ok, so in HTML I have one div tag with a before and after pseudo elements. This is my CSS:
.divClass{
background: #41423D;
height:30px;
}
.divClass:before{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent #41423D #41423D transparent;
border-style:solid;
position: absolute;
top: 0;
left: -14px;
}
.divClass:after{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent transparent #41423D #41423D;
border-style:solid;
position: absolute;
top: 0;
right: -14px;
}
So, in design it becomes like this:
___
/ \
Now all I need is a shadow on the before and after pseudo elements which are the 2 triangles on either side of the div. The pseudo elements have 0 width and height so using box-shadow is a little tricky.
I need the shadow along the triangle. So, what can I do?
You can use unicode character : ▲ to make the triangles.
Apply a text shadow on it.
If the shape of the triangle is not what you want you can adjust it with transform: rotate(); or transform: skewX(); or both.
It's a bit tricky and not perfect but it can works :
span {
display: inline-block;
font-size: 70px;
transform: skewX(29.5deg);
color: red;
text-shadow: 2px 2px 4px gray;
}
<span>▲</span>
There are some other possibilities, all describe on a CSS Tricks post, so check it if you want :
https://css-tricks.com/triangle-with-shadow/
If think you can check filter: drop-shadow() too. In case you do not need a support for all the browsers it may works for you...
edit:
According to the css tricks post, can't you do that ?
.triangle-with-shadow {
transform: rotate(-45deg);
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg); /* Prefixes... */
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="triangle-with-shadow"></div>
Another possibility if you just want the shape that you describe is to use the perspective :
.shape {
background: #41423D;
width: 150px;
height: 150px;
margin: 20px auto;
transform-origin:50% 100%;
transform:perspective(100px) rotateX(30deg);
box-shadow: 2px 2px 15px #41423D;
}
<div class="shape"></div>
I have an issue with my Sticky Footer at the bottom.
It works fine on all browser but not on Safari...why?? :(
#main{
background-color: #f0f0f0;
box-shadow: 0px 20px 30px -20px rgba(0, 0, 0, 0.8);
z-index: 1;
position: relative;
margin-bottom: 250px;
}
footer {
height: 250px;
z-index: -100;
position: fixed;
bottom: 0px;
}
Thanks! ;)
I have fixed it!
Just add this code... ;)
html, body{
min-height: 100%;
height: auto !important;
height: 100%;
}
Thanks anyway.
I am trying add shadow to a div. shadow should be at top and half of its height from top ( to both left and right side), someone please help me.
.test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
}
you can increase offset and reduce size of box shadow and draw 2 of them.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
/* offset-x | offset-y | blur-radius | spread-radius | color */
<spread-radius>
This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
#test {
width: 200px;
height: 200px;
margin: 10px;
border: solid 1px red;
position: relative;
background-color: white;
box-shadow: -50px -50px 5px -50px, 50px -50px 5px -50px
}
<div id="test"></div>
This could be a simple way to do it, quite a few possibilities.
.parent{
width: 200px;
height: 200px;
margin: 10px;
position: relative;
}
.test {
z-index: 2;
width: 100%;
position: relative;
height: 100%;
border: solid 1px red;
background-color: white;
}
.halfshadow{
position: absolute;
width: 100%;
top: 0;
height: 50%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="parent">
<div class="test"></div>
<div class="halfshadow"></div>
</div>
I want to implement a picture shadow as below
I tried to use the following code, but that can't work as I want
Code snippet:
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 30px;
height: 5px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(0, 0, 0, 1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
-webkit-transform: scaleX(5);
transform: scaleX(5);
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
}
<div class="oval"></div>
I want to put the HTML code below the picture if the CSS code works well.
Another method to achieve this would be to make use of a pseudo-element with CSS transform. In the below snippet, the :after pseudo-element is rotated in X-axis by close to 90deg (but not by equal to 90deg) to give it an oval like appearance. Then by adding a radial-gradient background and box-shadow, we can get an appearance close to the image in the picture.
One advantage of this approach is that the shadow that is produced is responsive and so it can adapt to change in container/image sizes.
.oval{
position: relative;
height: 200px;
width: 200px;
border: 8px solid red;
border-radius: 50%;
}
.oval img{
border-radius: 50%;
}
.oval:after{
position: absolute;
content: '';
height: 100%;
width: calc(100% - 40px); /* to offset for the shadow */
top: 25%;
left: 20px; /* to offset for the shadow spread */
border-radius: 50%;
backface-visibility: hidden;
transform-origin: 50% bottom;
transform: rotateX(85deg);
background: radial-gradient(ellipse at center, rgba(216,216,216, 0.5), rgba(248,248,248,0.1));
box-shadow: 0px 0px 20px 20px rgba(248,248,248,0.5);
}
/* Just for demo */
.oval#oval2{ height: 300px; width: 300px; }
div{ float: left; }
<div class="oval">
<img src='http://lorempixel.com/200/200/nature/1' />
</div>
<div class="oval" id="oval2">
<img src='http://lorempixel.com/300/300/nature/1' />
</div>
You could achieve this quite easily if you're able to wrap the <img /> element in a container tag such as a <div>. By using the :after pseudo-selector on the parent div, you can achieve a similar approach using box-shadow.
For example, assuming you have the following markup:
You may add the following CSS definitions:
.image-round {
border: 4px solid red;
border-radius: 50%;
}
.image-shadow {
display: inline-block;
position: relative;
}
.image-shadow:after {
display: block;
content: '';
position: absolute;
bottom: -30px;
height: 10px;
right: 5px;
left: 5px;
border-radius: 50%;
background: #ccc;
box-shadow: 0 0 10px 10px #ccc;
}
Of course, you can modify the left and right properties of the :after pseudo-element to achieve a better look.
jsFiddle Demo