Dark Crimson Blog » CSS3 Border Image http://blog.darkcrimson.com The Blog of Ben Lister Fri, 13 Aug 2010 02:18:06 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Practical CSS3 for Web Designers http://blog.darkcrimson.com/2010/04/practical-css3/ http://blog.darkcrimson.com/2010/04/practical-css3/#comments Sun, 25 Apr 2010 21:31:11 +0000 Ben Lister http://blog.darkcrimson.com/?p=196 Designers have been using basic CSS3 techniques to enhance their designs for several years now, but cross-browser incompatibilities and lack of practical examples have slowed its progression in the mainstream design world. In this tutorial, I explore and demonstrate some of the more practical aspects of CSS3 and provide realistic examples, resources, advise and a compatibility guide.

The demo page showcases a number of CSS3 techniques including:

  • Gradients (Radial and Linear)
  • “Rounded” Border Images
  • Border Radius
  • Drop Shadows (Box and Text)
  • Transforms
  • Keyframe Animations
  • Transitions
  • Image Masking
  • :target Pseudo Selector
  • Multiple Backgrounds
  • CSS Columns

Examples in the demo include:

  • Image gallery with randomized CSS transitions (supplemented with jQuery)
  • Image-less 3D Bar Chart
  • Pure HTML / CSS Accordion links
  • Navigation with CSS animated hover effects
  • jQuery powered “View Mode” with CSS3 visual enhancements


After exploring the demo use the “CSS View Mode” feature to see example code, my comments and suggested resources / examples for each example.

The demo:

View DemoDownload Source

Final thoughts

Although the upcoming FireFox 3.7/ 4.0 is said to include support for CSS transitions, you will need to use a Webkit browser for now to see some of the advanced examples. I recommend updating to the latest version for full support. I designed this demo for Webkit, Firefox 3.6+ and Opera 10.5.3 and have intentionally used browser vendor prefixes accordingly. There are, of course, other browsers which offer (limited) support of CSS3 properties but this demo is geared towards mainstream browsers (that is my way of saying don’t use IE on this demo).

UPDATE 5/28/10: Added Opera support to demo page, see my comment from 5/28 below.
]]> http://blog.darkcrimson.com/2010/04/practical-css3/feed/ 19