Catch me if you can!
Here is a very nice tutorial that +Codrops calls Direction-Aware Hover Effect. Using #CSS3 and #jQuery you can have animated effects when hovering over an element that takes into account the cursor movement. This creates a unique effect on each move a user makes.
Check it out here http://bit.ly/Ip24dH
Google+: Reshared 1 times
Google+: View post on Google+
Burn Flash, burn
Here's another use of Flash that can be converted to #HTML5 / #CSS3 : turn.js provides an easy to setup page-flip effect with just a few lines of codes.
Get it here http://bit.ly/FOHmkX and also check out this tutorial of an Instragram-powered "magazine" using turn,js http://bit.ly/ym1cDo
Google+: Reshared 3 times
Google+: View post on Google+
You don't 
So you decided to join the mobile world and create a unicorn/droid-ready version of your site. If you happen to use big tables of data on one of your pages you find out they don't really fit in a small screen.
The good guys of the filament group have come up with a #jQuery / #CSS3 / #responsivedesign solution that comes down to this:
- select what is important for a small screen
- show it and hide the rest
- adjust the presentation according to the device so that you don't have to have 3 versions of the same thing
- give the user the option in any case.
Read on how to do it: A Responsive Design Approach for Complex, Multicolumn Data Tables at http://bit.ly/xtiPo0
Google+: View post on Google+
Just got Sitepoint's CSS3 Anthology book by +Rachel Andrew which has been updated to a fourth edition. It's a good over-400-pages reference book with basic and not so basic practical examples of using #CSS3 .
Hot topics covered:
* Responsive design: Smart layouts for all devices
* Stylish layouts: With tabular data, text styling, and CSS positioning
* Seamless navigation: Pretty rollovers and menus without JavaScript
* Cross-browser technologies: Compatibility troubleshooting and fixes
* Usable forms: Design forms that work, and look good too
Check this link http://bit.ly/xYiQBW for the table of contents.
It is currently offered as en e-book at $19 down from $29 http://bit.ly/yVFyf7
Google+: Reshared 1 times
Google+: View post on Google+
www.mycookingdiary.com by +Mike Matas is great example of what you can do (and how to do it properly) with #HTML and #CSS today:
- A continuous user experience using AJAX to keep the user engaged. However, each "slide" has it's own URL. This means you can bookmark it, share it, etc.
- Animation – but on user action: Yes, animations can liven up a site. But it should be controllable by the user otherwise they end up being irritating. The user needs to feel he is in control of his experience of your site
- Flexible layout: the site looks great at 800px as well as 1200px
- CSS effects to enhance the visual result: #CSS3 blur is here used to bring the attention to the main content area not as a gimmick
- Keyboard navigation: a small issue for some but shows attention to detail and professionalism
Do you have any more example sites along these lines?
Google+: View post on Google+
The next version of the Kindle books format will support HTML5 and CSS3, moving away from the Mobi format. Of course it continues to be a shame (and a non-starter for me) that Kindle doesn't support #EPUB …
Embedded Link
Kindle Format 8 Overview
Kindle Format 8 Overview
Google+: Reshared 1 times
Google+: View post on Google+
Today we’re making the first version of Swiffy available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari. It’s still an early version, so it won’t convert all Flash content, but it already works well on ads and animations. We have some examples of converted SWF files if you want to see it in action.
Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3. ActionScript 2.0 is also present in the JSON object, and is interpreted in JavaScript in the browser. This representation makes the Swiffy animations almost as compact as the original SWF files.
More: Swiffy: convert SWF files to HTML5 – The official Google Code blog.
This is the blog of Markos Giannopoulos, devoted to web development, technology, the internets, etc. I've been working on, in and around the web for the last 16 years. You can find me on Google+ and Facebook.
