Posts in the "CSS3" category
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:
- 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
Here’s a short round-up of some CSS methods that I’ve been impressed with recently:
- More and more, CSS is being used to create image-like effects and here’s a nice example of CSS being used to create post tags. The :before and :after pseudo elements and some CSS3 and border properties are used to create the triangle and circle shapes.
- Great use of the text-shadow property to create 3D text using just CSS
- CSS3 Slide-up Boxes uses CSS transitions to achieve an animated mouseover effect.
- Until fairly recently, who would have thought that you could create Checkerboard, striped & other background patterns with CSS3 gradients? Fantastic effects without the use of images!
- CSS Arrows and Shapes Without Markup uses the triangle shape border method and the :after pseudo element, like the post tags item above.
- Shadow experiments shows how to create a ‘dark side of the moon’ rainbow prism effect (like the Pink Floyd CD cover)
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.
- Adobe Air
- Quick Tips
- Search engines
- Web design
- Web development
- Web standards
- Website review
Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!
- Clive Walker on Why I don't like homepage sliders
- Tim on Why I don't like homepage sliders
- EphKa on CSS Tip: Placing text on top of an image
- Clive Walker on How to show and hide content areas with Perch CMS
- Andi on How to show and hide content areas with Perch CMS
- richard on CSS Tip: Placing text on top of an image
- David on Making circles with CSS3 border-radius
- Christian Connett on Why I'm using Brackets as code editor