Posts in the CSS3 category
-
Transparent borders with CSS3
03 May 2011 by
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.
-
Getting started with HTML5 and responsive design
14 April 2011 by
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
-
CSS can do some great things these days
06 January 2011 by
Here's a short round-up of some CSS methods that I've been impressed with recently.
-
Box-shadow for Internet Explorer
06 November 2010 by
Box-shadow is a great CSS3 property that allows you to add a subtle (or not) shadow on an element.
-
Internet Explorer 9 is coming
29 September 2010 by
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.
-
Useful tip for creating double borders with CSS3
18 August 2010 by
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.
-
CSS3 gradients are the next big thing
11 August 2010 by
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.
-
Trying out CSS3 media queries with a fixed width layout
16 June 2010 by
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.
-
CSS3 media queries for ultimate style sheet flexibility
02 June 2010 by
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?
-
Making circles with CSS3 border-radius
24 May 2010 by
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.