Tag Archives: CSS3

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

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.