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;)
Related
I have a very (relatively) complex style requirement for a component. Part of the complexity comes from the CSS box-shadow property. As we know, React Native does not offer this property. Instead, one has to make use of the four style properties shadowOffset, shadowRadius, shadowColor and shadowOpacity. For this component, I have four actual shadows, two of which have inset -- which, React Native does not support insets.
Here's the CSS snippet I'm aiming to implement:
background: #FFFFFF;
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.07),
0px 8px 16px rgba(0, 0, 0, 0.07),
inset 0px 2px 4px #FFFFFF,
inset 0px -2px 4px rgba(0, 0, 0, 0.25);
border-radius: 16px;
I'm at a total loss. I've tried more than a few things. I've tried using the out-of-the-box shadow* properties with React Native, and trying to recreate an inset like this fella did. I've tried using styled components. I even tried to hack together using SVG (this requirement is coming from Figma which offers an SVG).
Any ideas on how I can get this to work?
I'm thinking maybe my only option is to bridge to a native iOS component, but I've never bridged that gap and it seems intimidating.
<LinearGradient
style={styles.gradientButton}
colors={['#040406', '#040406', '#040406', '#444446']}
start={{ x: 0.48, y: 0.1 }}
end={{ x: 0.5, y: 0.6 }}
>
with background #777 works good
Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.
I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.
{
width: auto;
border: none;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
Shadows should appear on the left-side as well in MSEdge.
The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.
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?
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.