Im creating a website that has three columns of content.....
navigation float: left;
main content centered
right column float: right;
Is it possible to drop shadow all three of these areas.
I tried and it didn't work wondering if the divs prohibit the end result?
There are various ways of doing background shadows
1) To give background url as drop shadow image for the div and give some margin-left:5px which makes show like a drop shadow.
2) to get four images like topright , right ,bottomright,bottom image and position them one by one after the divs.
choose whatever is easy for you and it should work perfect. See the below linke for some exampel
http://www.alistapart.com/articles/cssdropshadows/
we implemented drop shadows at the following location for images
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263
with firebug you can see how we implemented , its the second approach.
let me know if you have more questoins.
Of course you can apply drop-shadow to all of these at the same time, one solution if your ok with the browser support listed here http://caniuse.com/css-boxshadow is to simple just use CSS3 box shadow.
just simple target all three selectors of your containers like so.
.container-left, .container-middle, .container-right { }
then apply box shadow like so (dont forget browser prefixes)
and I'm using RGBA so we get to set the Alpha transparency as well, but you could use HSLA also.
.container-left, .container-middle, .container-right {
-webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
-moz-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
}
Hope this was helpful.
Related
I'm using Bootstrap 4 to create my website, and I want the sides to a different color and have drop shadow, making a floating paper effect. Here is an example of what I'm looking to achieve. How would I go about doing this, while using Bootstrap?
It would be something like this:
/* the numbers move the shadow: 1) r-l; 2) up-down; 3) blur. Then the color. */
box-shadow: 4px 4px 8px #ccc;
I have absolutely no experience in programming, html, css or anything.
Still, i want to make some kind of website and I'm struggling with several issues right at the beginning.
For starters, my wordpress theme lets me have full width navigation bar without touching any code.
Okay, but i want to have a full width drop shadow effect under the navigation bar. This just doesn't happen and no matter where i try to dig the problem, i just can't do it.
the link to my website.
As you can see, the drop shadow doesn't go full width.
I've seen sites which use the effect so it should be possible. Is it a problem with my theme, should i just forget about it?
(And yeah, the site's really ugly but i'm planning to update it when i have time)
In your CSS You need to remove the boxshadow from div id="navigation" and add it to div id="nav-container"
something like this:
#nav-container {
-webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}
Wrap your nav-container div with another div and apply the drop shadow effect to it. After applying the change code looks something like below
<div class="shadow">
<div id="nav-container">
.....
</div>
</div>
then shadow class in css should be like this
.shadow{
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}
I have a background pattern which can be easily repeated. The problem is i have a shadow to the bottom of the background and to the right of the background. How do I repeat such an image? I thought I can probably cut the piece from the right and overlap that right shadow. Or using whole image is the only solution?
My suggestion is to use box-shadow css property to apply the shadows for your element instead repeat an image for the shadows also. You can use the following to make the shadows like your example:
-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */
Of course, as you see these properties doesn't support internet explorer 8 and below but you can use css3pie, a script that bring you some css3 properties to internet explorer. Is something that I often use.
Example: http://jsbin.com/iquso3
An alternative is to use a jquery solution from the many that exist.
For a background, using a whole image is the only solution, so you'll need separate images to do this on a flexible sized box.
You can probably keep the html and add the shadown using css, or by dynamically inserting extra divs using javascript/jquery.
I've been polishing up a page I built over the past day or two and have run into an issue after using box-shadow - I was hoping someone might shed some light on an easy way to fix this.
The Setup:
I have a div that has a few properties, including width, max-width, and box-shadow.
#mydiv {
width:100%;
max-width:1200px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
The Problem:
The "box-shadow" property adds 40px to the width of the div element - 20px on each side. When a screen is small enough that the content should hit the 100% width attribute, we see a horizontal scroll-bar. After digging through the CSS I discovered it was because the div was technically something more like width: 100% + 40px;
What I've Tried:
I've considered setting overflow:hidden on the parent div, but I do have a min-width set that would then make content inaccessible. I've also tried using a percentage for the size argument in the box-shadow CSS - 1% for example - and then setting the div's width to 98% - but the box-shadow CSS doesn't seem to accept a percentage for its size. I also have considered using javascript to test the browser width and then display or hide the box-shadow element accordingly, but it doesn't seem like the optimal solution.
There has to be a simpler way to handle this. Thoughts?
It's a browser bug.
The spec used to be unclear about this, but wording has since been added to clarify that shadows shouldn't trigger scrolling:
Shadows do not trigger scrolling or increase the size of the scrollable area.
But as a result of this earlier omission, most browsers did trigger scrolling for shadows. This has now been fixed in all recent browsers.
In older browsers, you'll either have to live with the scrollbars, add overflow-x: hidden to your #mydiv and hope it doesn't break anything, or find another way to add shadows (e.g. using good old PNGs).
Also see the following two related questions:
Firefox & CSS3: using overflow: hidden and box-shadow
CSS box shadow on container div causes scrollbars
There's a workaround to the problem of scroll bars in fluid width sites with box shadow.
If you add an #media instruction in your CSS you can detect when the browser window is at a certain width (modern browsers support this and IE9 should too).
For example, for a centered pagewrap div with a max-width set to 940px, try adding this to your stylesheet:
#media screen and (min-width: 998px) {
div#pagewrap {
-moz-box-shadow: 3px 8px 26px #a1a09e;
-webkit-box-shadow: 3px 8px 26px #a1a09e;
box-shadow: 3px 8px 26px #a1a09e;
} }
The min-width of 998px in the #media css is to make the drop shadow disappear just before it triggers the scroll bar.
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.