Posts in the "CSS3" category

Transparent borders with CSS3

Posted in on 3 May 2011 | Comments [10]

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.

Read more ...

Getting started with HTML5 and responsive design

Posted in on 14 April 2011 | Comments

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:

  • HTML5 Boilerplate was one of the first HTML5/CSS/JavaScript templates. Read this site first if nothing else!
  • Mobile Boilerplate is a collection of files that demonstrate best practice for developing an HTML5 and mobile-optimised site. Great for learning and using as your starting point.
  • I really like the idea of starting with a mobile-optimised style sheet and Andy Clarke has developed this idea with his 320 and Up kit that works with or without HTML5 Boilerplate. The 320 and Up page is the demo where some new and innovative methods from different sources are used.
  • The mobile first approach was proposed by Luke Wroblewski. The article really made me think about how I was doing things. Peter Gasston also describes a similar approach in Using Media Queries in the Real World – another great article!

Right, must get on with that website redevelopment!

Previously: HTML5 links for light reading

CSS can do some great things these days

Posted in on 6 January 2011 | Comments

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 for Internet Explorer

Posted in on 6 November 2010 | Comments

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 is coming

Posted in on 29 September 2010 | Comments [2]

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.

Previously: CSS3 box-shadow and image hover effects · Making circles with CSS3 border-radius