What's the best way to darken a background image in emails with CSS?
Eg I know usually you can use Filter etc, but I'm not sure if it works across all email providers
If using filter, this darkens the entire email including the 'overlay', and since absolute positioning isn't appropriate it's not a good solution
If using background linear gradient, it works great on many email apps, but some like hotmail won't recognise it since it uses 'shorthand' (background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('my_url')) -is there a way to not use shorthand for this?
There are two common ways:
1) using CSS3:
.yourBackgroundImage {
//halve image brightness
filter:brightness(50%);
}
2) Using overlay:
.yourBackgroundImage {
position: relative;
}
//yourBackgroundImageOverlay is a div inside youBackgroundImage
.yourBackgroundImageOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// control overlay alpha by tweaking .5 in background color
background-color: rgba(0, 0, 0, .5);
}
Related
On my project, users have the possibility to select an accent color for their profile page (var(--color-main)). Is there a possibility to create a gradient background using only that main color, for example by using the main color + a % applied to this color to make it darker (or lighter) and use this as second color to make the gradient. Is that possible?
.TabsHeader-module--wrapper--BMiDm .TabsHeader-module--bgBlock--qXkLH {
background-color: var(--color-main);
border-radius: 0 0 20rem 0;
height: 21.6rem;
position: absolute;
top: 0;
width: 100%;
}
This is an example with two custom properties defined:
--color is your main color
--alpha is the opacity quota (0-1) applied to --color for having the second gradient color
The background-image style attribute is set using a gradient shading from --color to --color(alpha)
That was made possible with rgba to define colors MDN
:root {
--color: 240, 0, 0;
--alpha: .5;
}
.gradient{
background-image:
linear-gradient(
to right,
rgba(var(--color), 1),
rgba(var(--color), var(--alpha))
);
width: 100%;
height: 200px;
text-align: center;
}
<div class="gradient"></div>
I have found that you can use variable colors with opacity control only if you give the value as RGB decimals, which are 3 numbers (e.g. 240, 240, 240). And later you can give it a 4th value, which will control the opacity of the color (i.e. will make it darker or lighter).
Here is an example:
:root {
--color: 190,190,190;
}
div {
background: linear-gradient(to right, rgba(var(--color), 0.8), rgba(var(--color), 0.3));
}
Thanks to Thankful Teira from codegrepper.com
I want to change the highlight color used by pdf.js
https://mozilla.github.io/pdf.js/web/viewer.html
Press Ctrl + F and find any word any in thid doc
I can do that by changing color in pdf js's style file.
.textLayer .highlight.selected {
background-color: rgb(0, 100, 0);
}
I would like this color to be non-transparent. if you see highlighted words is transparent.
I get the reason for making it transparent is so that underlying pdf content is visible. Pdf.js just renders transparent text over the original pdf content. It uses this transparent text for searching and highlighting.
Is there anyway I can highlight the word in a solid color?
In viewer.css the class textLayer, you can change the opacity. To make it solid, you can remove opacity or set to 1, but you will not be able to see the text. I find 0.4 looks pretty good
.textLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
opacity: 1; /* 0.4 looks nice, but 1 answers your question */
}
Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.
It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?
Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page
probably this is not needed anymore but maybe someone else wants to do the same :D
this should put a background-color on the overscroll-area of any ios device
body:after {
content: '';
position: fixed;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
z-index: -1;
background: #000000;
}
here is the link to my gist
Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.
Set the body colour body {background-color: white} should work.
More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:
body {
background-color: rgba(0, 0, 0, 0.4);
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
background-size: 100% 100%;
}
FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.
FYI 2: I recall that really old versions of Safari needed the colour set on the html element.
You can now do this with a meta tag:
<meta name="theme-color" content="#923941">
I am currently wondering which is the best CSS property to use, Opacity or RGBa? More specifically I am trying to recreate something similar to the famous BBC Home page slider, and it got me thinking why they use Opacity.
In my version I have came across using the following two versions of code:
.left-button {
background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}
or
.left-button {
background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
opacity: 0.4;
}
Obviously the second one makes the actual button image opaque too, which is why I assume the BBC has made separate buttons and background masks for the buttons (which in my opinion is unnecessary additional markup).
I'd like to use the first version with RGBa though. Would anyone care to point out why one is better than the other and if there is any compatibility issues I am unaware of?
Opacity is inherited to all child items, RGBa is not. If a child item has a lesser or no opacity, use RGBa.
IE8 and lower does not support RGBa, so you may need an opacity back-up plan.
Neither one is "better" because they do different things, so it depends on what you're trying to accomplish.
opacity sets the opacity for the entire element and all of its contents (text, inline images, etc). RGBa is a way to define a color with a certain level of alpha transparency.
So let's say you have a div:
<div>Hello!</div>
This will make the entire div and its contents ("Hello!") 50% opaque:
div {
background: #000;
color: #fff;
opacity: 0.5;
}
Whereas this will make just the background of the div 50% opaque, while leaving the text at 100% opaque pure white:
div {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
I'm trying to make the background of all tabs from a TabNavigator completely transparent (via CSS), but somehow I can't get this done correctly.
This is what I've got so far:
TabNavigator
{
tabStyleName: "tabNavTab";
fillAlphas: 0, 0, 0, 0;
backgroundAlpha: 0;
focusAlpha: 0;
borderStyle: none;
}
.tabNavTab
{
fillAlphas: 0, 0, 0, 0;
backgroundAlpha: 0;
borderStyle: none;
focusAlpha: 0;
}
But the tabs still have borders and the inactive tabs still have a tiny gradient from white to transparent.
What am I missing?
edit:
I got it. I have to set the upSkin, downSkin... properties, too!
I always recommend the use of the style explorer:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Helps me with almost all of my CSS issues.