Real world applications in dojo, dijit and HTML5: dijit.tree

This example is described in the Real world applications CSS3 ebook

Sprites

The image look like this:

The silk icons used in this demo comes from http://famfamfam.com/lab/icons/silk/

The sptit is complied using http://css-sprit.es/

The CSS definition for the 8 arrows:

.sprites8 {

	background-image     : url(img/sprites8.png);
	background-color     : transparent;
	background-repeat    : no-repeat;

	height               : 37px;
	width                : 37px;
}

.arrow1 {background-position  : -0px -37px;}
.arrow1:hover {background-position  : -0px 0px;}
.arrow2 {background-position  : -37px 0px;}
.arrow2:hover {background-position  : -37px -37px;}
.arrow3 {background-position  : -74px -37px;}
.arrow3:hover {background-position  : -74px 0px;}
.arrow4 {	background-position  : -111px -37px;}
.arrow4:hover {	background-position  : -111px 0px;}

/* This will be the dafault configuration if the filename is not known*/
table.myTable a:after {
   	content: "\00a0  \00a0 \00a0";
    background-image     : url(img/silk_white_page.png);
  	background-color     : transparent;
	  background-repeat    : no-repeat;
	height               : 16px;
	width                : 16px;
	background-position  : -0px -0px;
	padding-top          : 4px;
	padding-right        : 3px;
}

table.myTable a[href$=".pdf"]:after {
	background-position  : -16px -0px;
}

table.myTable a[href$=".doc"]:after {
	background-position  : -256px -0px;
}

table.myTable a[href$=".zip"]:after {
	background-position  : -288px -0px;
}

table.myTable a[href$=".img"]:after , 
table.myTable a[href$=".png"]:after, 
table.myTable a[href$=".gif"]:after {
	background-position  : -224px -0px;
}

td {padding: 5px}

table.myTable tr:last-child {
  	background-color     : lightblue;
}

table.myTable tr:first-child {
  	background-color     : lightblue;
}

table.myTable tr:nth-child(even) {
  	background-color     : lightgrey;
}

table.myTable td:target {
  background-color     : #ffff00;
}

blockquote { 
  border : 2px solid #000;
  width: 20px;
  transform: rotate(-5deg);
}
.smartNumber{
  color : #fff;
  font-size: 30px;
  font-weight: 100;
  text-align:center;
  vertical-align:middle; 
  background-color: #0000ff;
  margin: 10px;
  min-height:20px;
  min-width:20px;
  padding: 5px;
  
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* Shadows */
  -moz-box-shadow: 3px 3px 3px #aaaaaa;
  -webkit-box-shadow: 3px 3px 3px #aaaaaa;
  box-shadow: 3px 3px 3px #aaaaaa; 
}

li, h2 {
   -moz-transition: background-color 4s ease-out,
                    padding-left 4s ease-out; /* Gecko / Mozilla Firefox */
     -o-transition: background-color 4s ease-out,
                    padding-left 4s ease-out; /* Pesto / Opera*/
-webkit-transition: background-color 4s ease-out,
                    padding-left 4s ease-out; /* Apple Safari / Google Crome */
        transition: background-color 4s ease-out,
                    padding-left 4s ease-out; /* CSS3 standard */	
}

li:target, h2:target {
  padding-left: 20px;
  background-color: #ffff99;
  text-shadow: 1px 1px 2px #fff;
  font-size: 14 px;
}

img.transform {
   -moz-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
}

Show my file Show your file

Simple html table

Id	Version	Filename	Owner
1	4	filename.pdf	psa@carus.dk
2	8	filename.doc
3	2	filename.zip
4	1	filename.png
5	3	filename.new

Demonstration of the :target selcetor and the transistion property

Show my item 1 Show item 3

List element one
List element two
List element three

1

Difference between span tag and div tag

Set the class of the html table

Test HTML5 input tags..

Dojo version selector:
path:

Load time:

Here of css Load time:

Here of dojo Load time:

Parse time:

Number:
Text:
Date:
Email:
Month:
Range:
Time:
Url: