Tag Archives: CSS

Blending CSS Gradients Like Photoshop

While on my day job over at Company 52, I encountered a textured background with a gradient overlay, using Photoshop’s overlay blending mode. I’m sure you’ve seen this effect before:


My first thought was to save the texture as a 4×4 PNG for tiling, and to save the gradient as a PNG with alpha transparency to overlay over the tiled pattern. This would certainly be lighter than saving a monolithic image, but this presented several problems:

  1. The size of the gradient PNG was still too large, especially when the gradient can be done in CSS
  2. The gradient overlay would be overlaid like Photoshop’s normal blending mode, not in the desired overlay mode, which would make the background look washed out.

CSS blending modes would solve this, but they aren’t here yet (you can do it with the HTML5 Canvas API, but that’s messy). Continue reading

IE innerHTML CSS bug

Today I encountered a bug that affects every version of Internet Explorer from IE6 all the way through IE9. Here’s what happens.

The Bug

  1. Set a Javascript string variable containing CSS styles (<style> or <link>) followed by some HTML content, such as a <p> tag (in my application this happened via JSONP).
  2. Add a <div> node to the DOM
  3. Insert the content from #1 into the .innerHTML property of the <div>
  4. The content gets inserted, devoid of CSS styles.
<!-- these styles are ignored when inserted via innerHTML -->
  p { color: blue; }
<p>Hello, how are you!</p>

The Solution

The simple solution was to put the other markup before the <style> or <link> tag. Bizarre.

<p>Hello, how are you!</p>
<!-- these styles are applied when inserted via innerHTML -->
 p { color: blue; }

Because IE needs something that affects the layout before it will apply CSS styles in an innerHTML property, these will not work as style triggers:

  • <!-- a comment -->
  • <p></p> (or any other empty block-level HTML tag)

Cross-browser text wrapping in

Until CSS3 is widely supported, if you want to wrap text inside a <pre> tag you can do it this way:

pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  white-space: normal;

Note that white-space:normal at the end makes IE behave, and width:99% prevents the dreaded horizontal scrollbar.

Thanks to “Deng Zhi” who commented on Wrapping Text Inside Pre Tags.