Useful tip for creating double borders with CSS3
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
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
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
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
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.
Featured Book
Flexible Web Design by Zoe Mickley Gillenwater describes how to build fluid and elastic CSS layouts. It's a great read!
Buy from Amazon.com · Amazon.co.uk
We Like It
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 2 GB FREE and up to 10 GB bonus space!
Subscribe
Recent Comments
- Viper Design on CSS3 box-shadow and image hover effects
- Ted Vieira on Ten reasons to use WordPress themes from StudioPress
- Matt Hill on Ten reasons to use WordPress themes from StudioPress
- Clive Walker on New Adventures in Web Design conference
- Richard Carter on New Adventures in Web Design conference
- Steve Maggs on CSS3 gradients are the next big thing
- Clive Walker on Mashing up RSS feeds with Textpattern
- Phil on Mashing up RSS feeds with Textpattern
