I’ve been really busy with client work recently but I have managed to set aside some time every day for reading and browsing. Here are some some interesting links I’ve seen in my web travels:
- There are some great examples cited in 22 Examples of Fixed Position Navigation in Web Design. I’ve been thinking about fixed position elements for a redesign of CVW Web Design recently and I think this article has finally convinced me.
- The Expressive Web is a show case of CSS3 and HTML5 features from Adobe. The site looks great and is quite interactive with a useful browser support summary at the bottom of each page/feature.
- CSS Wizardry aka Harry Roberts posted a useful tip about Borders on Responsive Images. Nice one!
- CSS buttons are more and more popular and CSS3 Buttons highlights a few examples. You just wouldn’t think that no images were used here!
- There are some beautiful web design examples given in Phil Matthews’ Web Design Inspiration #3
That’s all for now.
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!
Every so often, I post a few links to interesting sites that I have seen on my travels around the web. If you would like to see more of this type of post, let me know in the comments. Anyway, here’s a few for this month:
- Lanyrd is a new website, by Natalie Downe and Simon Willison, that is a mash-up of conference event data and Twitter (in the main, but with Amazon book links as well). I came across the website when I attended dConstruct recently. It’s a neat website that enables you to track conferences, mark your attendance at conferences, and see which of your Twitter friends will be attending.
- There’s a useful overview of mobile web development techniques on the Opera Developer website with a screencast by Andreas Bovens. It’s a very good summary and explanation of different approaches including the use of the viewport meta tag and CSS3 media queries.
- HTML5 Canvas: The Future of Graphics on the Web by Rob Hawkes
- Instant CSS Code is a website that enables you to quickly create a web project framework with valid (X)HTML and CSS. Simple choose a few options and you’ll be able to donwload a zip file with the files you need to get started.
I’ll probably post a few nicely designed website examples for the next one of these.
Here are a few links from around the web that I have spotted recently:
- If you ever receive spreadsheet data from a client and get asked to ‘just add this to our website’, you might be interested in Tableizer which converts spreadsheet data to HTML tables.
- Bounce is a new web app for giving quick feedback on a web page. It’s a great way of sharing comments on a website! Here’s an example I made earlier.
- Test your website before launch with Launchlist.
- Meaningful Mark-up: Posh and Beyond is an excellent article on semantic mark-up and the benefits for you and your clients.
Quite a diverse list I think you’ll agree…!
I have been reading a lot more about HTML5 recently and also considering whether to start using it ‘in anger’. Here are a few useful HTML5 links:
- How to use HTML5 in your client work right now is a useful post that describes which bits of HTML5 you can use (and taking account of IE-compatibility)
- The above link comes from HTML5 Doctor which is a great resources for HTML5. Includes How to get HTML5 working in IE and Firefox 2
- HTML5 Gallery is a showcase of sites that use HTML5; some nice examples featured!
- HTML5 and The Future of the Web is a good introductory article from Smashing Magazine
- WHATWG has a company home page demo in HTML5
- HTML5 Demos has some cool examples of HTML5 use
The more I read about HTML5, the more I want to use it. I plan to build my next personal site with HTML5.
Some recent articles on jQuery from around the web:
- I blogged about multi-column layouts with CSS3 but the Columnizer jQuery plugin means you can create newspaper-style layouts that work in all browsers.
- jQuery pageSlide provides a way to reveal (slide in) secondary page content; an interesting approach I think
- SlideDeck is a horizontal slider that provides a way of highlighting content in hidden panels but with search engine visibility.
- jQuery MagicLine Navigation is an animated hover effect for navigation links.
- Twitter-like dynamic character count for textareas and input fields
A few goodies from my CSS reading list:
- 3 Ways to Add Depth to Any Website with CSS – some subtle effects that can give your website that little extra.
- Create a CSS Image Sprite Based Feature Box – a nice tutorial with a demo here.
- How To Create Simple, Stylish and Swappable Image Captions
- CSS Coding Standards – we each have our own way of writing CSS but Paul Stanton gives us his way of doing it.
- The Best CSS Newbie Articles of 2009