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
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!