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.)
Related
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
I am reading the first example on LESS page
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
box-shadow: #style #c;
-webkit-box-shadow: #style #c;
-moz-box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
Above code will generate something like
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
For #style variable, what if I want to use box-shadow: 0 0 5px and 0 0 (5+5)px, without having another #style2 as variable input.
Is there anything like a indexAt for #style in LESS? To do something like
#style.at(3)+5
Expected Output:
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
Manually (but must all be the same output)
Using just your current mixin code, you can get your addition this way:
LESS
.test {.box-shadow(0 0 unit(5+5, px), 30%)}
Produces:
CSS Output
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
Automatically with LESS 1.3.2+ (Messy and Difficult)
I've modified the mixin to do some javascript evaluation and get what you want. However, I am not a regular expression expert, nor technically a javascript expert (just know enough to get around), so there may be a more concise way to do what I am doing and also a more general use way of doing it. In my solution here, it requires that you give it a three property #style string and that the last one be given in a px value (so it is not very flexible, but meets your exact specifications fo the question here). Obviously, the LESS 1.4.0 code below is better than this, but until that is out of beta, some (perhaps you) might need something more like the follow:
LESS
.box-shadow(#style, #c) when (iscolor(#c)) {
#firstTwoParams: ~`(function() {
var makeArray = "#{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
return (makeArray[0]+makeArray[1]);
})()`;
#thirdParam: unit(~`(function() {
var makeArray = "#{style}".replace(/^\[/,'').replace(/\]$/,'').split(',');
return makeArray[2];
})()`, px);
#resetStyle: #firstTwoParams (#thirdParam+5);
box-shadow: #style #c;
-webkit-box-shadow: #resetStyle #c;
-moz-box-shadow: #style #c;
}
CSS Output is the same as the LESS 1.4.0 code answer below.
Automatically with LESS 1.4.0 (Clean and Easy)
Edited based on commented desired output
In the latest version (currently beta, 1.4.0) of LESS, you could use the extract function to access the third member and then automatically have something set up to add to it. Here is an example of a reworked mixin (it would use the exact same call as you currently have):
.box-shadow(#style, #c) when (iscolor(#c)) {
#resetStyle: extract(#style,1) extract(#style,2) (extract(#style,3)+5);
box-shadow: #style #c;
-webkit-box-shadow: #resetStyle #c;
-moz-box-shadow: #style #c;
}
So your .box div code that calls it would produce this:
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
It has added 5px to your 5px because of the constant set in the #resetStyle variable in the new mixin.
Im sorry, this is a bit rude, maybe, but ScottS - saw your answer to another question and just know/hope that you might have the golden solution for me ... :-) So ScottS ... could I maybe lead you in the direction of my question: CSS / HTML: centering absolute element in browser window regardles of parent position (parent also absolute) ... have an example of the problem here:
http://jsfiddle.net/Nhd8y/4/ ...
#megamenuShops li:hover .dropdown_1column_shop {
left: calc(50% - 400px);
left: -moz-calc(50% - 400px);
left: -webkit-calc(50% - 400px);
position:fixed;
top:inherit;
}
the div that appears on onmouseover stays in viewport (because of fixed position) when scrolling down - it should stay with the parent menu block. But if I do this I can't get the div centered in the browser window horizontally :-/
And last but not least ... many apologies to ttback for using your question to try to get the attention of ScottS ... hope you will forgive me ...
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);
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.
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;)