CSS styling transparent div
I have a video tag with a div displayed on top. The div is very pretty and visible for the most part, only dark images are a bit problematic.
For testing, I searched for 3 photos and overlaid them on my div.
The question is, how would someone create this overlay layout so that it is invisible and clearly visible at the same time?
The result looks like this:
Good visibility!
Poor visibility
Visibility ok, background visibility poor
.container{
position: relative;
}
img{
width: 100%;
height: 100%;
}
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: black;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div class="container">
<img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
source to share
While it is arguably a better fit for UX.SE, there are several options I could suggest.
First, don't use opacity for the entire element, use a transparent background color to make the white text stand out.
Second, highlighting the black (ish) tag in white (or transparent white) will allow the element to be more visible against a darker background, but not affect brighter colors.
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0px 0px rgba(255,255,255,0.3);
}
source to share
You seem to be concerned that one hard-code color doesn't work for all dark, neutral, and light backgrounds.
There is a relatively new CSS property called background-blend-mode
that controls blending of two backgrounds with each other. You can use this property to specify a blending mode that creates some contrast in all situations.
Disadvantages:
- Both images and overlays must be part of the element's background (
mix-blend-mode
better option with less support) - The overlay color should be chosen strategically. In the next example, I used transparent white instead of transparent black, since the difference filter does not affect black.
.photo {
position: relative;
height: 200px;
background-blend-mode: difference, normal;
}
.photo span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
font: bold larger/50px sans-serif;
color: rgba(255, 255, 255, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-1 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg) center / cover;
}
.photo-2 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg) center / cover;
}
.photo-3 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg) center / cover;
}
<div class="photo photo-1"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-3"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
source to share
-
how to use the text / box tag? You can apply a text shadow with white or black color, or a shadow to the .tag. There will be enough contrast here.
-
Another way is to use the same image as the background image on the tag and apply a filter to it . (change in color or brightness, etc.)
-
Something else that comes to my mind would be calculating using a canvas to determine if the bottom corner is dark or light and adding another class to the .tag so you can use two versions. One for each type of background
- Finally, possibly blend-modes :
mix-blend-mode: difference;
source to share