Skip to main content

Posts

Create progressively enhanced 3D CSS rollovers

Christian Heilmann, principal evangelist for HTML5 and the open web at Mozilla, explains how to progressively enhance CSS rollover effects into the 3D space Rollovers are a great thing. They make things more obvious that they are interactive and they allow us to show something different without giving up valuable screen estate. I remember one time when I won a pitch for my company by showing a rollover effect on a menu button. Granted, that was 1998 and nowadays we are less excited about them. This is a shame though as we have a lot more things to play with in browsers these days. Here we'll take a look at using CSS, 3D CSS transformations, transitions and CSS animations to create some great rollover styles without telling people that they need to have certain browser. Instead, we'll fall back to a plain rollover for all CSS capable browsers. For brevity's sake we won't have all browser prefixes in the code examples here, but they are in the final product
Post a Comment
Read more
Recent posts

HTML5 Events

The HTML5 specification defines various event attributes as listed below: Attribute Value Description offline script Triggers when the document goes offline onabort script Triggers on an abort event onafterprint script Triggers after the document is printed onbeforeonload script Triggers before the document loads onbeforeprint script Triggers before the document is printed onblur script Triggers when the window loses focus oncanplay script Triggers when media can start play, but might has to stop for buffering oncanplaythrough script Triggers when media can be played to the end, without stopping for buffering onchange script Triggers when an element changes onclick script Triggers on a mouse click oncontextmenu script Triggers when a context menu is triggered ondblclick script Triggers on a mouse double-click ondrag script Triggers when an element is dragged ondragend script Triggers at the end of a drag operation ondragenter script Triggers when an element has b
Post a Comment
Read more

HTML5 Attributes

Standard Attributes: The attributes listed below are supported by almost all the HTML 5 tags: Attribute Options Function accesskey User Defined Specifies a keyboard shortcut to access an element. align right, left, center Horizontally aligns tags background URL Places an background image behind an element bgcolor numeric, hexidecimal, RGB values Places a background color behind an element class User Defined Classifies an element for use with Cascading Style Sheets. contenteditable true, false Specifies if the user can edit the element's content or not. contextmenu Menu id Specifies the context menu for an element. data-XXXX User Defined Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". draggable true,false, auto Specifies whether or not a user is allowed to drag an element. height Numeric Value Specifies the height of tables, images, or table cells. hidden hidden Specifies whether element should be visi
Post a Comment
Read more

HTML5 Tags Reference

A complete list of standard tags available in HTML5 is given below: Tag Description <!--...--> Specifies a comment <!DOCTYPE>  Specifies the document type <a> Specifies an anchor <abbr> Specifies an abbreviation <acronym> Deprecated: Specifies an acronym <address> Specifies an address element <applet> Deprecated: Specifies an applet <area> Specifies an area inside an image map <article> New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article <aside> New Tag: Specifies a piece of content that is only slightly related to the rest of the page. <audio> New Tag: Specifies an audio file. <base> Specifies a base URL for all the links in a page <basefont> Deprecated: Specifies a base font <bdo> Specifies the direction of text display <bgsound> Specifies the background music <blink> Specifies a text which blinks <blockquot
Post a Comment
Read more

How to Conditionally Add Style Sheets for IE

Why use conditional stylesheets? You got problems, they need fixin' Keeps your code hack-free and valid Keeps your main stylesheet clean Perfectly acceptable technique, sanctioned by Microsoft And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages. Target ALL VERSIONS of IE <!--[if IE]>         <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> Target everything EXCEPT IE <!--[if !IE]><!-->         <link rel="stylesheet" type="text/css" href="not-ie.css" />  <!--<![endif]--> Target IE 7 ONLY <!--[if IE 7]>         <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> Target IE 6 ONLY <!--[if IE 6]>         <link rel=&
Post a Comment
Read more

Hardboiled Design by Andy Clarke

Andy Clarke is UK based designer, author and speaker who has a passion for design, CSS and web accessibility. Andy Clarke has been called a lot of things since he started working on the web at Stuff and Nonsense ten years ago. His ego likes words like ambassador for CSS. Andy is a member of the Web Standards Project and a former invited expert to the W3C's CSS Working Group. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. He took ten months out of his life to write the best-selling book Transcending CSS: The Fine Art Of Web Design, but Andy's passion is amazing web design. He loves making designs for the web, writing about design and teaching it at workshops and conferences all over the world. Hardboiled Web Design will be hard, not soft-boiled. Like a hardboiled detective, it will pull no punches in explaining HTML5 and CSS3 in the context of the complete process of making the web. It will take a cold, hard look at
Post a Comment
Read more