HTML5 and CSS3 feature-detection with Modernizr library

By Coding, Graphics No Comments

Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

Read more

Great CSS3 and HTML5 Resources

By Coding No Comments

In this “Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below. Read More

HTML 5 Cheat Sheet (PDF)

By Coding No Comments

XHTML is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely ready until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.

So in the spirit of the upcoming change we decided to release a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. We’ll do our best to update the cheat sheet when new changes will become known. The cheat sheet was created by our friends from and released exclusively for the readers of Smashing Magazine.

Download html5-cheat-sheet

WPtouch: Automatically transforms your WordPress blog into a web-application

By Coding No Comments

More than just a plugin, WPtouch is an entire theme package for your WordPress website. Modeled after Apple’s app store design specs, WPtouch makes your WordPress website load lightning fast on touch mobile devices, show your content beautifully, all while not interfering with your regular theme.

WPtouch automatically transforms your WordPress blog into a web-application experience when viewed from an iPhone, iPod touch or Android touch mobile device. It comes complete with all the standard WordPress blog features: search, login, categories, tags, archives, photos & more. WPtouch also offers many customization features through a beautifully designed WordPress admin panel.

Get The Plugin

Designer and Web Developer Icon Sets

By Coding No Comments

This is the showcase for icon collections, that web developers and designer can use them for their work. The requirements of the icons for web will be more about simplicity, understandable metaphor and also light weight. I have collected the icons link below, these collection is strictly for web developer and its free.

Pinvoke – Fugue Icons
Base Pack Icons
twothirty – twotiny
Mini Pixels Icons
Sryo Minimal Icons
Web Developer Icons Some Random Dude Bitcon
Web Developer Icons Feed Icons
Web Developer Icons FamFamFam
Web Developer Icons HoHoHo Icons
Web Developer Icons Free GIF Icons
Web Developer Icons Vaga Icons
Web Developer Icons Sweetie Icons
Web Developer Icons Kurumizawa Icons
Web Developer Icons Exploding Boy Icons
Web Developer Icons WeFunction Icons
Web Developer Icons ORB Icons
Web Developer Icons Goodies Icons
Web Developer Icons Web Social Icons
Web Developer Icons Sketchy Paper Icons
Web Developer Icons Free Web Icons
Web Developer Icons Light Icons
Web Developer Icons Vector Button Icons
Web Developer Icons Back To Pixel Icons

Webkit 3D Cube using new CSS transformations

By Coding, Mobile No Comments

Paul Hayes has been playing with CSS transformations and making 3D cubes:

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).

This resulted in:

A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+

Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome

WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:multiple-cubes-css

53 CSS tutorials anyone can do

By Coding No Comments

There are many advantages to designing with Cascading Style Sheets. CSS is extremely easy to learn and rework once a basic site framework has been established. Websites, or website components can easily be changed into something totally different just by swapping a single CSS file, or a line within a CSS file.

CSS designers always seem to have a few different elements that they commonly use over and over in all designs, these can include navigation elements and form fields, among other items. Smashing Magazine has compiled a list of 53 CSS Techniques that you couldn’t live without, linking out to tutorials on CSS navigation, tabbed navigation, bar graphs, rounded corners, hover effects, image map, submit buttons, custom bullets, and sidenotes. Whether you are new to CSS, or have been in it for a while, these are some great tutorials to have archived as reference materials.

Top 10 accessibility mistakes

By Coding No Comments

Here’s a nice top ten of things not to do when building accessible sites:

  1. Don’t use verbose ALT text. ALT text for information-based images
    should be short and succinct. Decorative images should never have ALT
  2. Don’t use random characters, such as vertical bars, to separate links
  3. Don’t insert text into form fields
  4. Don’t use access keys as they can override keyboard shortcuts for screen readers
  5. Don’t use table summaries (unless there isn’t sufficient information provided about the table on the page)
  6. Don’t forget content organisation. Structure text properly with short
    paragraphs, headings, lists and plain and simple language.
  7. Don’t worry too much about writing accessibility help pages since they won’t really be read
  8. Don’t agonise over acronyms and abbreviations
  9. Don’t change the tab order (unless you have a very good reason)
  10. Don’t forget to listen with a screen reader

Links: 10 common errors when implementing accessibility

Top 17 CSS Tutorials

By Coding, Mobile No Comments

Sites with long, multiple tutorials on CSS.

  1. CSS : Learn everything you ever wanted to know about the basics of CSS
  2. CSS Tutorials : at EchoEcho
  3. CSS Tutorials : Eric Meyer / Meyerweb
  4. CSS Tutorials : at Tizag
  5. CSS Tutorials : at Tutorialized
  6. CSS Tutorials : at W3 Schools
  7. CSS Tutorials : CSS guide, Tutorials, Articles at WestCiv
  8. CSS Tutorials/Examples : Position Is Everything
  9. CSS Demonstrations and Tutorials : at DoMedia
  10. Floatutorial : CSS Tutorials on Float
  11. Listutorial : CSS Tutorials on Lists
  12. Selectutorial : CSS Tutorial on Selectors
  13. CSS Beginner’s Guide : at
  14. CSS Intermediate Guide : at
  15. CSS Advanced Guide : at
  16. Stylesheets : at HTMLSource
  17. Project Cool: Web Development Basics : CSS Tutorials at DevX

Top 17 CSS Lightbox Variations

By Coding No Comments

CSS techniques to overlay images on a webpage.

  1. Lightbox JS : Original; a simple, unobtrusive script used to overlay images on the current page.
  2. Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.
  3. GreyBox : A pop-up window that doesn’t suck.
  4. Greybox Redux : Completely unobtrusive – no need to embed Javascript into your site.
  5. Leightbox : uses inline div’s instead of AJAX calls.
  6. Lightbox Plus : by Takuya Otani
  7. Lightbox Gone Wild : at ParticleTree
  8. The Lightbox Effect without Lightbox : by PJ Hyett
  9. LITBox 2.0 : modified Thickbox made into a Prototype class based off of the Scriptaculous.
  10. Multifaceted Lightbox : at GregPhoto
  11. Prototype Window Class : at Xilinus
  12. Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon
  13. Thickbox – One box to rule them all. : by Cody Lindley
  14. Slightly ThickerBox : Thickbox with Prev and Next links at Jasons Toolbox
  15. WP lightbox JS WordPress plugin : WordPress Plugin by Safirul Alredha
  16. Lightbox2 : WordPress Plugin at m3nt0r – beyond the net
  17. GreyBox Plugin : WordPress Plugin at aNieto2K