Animated doodle in CSS!

If you are following the developments on web browsers, you must be knowing the kind of changes CSS is going through. Lots of new features are getting added to CSS3 and you can do lots of stuffs with CSS. Here is a short post about an animated doodle which I had built purely using CSS3. I built this animated logo few months ago for a hackathon we had at our workplace. The speciality of this logo is that it is built only using CSS3 - even the circles and rounded corners are built with CSS and no images are used. You can verify the same with the help of any web inspectors. You can hover over the little guy and see him flip his ears, eyes, teeth, arms and legs. I have employed CSS transitions, CSS transforms and others to get the work done. The implementation is complex and not optimal. But, it is built just to demonstrate the power of CSS. Browser support: All latest browsers. The CSS used in this experiment can be found here. If you are not able to view the logo inline, check it out here. Have fun with CSS!! :)

-- Varun

VServices: HTML5 Image Editor

HTML5 makes the web so powerful that you can do almost everything on the web. Till few years back, Flash was the only solution to build rich applications on the web. Things have changed a lot with HTML5. HTML5 Image Editor, one of the services of VServices, is an image editor on the web. It demonstrates some of the cool things which can be done with HTML5, CSS3 and related technologies. The application has been built using the Aviary’s Photo Editor (codenamed as Feather).

HTML5 Image Editor

• Click here to access the image editor.
• Enter the URL of the image you have already uploaded on the web and click on “Load Image”. For example, copy the URL of your Facebook profile picture.
• Once the image is loaded on the page, click on “Edit Image”. Aviary’s toolbar will appear next to the image with lots of options to edit your image.
• The toolbar includes few filters (Instant, Toy Camera, Old Photo, etc) which can be applied on your image. The other tools included in the toolbar: Sharpen, Whiten, Rotate, Flip, Resize, Crop, Redeye, Blemish, Colors, Saturation, Blur, Text Overlay, Stickers Overlay, Custom Draw Overlay, etc. 
• Once you are done with editing the image, click on “Save” from Aviary’s toolbar. After processing the image, a download URL will be provided on the screen.

Tip: Use HTML5 Image Editor with Dropbox

• Dropbox is a web based file hosting service that syncs your files online and across your computers and mobile devices.
• Create a free Dropbox account here. Download and install the Dropbox windows application. Also available for Mac, Linux and for Mobile platforms. Note: If you create an account using the above link, I will be earning 250 MB extra free space.
• Take the Dropbox tour to understand how it works. Also, understand how “Public folder” works with Dropbox.
• Once you have the Dropbox application installed on your PC or mobile, you can just copy the file you want to edit to the public folder. Get the public link to the uploaded file.
• Its easy to use and the uploaded files stay with your account. And, I don’t have to take the pain of file management on my server.

I have been looking for tools to quickly edit the photos I take on my mobile. I have tried many apps on my Nexus One but I was not comfortable with any of them. Hence, this tip and the application. With this application, I can upload the photo to my Dropbox public folder using Dropbox Android application and then edit it on the web.

-- Varun

DocType HTML5, Hyderabad

DocType HTML5 is a one day conference on HTML5, CSS3 and related technologies. The Hyderabad version of the event happened on 23-Jan-2011 at IIIT, Hyderabad. Since the event was organized in an educational institution, the student turnaround was huge. Almost 75% of the participants were students from IIIT-H or from other colleges. The organizers had to arrange for parallel sessions in the very last minute because of the overcrowd. That means a speaker should give the same session twice and they did very well. Overall it was a good experience – learnt a lot of new things, refreshed the things which I already know. 

New Ideas in HTML5

Kiran Jonnalagadda (@jackerhack) from HasGeek started the day with a session on “New Ideas in HTML5”. He gave a brief intro to HTML5 and discussed about Semantic markups, DocType declarations in HTML5. He also discussed about the Postel’s law and how it is adopted by modern day browsers. Shall link to the presentation once I get it. I have used Thinking Space – a mind mapping application for Android to capture the session and here it is.

CSS3 and Presentation

The session on CSS3 and Presentation was delivered by Shwetank Dixit from Opera. He discussed some of the sexy features of CSS3. Some of the properties include – font-face, border-radius, transition, text-shadow, box-shadow, selectors, transforms, etc.

HTML5 in IE9 (Sponsor session)

Harish Ranganathan from Microsoft gave a session on HTML5 features supported in IE9. He also talked about the new tools which are introduced in IE9 to ease the developer’s task. Microsoft was the platinum sponsor for the event.

Multimedia Kit

The next session was delivered by Parashumram from Microsoft. His style of delivery was awesome. The presentation which had fancy animations includes canvas, video, audio tags of HTML5. He also briefed about support for SVG in HTML5. View his presentation here.

Geolocation, Offline and Mobile

Dhaval Trivedi from SourceBits was the next one to give a session on Geolocation, Offline storage and mobile. He clarified that Geolocation is not a HTML5 feature but a related technology. He also discussed how to add support for platforms which don’t have a native support for Geolocation APIs. Then, he briefed about some of the dos and don'ts of offline storage. Performance tips for mobile were also useful.

Accessibility

The last session of the data was delivered by Shewatank again. He focused on the need for making the site accessible for differently-abled persons. He talked about how screen readers work and some of the standards available on accessibility. 

-- Varun