Sergey's HTML5 & CSS3 Quick Reference (2nd edition)

book

File:HTML5-logo.svg

available:

pdf EbOOKBorders eBook
Amazon.com
uk | fr | de | ca |
ru | pl | jp | au | nz
Barnes & Noble
alldicountbooks.net

and in your local store


Sergey Mavrody

Fieldset, Legend, Label, Required Input

Address

Table Caption and Column Groups

Groups
1st group 1st group 2nd group
1st group 1st group 2nd group

 


Input Type=URL and Datalist

View in Opera

Input Type=Tel and Datalist

View in Opera

Optgroup Element

Progress Element

Downloading now. please wait...

MARK and Q and SAMP Elements

  • The name attribute is required [Chrome]
  • The phrase to be, or not to be comes from William Shakespeare's Hamlet.
  • return{find(chars.begin())!=chars.end()} 

Multiple backgrounds

background:
url(images/sky.png) top left no-repeat,
url(images/water.png) bottom left no-repeat,
url(images/portrait.png) top left no-repeat;

Rounded Corners: Opera, IE9

border: inset black 6px;
border-left-width: 14px;
border-radius: 20%/40px;

Text Shadow: Opera, FF, Chrome

Text Shadow

text-shadow: 3px 3px 3px gray;

Image Borders: Chrome

width: 12em; height: 8em; border: solid 46px;
border-image: url(images/flower.png) 35 repeat stretch;
-webkit-border-image: url(images/flower.png) 35 repeat stretch;
-moz-border-image: url(images/flower.png) 35 repeat stretch;

Image Borders: Chrome 2

border-image: url(images/flower.png) 15 repeat round;
-webkit-border-image: url(images/flower.png) 15 repeat round;
-ms-border-image: url(images/flower.png) 15 repeat round;
-moz-border-image: url(images/flower.png) 15 repeat round;

Test it in FireFox

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}


          

Web Storage

 
textarea.addEventListener('keyup', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
      

Save text value on the client side

Drag and Drop

Drag Object 1 Drag Object 2

Scalable Vector Graphics

View it in IE9

Canvas Element

This browser does not support the Canvas element

html5

This image is released under the CC-BY-SA 3.0 license