I’ve seen a few website examples recently (like this one) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned redesign of CVW Web Design. Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work.
Over the next few weeks, I’m planning to learn about HTML5 by recoding CVW Web Design to the HTML5 specification. I want to start with a website that I know thoroughly before using HTML5 on client sites. At the same time, I want to continue to develop the responsive style sheet methods that I’ve used already on the site. So, before starting the work, I have been reading and collecting useful links; if you are new to HTML5 (like me), there are some great resources available:
Right, must get on with that website redevelopment!
Previously: HTML5 links for light reading
Here’s a short round-up of some CSS methods that I’ve been impressed with recently:
There’s some inspiring work in these examples!
Box-shadow is a great CSS3 property that allows you to add a subtle (or not) shadow on an element. I wrote a post called CSS3 box-shadow and image hover effects and since then I’ve been using box-shadow more.
Perhaps the main disadvantage of using box-shadow is that it’s not supported by Internet Explorer 8 and below. If you are happy to give your users something that looks different in IE8, that’s all well and good – but sometimes I just want to give IE users a closely similar design. In this case, that’s where this IE filter for box-shadow might be useful. This gives an approximation of box shadow for IE users. It might not be the closest approximation in all cases but I’ve found it useful in a website redesign recently.
Additionally, there’s this method for box-shadow with IE and this might be better for you. Either method is worth exploring if you want to give IE8 users a box-shadow experience.
Internet Explorer 9 has been released in beta form with a full release due in the next few months. As a web designer and front end developer, I’ve been looking forward to the new browser because it promises to support more CSS3 properties than IE8. Many of these properties have been supported by other browsers, such as Firefox, Safari and Chrome, for some time – so we are now getting to a stage where a lot of CSS3 methods and properties will be visible across a wider range of browsers. Hurrah!
Impressive Webs has summarised the CSS3 support in IE9 and it’s great to see properties like border-radius, box-shadow, opacity and RGB(a) colours supported. Of course, your design will determine whether you decide to use border-radius for rounded corners or box-shadow for subtle shadow effects but I predict a big increase in usage of these over the next year or so. Even if these do not make it into your final designs, the ease in which you can try them out and show to clients makes a great deal of sense. Of course, you could use these properties before now, and I know that websites need not look the same in all browsers, but I’ve always had problems convincing clients that some design elements would only be visible to a relatively small audience. Not any more.
» CSS3 Foundations is a new book that combines practicality with inspiration to show you how to create modern websites.
Sync files between computers. Share files with your clients, friends, and family using DropBox. It's great!