I've been trying to get that property to work so I don't have to resort to photoshop to utilize effects like screen and multiply and stuff. I see references to it everywhere, but I can't seem to get it to work on a page I'm working on.
Maybe I'm implementing it wrong?
.nav-items {
display: inline-block;
font-family: Porter;
font-size: 2em;
letter-spacing: .05em;
margin: .3em;
padding: 5px;
background-color: #1e1e1e;
background-blend-mode: screen; }
of which nav-items is li's in a particular ul. Background is just a solid gray block not using the screen blend mode. Any wisdom to be shed?
According to the documentation:
Blending modes should be defined in the same order as the background-image CSS property
But you are not specifying a background-image. background-blend-mode does not blend colors, it blends images.
Blend modes can be used in 2 different attributes,
background-blend-mode
mix-blend-mode
The first one sets the effect between 2 backgrounds in the same element (it can be an image and a solid color)
The second one sets the effect between the element and the underlying elements (that seems to be your case). But note that it will affect all the element, (borders, text, and so on) - not only the background
Related
I wish to use CSS background shading to annotate some text in HTML.
But, the regions may overlap each other.
In this example I wish to shade the background of "Jim, Alex, Dunedin" in yellow, then "Dunedin, 184.3" in blue. In this instance, the "Dunedin" element would therefore be shaded in green.
I'm pretty sure this isn't possible in HTML, since I don't think span elements can overlap.
Any other solutions to this problem offered?
Can it be done? Yes.
Should it be done? Maybe not the way I've shown it. It's just to get you started.
span:first-of-type {
background-color: yellow;
}
span:last-of-type {
background-color: lightblue;
display: inline-block; /* needed so that the next line will work as we cannot transform inline elements */
transform: translateX(-59px); /* move this element 59 pixels to the left so that it overlaps */
mix-blend-mode: multiply; /* blend the backgrounds together */
}
<span>Jim, Alex, Dunedin</span>
<span>Dunedin, 184.3</span>
Maybe it would make more sense to process this HTML so that the markup is changed to look something like the following:
.yellow {
background-color: yellow;
}
.blue {
background-color: lightblue;
}
.yellow.blue {
background-color: lightgreen;
}
<span class="yellow">Jim, Alex</span><span class="yellow blue">Dunedin</span><span class="blue">, 184.3</span>
<!-- note, newlines above would result in whitespace separating the background colors between the <span>'s -->
You can can accomplish most of what you're setting out to do via relative/absolute positioning, z-indexing, and setting opacity on these elements to anything under 1.
For example:
<h1>Image Transparency</h1>
<span style='opacity:.3;background:yellow; position:absolute;width:100px; height: 1em;'> </span>
<span style='opacity:.3;background:#98fffc; position:absolute;width:100px; height: 1em; left: 50px;'> </span>
<p>The opacity property specifies the transparency of an element. The lower the
value, the more transparent:</p>
Good luck!
Note: in the end I solved the problem by analysing the data & producing a different span for each differently shaded block.
So effectively, my code produced:
<span class='yellow'>Jim, Alex, </span><span class='yellow-blue'>Dunedin, </span><span class='blue'> 184.3</span>
It did this by creating an array of arrays, with a cell for every character in the text. As the text was analysed, for each character it would add "styles for that character" in the array for that cell. Then the code went through and assigned a span for each consecutive set of cells that shared the same styles.
The Python code to do this is here, and here is an example of the highlighted output, though in this example there are no overlapping regions.
I need to display data containing Unicode full block characters (\u2588). However, as you can see here, browsers seem to apply font smoothing to the blocks causing gaps to appear between the blocks. ██████████████
How can I render these characters without the gaps?
I tried using CSS 'line-spacing' with a negative value as a hack, but this text is being rendered with a mono-space typeface and it throws off alignment with the rest of the content.
I have the same issue for a long time and still searching for a perfect solution. CSS text-shadow method by Kieran Devlin is good, but only for cases when there is only one-line blocks with same color.
I can suggest this solution via JavaScript (or just CSS) tho this is not 100% perfect. Here we just making sure that user is on Chromium and then squashing blocks together into each other, therefore filling the gaps. After that, we can use transform scale to return initial size and transform translateX to return it to it's initial position.
if (window.chrome) {
art_div.css({
'letter-spacing': '-0.1em',
'line-height': '1.2em',
'transform': 'scale(1.2, 1) translateX(8%)'
});
}
You can see it visualized in my GitHub issue, maybe i will find something better.
You can use font shadow to fill the gap. I know its a hack but unless you plan to overlap the characters by positioning them in a fixed orientation I don't see how this can be achieved across different browsers.
text-shadow: 1px 0px 0px rgba(0,0,0,1);
Example:
body {
text-shadow: 1px 0px 0px rgba(0,0,0,1);
}
██████████████
Another option is to pad the characters within a container and set the background color the same as the font color. Example:
#container {
background: black;
color: black;
width: 159px;
height: 20px;
}
<div id="container">
██████████████
</div>
In CSS, I can set an outline width outline: 1px solid red and I can set its offset (similar to padding) with outline-offset: 5px.
However, this method does not allow for the shorthand method used by padding, like border: 1px 2px 3px 4px and there doesn't seem to be an outline-offset-left: 1px option.
So, is there a way to set different offsets on each side for a CSS outline? Note that I don't want to use padding; it would offset the outlines how I'd like, but it would also add extra padding to elements where I don't want to, which is the whole reason I am using outline in the first place.
According to MDN's docs on Outline, the only properties to set on outline are:
outline-style
outline-width
outline-color
To which outline is a shorthand to concatenate those properties. But there's no side definition, due to the following fact:
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this...
Since they may not be rectancular, it wouldn't make sense to be able to define left, top, etc, properties...
There is a nice hack you can do to achieve the effect you are after, but it probably has to be done on a case-by-case basis.
My scenario was that I had some content with padding, which contained several html elements including some anchors/links. Let's imagine the scss is something like this:
.contanier {
padding: 15px;
> a {
padding: 8px 0;
}
}
When focusing on an anchor the outline is pretty much touching the text and generally looks poor. Now, as you said, adding left/right padding to the anchors for the sake of an outline would throw off the layout of the content. The anchors would no longer appear inline with other elements in the container such as a heading/paragraph/image/what have you.
So to resolve the problem I added padding to the anchors, and negated it by setting a negative margin:
> a {
margin: 0 -4px;
padding: 8px 4px;
}
Now I have complete control of how the focus appears. There are some use-cases where this solution does not work, for example, if your anchors have a background colour. But for most cases it works pretty well.
Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:
.element {
padding:0 1px;
}
.element:hover {
font-weight:bold;
}
It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?
No JavaScript allowed, unfortunately.
JsFiddle:
http://jsfiddle.net/M9V3Q/
More Info
The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.
You can use this approach:
#hoverEle {
width: 100px;
}
#hoverEle {
display:inline-block;
border:1px solid black;
padding:3px;
text-align: center;
}
#hoverEle:hover {
font-weight:bold;
}
Fiddle: http://jsfiddle.net/M9V3Q/4/
Cons is fixed width.
By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (e.g. #ccc) and, probably, transition effect. I think it is much more better.
Try this fiddle: http://jsfiddle.net/M9V3Q/9/
I think it is much more beautifull even in this variant :)
Try something like:
.element {
padding: 0 1px;
border: 2px solid transparent;
}
.element:hover {
font-weight: bold;
border: none;
}
A fiddle: http://jsfiddle.net/F4knz/
Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.
Need to prefix -moz- or -webkit- for Firefox and safari.
How do i make the h1 and img elements "appear" ontop of the opaque div they are contained in? I mean, how do I make it look like they are not being affected by the opaque-ness of their parent div?
Fiddle:
<div id="main">
<div id="seethru">
<img ... />
<h1>hi</h1>
</div>
</div>
#main {
background-color: green;
}
#seethru {
width: auto;
height: auto;
opacity: 0.4;
background-color: blue;
}
#seethru img, h1 {
position: relative;
z-index: 9999;
color: white;
}
So far nothing is working, and I can't separate this content, it must be inside the opaque div
You are using opacity property which will make it's child elements opaque too, so in order to prevent that use rgba(0, 0, 255, .4) and that will prevent child elements to get opaque.
Explanation for rgba : rgba() is nothing but pure rgb(red, green, blue) but with an additional parameter of a which is alpha, nothing but opacity, so you can use this as an alternative when you are dealing with background colors
Demo
There are few workarounds where you can prevent child elements from getting opaque, for example
For details on browser support of rgba (For IE, you can use CSS3 Pie)
Note: When you use background-color: rgba() always remember to use a
fall back color declared using a hex or pure rgb so that
non-supportive browsers won't fail to render at least the base color
but without opacity, alternatively you can also use transparent png's as a
background with background-repeat property(But this is 90's way to
do) ;)
As #Adrift Commented, You can read here, why actually the child elements get opaque too
internet explorer up to IE8 doesn't supports the RGBA colors. So it would be better if you place h1 and img element outside the opaque div and then move it visually inside using CSS positioning.
Check out this great tutorial it will certainly solve your problem.
http://www.tutorialrepublic.com/css-tutorial/css-opacity.php