I want to add a box shadow to my Nav-bar/header at the top of my page.
When I do like this:
.shadow { box-shadow: 0px 0px 5px #333 }
It works fine; however, because of the curvature you can see it curving at the bottom corners - I need it to be a straight down shadow.
Now because my header wraps the top of the page - the width is 100% - I could extend the side off-screen:
.shadow {
...
box-shadow: 0px 0px 5px #333;
left: -10px;
right: -10px;
padding: 0px 10px /* compensates for the spaces created either side */
}
This way the curves are hidden off screen; however this seem's like a filthy, dirty solution - is this the only way to achieve the effect I'm going for?
I've thought of adding an after with a background gradient to simulate the shadow - like so:
.shadow:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 100%;
height: 10px;
background: gradientStuffICantRemember
-o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
}
However this is unbarabely filthy and disguisting.
Should I just extend out the header?
box-shadow has another parameter called spread that defines the size of the shadow..... it could help:
box-shadow: h-dist v-dist blur spread colour;
Cheers!
Related
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
Please consider the following fiddle. I am trying to create an arrow at the bottom of the callout which has a drop shadow. This is working:
http://jsfiddle.net/tmcconechy/vT4rj/
However, If i want to move the dialog around by setting the root's left/top/width.
left: 9px;
position: absolute;
top: 36px;
Then the :after arrow is out of position. The way i can see to handle this is set the after: element to position: relative;top: 100%. However, as soon as i do that the shape arrow is broken?
Is there anyway i can handle this so the arrow position is relative to the box size and position?
Try this.
All I did was put a relatively positioned div around the one you want, and that's the div you move around. As per MDN, as long as there's an ancestor div that's positioned, your absolute positioning works off of the ancestor's position.
Html:
<div class="positioner" style="position: relative; top: 200px;">
<div class="inline-popup"></div>
</div>
I accomplished this by changing the left position on the arrow to 50% instead of a fixed px.
left: 50%;
h/t http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
You should keep this arrow in absolute position, so you can set it easily anywhere you want.
To shift it bottom to top, gange top position and reverse box-shadow for instance :
http://jsfiddle.net/vT4rj/1/
and then change borders :
http://jsfiddle.net/vT4rj/3/
.inline-popup:after {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.30);
content: "";
height: 18px;
left: 176px;
position: absolute;
top: -9px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 18px;
}
I`m doing this website, and I need to put some shadows over google Maps <div> to achieve a shadow effect:
However, it`s not working.
This is how my css looks like right now:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: auto;
z-index: 1;
}
#topBar {
background-image:url(img/top.jpg);
background-repeat:repeat-x;
height: 100px;
min-height:100px;
-moz-box-shadow: 0px 5px 5px #888;
-webkit-box-shadow: 0px 5px 5px #888;
box-shadow: 0px 5px 5px #888;
z-index:900;
}
As you can see, I`m using an image to create the shadow.
But my problem is: the map is not even loading.
If I put a fixed height instead of auto, it loads. But I fail at giving that shadowy vision. What happens is that the map is loaded ON TOP of the div with the shadow.
I already tried this solution already, with no success:
How to float a div over Google Maps?
Thanks in advance!
I think it will be fixed if you just add a position to the elements. Z-index needs a position to work..
So put "position:relative;" on both elements and you will be fine.
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
Ok so I am really new to CSS and have been using it quite a bit daily to get desired effects on sites. I am working on a new menu, and I am using a preconfigured stack to show hidden content when the li is mouseover. The issue is that I want the dropdown to be on top of the existing content and not drop the content down to reveal the dropdown menus. I have achieved this on a full CSS menu, but this will not work here on this menu. My dropdowns are this;
.drop_6 {
width: 500px;
text-align:center;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
position: relative;
top: -18px;
right: -370px;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
/* Background color and gradients */
background: #b5f0ff;
background: -moz-linear-gradient(top, #b5f0ff, #009fc6);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b5f0ff), to(#009fc6));
}
I tried making these absolute and the main content relative, but the jquery in this stack just does not like that at all, and I get no effect at all. Here is a link to the mockup; http://testserver1.justrightwebdesign.com/
Get rid of overflow: hidden (.stacks_out, .stacks_top).
Add position: absolute (.shell)
Add z-index: 1 (.shell)
Your problem is that you set overflow:hidden to many of the parent elements. Remove those and you should at least see some effects. Then apply position:absolute to the drop_X Elements and move them to the correct position with the top and left-attribues. You can also remove the margins since you can position them freely.
Take a look at the z-index property in css.