How do I apply this soft shadow effect underneath the horizontal purple. rows, I want to use this effect on my website. I used the box-shadow but it didn't work.
I could imitate the effect in your sample image.
Here is what I did.
HTML
<div id="outer">
<div id="inner"></div>
</div>
CSS
#outer{
width:300px;
height:300px;
background:#383142;
}
#inner{
width:300px;
height:100px;
background:#514762;
box-shadow:0 15px 30px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
}
Related
I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.
<div class="darken-rectangle">
<!-- inner text container divs go here -->
</div>
CSS:
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
}
This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.
Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?
I think what you want is box-shadow, see jsFiddle
HTML
<div class="darken-rectangle">
Test Text
</div>
CSS
.darken-rectangle {
/* ... */
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
border-radius: 3px;
}
I have two elements, one for header and the other for navbar.
I want to apply z-indexproperty to make the header on the top, then the navbar on the bottom.
HTML
<div id="main">
<div id="header"><h2 id="logo">Logo</h2></div>
<div id="navBar"><span>x</span></div>
</div>
CSS
div#header {
height:70px;
background-color:#fff;
border-bottom:1px solid rgba(0, 0, 0, 0);
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
z-index:20;
}
div#navBar {
height:50px;
padding-right:240px;
line-height:45px;
background:yellow;
z-index:21;
}
div#header #logo {
position:relative;
right:-20px;
bottom:-20px;
}
Also you can see the demo on jsfiddle
Why this problem occur ?
And how to solve it ?
For z-index to work you need to set position on those elements: absolute, relative, etc.
You mean the header text appearing above the nav bar? Perhaps you could try moving the header div tag into the beginning of the nav bar div tag.
It will work if you just switch the z-indices. Lower index means bottom. You have the larger index on the bottom element. Change 21 to 19. Also You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.
div#header {
position: relative
height:70px;
background-color:#fff;
border-bottom:1px solid rgba(0, 0, 0, 0);
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
z-index:20;
}
div#navBar {
position: relative
height:50px;
padding-right:240px;
line-height:45px;
background:yellow;
z-index:19;
}
div#header #logo {
position:relative;
right:-20px;
bottom:-20px;
}
I cannot get box-shadow to create a shadow around the entire perimeter of a div. The following works in FireFox, however not in IE 11.
I have tried the following: Internet Explorer - CSS Shadow All Around
Here is a JSFiddle for the problem.
CSS:
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px #004C7E;
}
HTML:
<div class="addAccountPanel"> </div>
There is a fourth parameter in the box-shadow that lets you increase the size of the shadow, and makes it more visible
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px 2px #004C7E;
}
fiddle
I want to create a paper effect shadow using the following css, but I have 3 divs inside this a div which need to be side by side. I use float to make the divs side by side, but this makes the parent's div height smaller than the inner content. I tried clear:both and overflow: hidden to fix the issue which makes the height relative to the content but this removes the shadow effect.
CSS
.boxcontainer {
position:relative;
width:90%;
}
.boxcontainer:before,
.boxcontainer:after {
content:"";
position:absolute;
z-index:-1;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-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);
transform:rotate(-3deg);
}
.boxcontainer:after{
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
HTML
<div id="paperbox" class="boxcontainer">
<img class="mafacemobile" src="/images/maface.jpeg" alt="ma face" width="183px" height="183px">
<div id="textwrapper">
<h1>
FILLING MORE TEX
</h1>
<div id="icons"
<img...>
</div>
</div>
</div>
I wasn't 100% sure of exactly what you had in mind for the end result due to the minimal code you provided, but hopefully this is close!
Check out my pen for a working model: http://codepen.io/gnowland/pen/crGtE
...and here's the finished code:
HTML
<div id="paperbox" class="boxcontainer">
<div class="boxinner">
<img style="-webkit-user-select: none" src="http://placehold.it/183x183" class="mafacemobile" alt="ma face" width="183px" height="183px">
<div id="textwrapper">
<h1>FILLING MORE TEXT</h1>
<div id="icons"><img style="-webkit-user-select: none" src="http://placehold.it/50"></div>
</div>
</div>
</div>
CSS
.boxcontainer {
margin: 10px;
display: inline-block;
position: relative;
background-color: #fff;
z-index: -1;
}
.boxcontainer:before {
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background-color: #fff;
-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);
transform:rotate(-3deg);
}
.boxcontainer:after {
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background-color: #fff;
-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);
transform:rotate(3deg);
}
.boxinner{
position: relative;
padding: 20px;
z-index: 1;
}
.boxinner > * {
/* NOTE: This is just for demo, utilize the exact selectors in your code */
display: inline-block;
padding: 2px
}
I used your .boxcontainer as a wrapper and added an inner div (.boxinner) to hold the contents so you can pad it, etc.
The major addition was using display: inline-block. Get friendly with that property, it's awesome.
You can play around with my code on codepen and let me know if you have any follow-up questions.
Hope this solved it for you! :-)
EDIT: I just realized your original question was from 7 months ago... you've probably figured it out already but hopefully this helps someone else.
Try adding position:relative to .boxcontainer
Could you provide the CSS for .boxcontainer and it's contents, too?
And also, which container is .drop-shadow being applied to?
It would be a good idea to set up a jsfiddle
I have the following box-shadow inset css3 styling:
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
The inset styling appears on all 4 sides of the box but I do not want styling on the top. How can I remove the styling from the top but keep the styling on the Left, Bottom, Right?
Thanks
This is what you want:
.right-left-bottom-shadow {
box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
The first one is left, second bottom and last the shadow for the right side. This looks really nice if your border has color #CCC.
You can't do that with just box-shadow so far, but you can composite box-shadow with other possibilities like overflow: hidden. For example, you can push the top shadow outside of parent element and hide that part with overflow: hidden.
See this demo: http://jsfiddle.net/CatChen/Fty2N/3/
No CSS method I know for this but following can be a work around (not a perfect solution)
<div id="mydiv">
<div class="workaround"></div>
</div>
CSS
#mydiv {
background-color:#f00;
height:100px;
width:100px;
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
padding:0 2px;
}
#mydiv .workaround {
background-color:#f00;
width:100%;
height:10px;
}
Check Fiddle http://jsfiddle.net/bZF48/17/