I am trying to use blend modes for a website for a project, but I've found that they look different on my phone browser (chrome v 78.0.3904.84 on iphone 7) to my browser on my laptop (chrome v 78.0.3904.97 on mac).
It looks like this on the laptop, and like this on the phone.
So far as I can tell, both browsers support mix-blend-modes, so I'm not sure what's different.
The code for the elements that are being blended is:
.GraphButton {
font-size: calc(10px + 8vmin);
font-weight: 300;
color: var(--button-text);
background: var(--main-yellow);
mix-blend-mode: overlay;
height: 27vh;
width: 35vw;
margin: auto 6vw;
overflow: hidden;
}
This is a div on top of an svg background image. There is no transform involved.
Does anyone know what could be causing the difference or how to fix it?
mix-blend-mode is not supported on SVG elements in Safari and iOS Safari, but it IS supported for SVG elements in chrome. See https://caniuse.com/#search=mix-blend-mode
The issue I'm having is that I don't know what they mean by a style rule that sets a font color to white for older browsers and white with 50% opacity in newer browsers and removes the underlining from the link text.. I didn't realize there was the potential to differentiate in the first place.
Update: How would I go about making it so that every time a mouse hovers over a text link, that it would display an image in place of a bullet?
Use fallback styles. Write the universally understood property first, then the newer version of the property, which the modern browsers will use but the old browsers will simply ignore.
Example: set color to white for all browsers; then set color to white with 50% opacity for browsers that understand it.
.yourclasshere {
color: #FFFFFF; /* standard syntax understood by all browsers */
color: rgba(255,255,255,.5); /* new feature, ignored by old browsers */
}
Not sure how to handle the request to remove the underline in newer browsers. AFAIK all browsers always understood text-decoration. Maybe you could use parent > child for a selector.
In that specific case you could use a fallback like:
.selector {
color: #fff; /* white */
color: rgba(255, 255, 255, 0.5); /* 50% opacity white */
}
So, as CSS rules are interpreted from top to bottom, modern browsers will set the color to transparent white. Old browsers won't be able to apply that rule since they don't support RGBA colors, so #fff will prevail.
I have a pretty simple navbar, which has it's background defined by using CSS's, background-image property with the linear-gradient function. It works great in every latest desktop browser, and it also works in Android 4.4+ browsers too. But when I am testing it on a 4.4- Android device, the backround is not visible. I've checked caniuse.com which says the following things:
that background-image property works only partially on Android 4.3- (size is not supported which I am not using anyways)
that linear-gradient function on Android 4.3- works only with the -webkit- prefix
So this would be my problem, I tought, and tried to implement a webkit version of the same css property, but to no avail. I can't make this work, what could I be doing wrong? Here's the css rule that I am using, and below it, you will find some additions that I have tried, but without success. The background appears correctly on desktop browsers, but it is invisible on mobile devices(tested it with a physical Galaxy Express, with 4.2 Android, and with a bunch of other 4.3- Androids on BrowserStack).
.converser_navbar {
height: 50px;
background-image: -webkit-linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
/* this is the webkit version, tried putting it after and before the non webkit version,
neither one works, also tried using ONLY the webkit version, that only disables the
background on the desktop browsers too, also tried prefixing background-image
with -webkit-, but that also does nothing at all */
background-image: linear-gradient(to bottom, #6374B6 0px, #3D538C 100%);
border-bottom: 2px solid #898989;
color: #FFF;
position: relative;
z-index: 10;
top:0;
transition: all 0.6s;
}
background: url("images/main_bg.png") repeat;
Is a header/banner background image in style.css, but not sure how to get a shadow around it...
I tried
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
color: #333333;
background: url("images/main_bg.png") repeat;
box-shadow: 0 0 5px 2px #282a2d;
line-height: 1.4;
}
But that didn't work out...
TL;DR:
In case you're satisfied with WebKit Chrome only support, use CSS Filters.
In case you're satisfied with polyfilled CSS Canvas Context and Canvas, you can support Mozilla and WebKit browsers, though, Chrome will have no blur for it's shadow.
If you can recreate your image in SVG, and your targeted browser do support it, that's also a viable option. Actually, this appears to be the best option in case you can get your background in SVG. Most major browsers show the same result, with the exception of Safari which appears to drop the filter.
You can read below about the process of how the options did evolve.
Original answer:
I doubt that what you're looking forward to is possible.
First of all, body takes up 100% height and 100% width of the page, the "outside" shadow of it will be always hidden.
If you set the property as follows:
box-shadow: inset 0 0 5px 2px #282a2d; /* mark the inset */
you should see the shadow, though, I doubt that's what you seek.
You could overcome the issue by wrapping the image in a new element, that's a child of body and is smaller than 100% of body's dimensions.
Also, you may make body's dimensions smaller than 100%, though, I do not encourage to do so - it may break in some browsers and so on.
My second guess, derived from that you're using a png, hence, transparent image, is that you wish to shadow the image around it's filled pixel edges, leaving the transparent untouched. While it sounds like a cool idea to do, that's not what CSS does.
The property is called box-shadow not simply shadow so it already states that it won't be possible.
I don't know if that's possible, but you could try using SVG and it's filters to do so. I'm no expert in SVG's - will not be able to provide example immediately (will look into it though).
One more possibility is to use canvas as background for your element, and apply the shadow programmatically (iterating through pixels and adding extra pixels).
Update: Didn't know that Canvas is smart enough to shadow through transparent images, the programmatical part is not necessary.
Keep in mind, that the last 2 variants will most definitely be poorly supported by browsers.
Updates:
CSS Filters:
Okay, there is one more possibility - CSS filters, though, as of writing, they are supported only by WebKit. Not sure actually if they work in all of WebKit browsers (Safari, Opera, Chrome), but they do in Chrome.
Checking with latest Safari for Windows, Opera and Chrome, proves, that the property only works on Chrome.
There is one "but", it is not supported on body either (jsfiddle.net), and I think that all of the cool stuff has left the body behind.
In case of child node, it works (jsfiddle.net)!
P.S. Eventually, we may see CSS filters implemented in every browser. That makes this the best option for such functionality.
Canvas:
Update:
I did some experiments with canvas. In general, it's a success and even works for body: http://jsfiddle.net/psycketom/3VBMJ/4/.
Though, I couldn't manage to make the shadowBlur property work. Might be it doesn't work on CSS Canvas Context.
And, Firefox natively doesn't support cssCanvasContext, so the -moz-background (It's actually -moz-element, but since there is no cssCanvasContext, it still fails) property is ignored. I think that could be hacked with an off-screen canvas.
Update 2:
The shadowBlur property works on Safari, doesn't on Chrome.
Update 3:
http://jsfiddle.net/psycketom/3VBMJ/6/ I did a test with off-screen canvas, but couldn't hack it together. I'm giving it a bit more of my time at the moment.
Update 4:
Off-screen canvas does work in Firefox - http://jsfiddle.net/psycketom/3VBMJ/12/, but, doesn't work in Webkit.
A dynamically generated canvas also does it, though, it has to be appended, and hidden afterwards.
Update 5 (worth to check):
I did a dirty polyfill, now, the Canvas background gets supported in both - Webkit and Mozilla browsers.
Update 6:
I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, Safari (for Windows, 5.1.7 7534.57.2) works.
As for... IE (10.0.9200.16618) doesn't work, Opera (12.14 1738) doesn't work.
SVG:
First of all, SVG requires that you create your image in vectors.
Update:
Oh boy, oh boy... SVG... http://jsfiddle.net/psycketom/3VBMJ/18/. This is not really an background image, it's just SVG poured inside the HTML, and it's container element has pointer-events: none applied to it, to disable any mouse input.
Works in both, Firefox and Chrome, and probably others because it depends on SVG that is a bit more supported than CSS3/HTML5. Keep in mind though, that some parts of SVG are not supported, filters, possibly, being one of them.
Update 2:
By pouring everything what we had as inline html before into a file of it's own, we can use SVG as background-image. Checked in Chrome and Fox - works in both.
Update 3:
I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, IE (10.0.9200.16618) works, Opera (12.14 1738) works.
As for Safari (for Windows, 5.1.7 7534.57.2) - it works, but doesn't display shadow at all.
This is what I meant with child element:
http://jsfiddle.net/psycketom/3VBMJ/21/
Additional information:
http://jsfiddle.net/psycketom/3VBMJ/17/ it appears, that the shadowBlur in Chrome is supported in general (the red box), but it lacks support for PNG's (smiley).
I'm confused, now, is it because of the recent switch to Blink or it has never been supported in Chrome?
The first value is for the horizontal offset, the second for the vertical. the third describes the blur radius and the last the spread radius.
But ithink it works if you only define blur and spread, too.
What browser do you using?
have you tried
-moz-box-shadow: 0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;
first you cant create a shadow behind <body> tag
to have shadow in your webpage you need to create a container using div or a table data inside your data by using <div class="x">your data</div> or <table><tr><td class="x">your data</td></tr></table>
now use class x to give shadow
now for <div> your code will be like
.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}
now for <table> your code will be like
td.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}
To answer your question briefly, there is no background-box-shadow property, and box-shadow always affects the whole element (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). So the work-arounds are the only way to do it.
This works for background-image:
body{
filter: drop-shadow(0 0 5px #fff);
}
Check here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
I would like to use SVG sprites in Opera, and images are shown well on default zoom level, but when i zoom in they are not rendering properly.
The reason i want to use this is so i can have a simple sprite.png fallback for browsers that do not support SVG.
This works well in other browser, only Opera is giving me trouble...
Example of html and css:
<span class="members-login sprites">Login</span>
.sprites {
background: url("/images/sprites.svg") repeat scroll 0 0 transparent;
}
.members-login {
background-position: 0 -39px;
display: block;
height: 1em;
line-height: 1em;
padding: 0 0 0 16px;
}
Opera is known to cause issues with svg as background images, especialy for sprites. Since you are using fallback png, do that also for opera with opera specific css like this.
doesnotexist:-o-prefocus, .sprites {
background: url('/images/sprites.png') no-repeat 0px 0px;
}
If you find a solution to fix opera issue with svg sprite please post it here.