Just a few things I've seen recently
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.
CSS can do some great things these days
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!
Links for light reading 13-9-10
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.
Links for light reading 30-6-10
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.
- Have fun with borders is a simple tutorial that exemplifies some nice CSS border styles.
- 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…!
HTML5 links for light reading
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.
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
In this Think Vitamin video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups » UX Wireframing Introduction
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Subscribe
Recent Comments
- Ian Lunn on Responsive web design is easy with fluid layouts
- rick on CSS3 box-shadow and image hover effects
- Clive Walker on Useful tip for creating double borders with CSS3
- Dmitry Pashkevich on Useful tip for creating double borders with CSS3
- Zap! Media on Checking out responsive grid systems
- Clive Walker on Use more than one CSS class
- Anand on Use more than one CSS class
- saco termico on Use more than one CSS class
