Light shadow on the sides of a container (CSS) - css

I have been trying to build a site with the right and left sides of the main container having a brown shadow.
So far I achieved my goal but not completely, meaning I get shadow on both sides but it is too dark. I want my shadow to be much lighter (something like Bloomingdales.com website).
Here is my css code, any suggestion?
Thanks!
.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409, -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409, -1px 0 2px #492409;
box-shadow: 4px 0 2px #492409, -4px 0 2px #492409;
}

As #Vlad Saling pointed out, css3 supports a variety of box-shadow options.
This Website has some great information concerning how browsers compute shadows. In particular:
You can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.
To solve your problem, either change the color to a lighter shade of brown, or adjust your box shadow attributes to include an alpha channel by declaring its color using rgba rather than hex:
-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x), -1px 0 2px rgba(28, 14, 3, x);
box-shadow: 4px 0 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
Should work. Replace x with the degree of alpha transparency (opacity) that you want. For example, .5 for 50% transparency.

Related

CSS box-shadow correct value position

What is the correct order of box shadow value position.
If I put the color values at the beginning or at the end it works fine, but what is more correct? Does this matter in web browsers, or do they display both? Mozilla's website and examples have the color at the end.
Which is more correct or are both correct? What about the other values of inset, offset-x-y, blur, spread-radius and their positions?
Color at the end:
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
Color at the beginning:
/* color | offset-x | offset-y | blur-radius | spread-radius */
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
The order of the values in the box-shadow property is as follows:
box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
It is important to note that the order of the values is fixed, and the values should be placed in the order listed above. It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.
For example,
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
It is generally considered good practice to place the color value at the end.
It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.
Putting the color at the beginning or end of the format string are both equally correct.
According to the formal syntax:
box-shadow =
none |
<shadow>#
<shadow> =
<color>? &&
[ <length>{2} <length [0,∞]>? <length>? ] &&
inset?
Where && means that:
all these entities are mandatory but may appear in any order.
(Note that the question mark (?) denotes that an entity is optional, so in this specific case, not all are mandatory.)

Create gradient on div css3

I need to create gradient that will be in the bootom of element and look like this
I have tried like this
.div-with-shadow {
padding-bottom: 1.4285714286rem;
border-bottom: solid 0.0714285714rem rgba(0, 0, 143, 0.05);
box-shadow: inset 0 -3.5714285714rem 3.5714285714rem -3.5714285714rem #e9e9fd;
}
<div class="div-with-shadow"></div>
But it does not look the same, this has to be some kind of gradient and not border, anyone can help me, thanks

Why is this shadow not working in Firefox?

To be honest, I don't know how to ask this strange behaviour on shadows because I'm using the CSS standards and, by my surprise, it's not working properly:
Take a look at this style:
.light.boxed {
/* -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);*/
-moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);
/* box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(4, 4, 4, 0.06);*/
}
It's supposed that Firefox Dev Edition displays the shadow taking the values from the -moz-box-shadow, but it doesn't. It displays nothing. It takes the value directly from box-shadow.
Moreover, when I uncomment box-shadow, it displays the shadow on Firefox, BUT when I scrolldown the page, it shows some irregularities in the render; I mean, at some point the shadow is darker, and at the end it's lighter again. It seems that Firefox doesn't render properly the rgba colors (only when the blur parameter is 0 and you have to scrolldown).
Is it a known bug? Do you know a solution for it?
This is the HTML:
<body class="light boxed"></body>
And more CSS:
.boxed {
margin: 0 auto;
width: 1000px;
}
Look an example here: http://jsfiddle.net/gerardbm/d7d4u5rf/
You need to open it in Firefox to see how the shadow doesn't work.
"Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported." Found this here in the Notes sections. Does that help explain the behavior you're getting?

How do you create white inset text?

Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.
The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.
.dark {
color:rgba(0, 0, 0, .6);
text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
color:rgba(200, 200, 200, 1);
text-shadow:2px 2px rgba(0, 0, 0, .2);
}
​
fiddle
Found an answer on IRC fiddle
the light is hitting from the top left so it looks darker where the tl z axis would be
You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.
I prefer just doing this for your light style:
text-shadow:1px -1px rgba(0, 0, 0, .2);
Position the dark text shadow on the opposite side of the light text shadow:
text-shadow: -2px -2px rgba(0, 0, 0, .2);

CSS drop-shadow inset for IE 8

i've been reading and experimenting with conditional css to display the following css for IE 8.
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
I have been fiddling with gradient and offset but i can not find anything about inset without having to create additional elements.
is is possible to 3 insets and use rgba, as using the gradient start and end for ie was a standard gradient. If not i will happily use basic styling and drop the css3 styling, thanks
Nope, it is not supported; http://dimox.net/cross-browser-css3-box-shadow/... However, take in consideration your analytics data and see how many visitors are really using ie8, maybe it's only a small percentage, and it's not that much of a mis;)

Resources