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.
- 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.
Categories
- 12412
- Adobe Air
- Books
- Conference
- CSS
- CSS3
- Dreamweaver
- Ecommerce
- Fireworks
- Freelancing
- hReview
- HTML5
- Humour
- Inspiration
- JavaScript
- Links
- Microformats
- Music
- News
- Perch
- Personal
- PHP
- Portfolio
- Pubs
- Quick Tips
- Search engines
- Textpattern
- Typography
- Web design
- Web development
- Web standards
- Website review
- WordPress
» CSS3 Foundations is a new book that combines practicality with inspiration to show you how to create modern websites.
We Like
Sync files between computers. Share files with your clients, friends, and family using DropBox. It's great!
Subscribe RSS Feed
Recent Comments
- Steve Claflin on CSS Tip: Using max-width for flexible images
- Clive Walker on Why I still use Dreamweaver despite all the cool kids using something else
- jj on Why I still use Dreamweaver despite all the cool kids using something else
- Clive Walker on Creating a Perch dashboard widget for Google Analytics
- Mareno on Creating a Perch dashboard widget for Google Analytics
- Clive Walker on Responsive Day Out in Brighton
- Jeremy Keith on Responsive Day Out in Brighton
- kang topjer on CSS3 box-shadow and image hover effects