Posts in the CSS3 category
03 May 2011
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.
14 April 2011
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
06 January 2011
Here's a short round-up of some CSS methods that I've been impressed with recently.
06 November 2010
Box-shadow is a great CSS3 property that allows you to add a subtle (or not) shadow on an element.
29 September 2010
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.
18 August 2010
I have posted about double borders with CSS before but there was a useful tip by Andy Hume (@andyhume) at a recent London Web Standards meeting where he described the use of CSS3 box-shadow (previously on this blog, Box Shadow and Image Hover Effects) to give the effect of double borders on an element. With box-shadow, if you use zero for the horizontal offset and blur radius values and a small pixel value for vertical offset, this will give you another ‘border’ on any element. If the element already has a border, this means that you can create double borders with different colors. Here’s how it works.
11 August 2010
Truth be told, I don’t really know if CSS3 gradients are the next big thing or not but, with increasing support in modern browsers, they are being used more and more. Like many other CSS3 properties, gradients allow us to create image-like properties with a few lines of code, thus saving on image requests, and make it easy to change backgrounds quickly and easily without using Photoshop or Fireworks.
16 June 2010
Since my post about CSS3 media queries, I figured I should use these methods in a real life example. Rather than testing on a client’s site (ahem), I thought it might be better to try CSS3 media queries on this blog first – so that’s what I have done. If you resize the browser window to less than 480 pixels (or view the website on a mobile phone), the layout will change to what, I hope, is a more friendly layout for smaller devices, especially mobile phones.
02 June 2010
With the plethora of devices (iPad, iPhone, netbooks) that are being used for browsing websites these days, it makes sense to adapt your style sheet so that each user device gets the best experience possible. Yet, how do you make a website display well on a wide screen monitor but still be perfectly usable on, for example, an iPhone with a horizontal resolution of 480 pixels?
24 May 2010
I was browsing a few websites the other day when I came across Stunning CSS3 which promotes a forthcoming book by Zoe Mickley Gillenwater. There are lots of CSS3 properties used on the site but one that caught my eye was the circular ‘Fall 2010’ item near the top of the page. Here, the border-radius property is used to create the circular shape. I have only used border-radius with small radii values before now but larger values allow you to make a circle.