A HTML5 made website, and the use of article tags

This is an introduction to HTML5 related Technology Web site, the site itself is HTML5|CSS3 written, although for the computer configuration almost a classmate to browse up a bit card, but it is worth learning, after all, HTML5 is the mainstream technology in the future.

Website:http://html5please.com/

I was completely because of the reasons for the HTML5 to notice this site, the domestic use of HTML5 to complete the site is too few, a lot of tutorials, but few actual projects produced. This site uses HTML5 to achieve a deep image of the div effect: can 500% improve the development efficiency of the front-end UI Framework!

I extracted the code, very simple, but this is also HTML5 charm, by the way, check out the article tag.

html code:  can 500% improve the development efficiency of the front-end UI Framework!

        <article class= "fallback prefixes" >  

CSS code:  can 500% improve the development efficiency of the front-end UI Framework! 
Article {color: #232927; Margin-bottom:2em; } article. tags {display:none;}  Article > Header {-webkit-transition:background-color 100ms ease-in;  -moz-transition:background-color 100ms ease-in;  -ms-transition:background-color 100ms ease-in;  -o-transition:background-color 100ms ease-in;  Transition:background-color 100ms ease-in;  Background: #d3e0e4;  Border-radius:0.3rem;  position:relative;  Z-index:1;  Cursor:pointer;  /* &:hover:before {@include transform (rotate (270deg));  } */} article > Header:hover {background: #e3d7bf;}    Article > Header:before {-webkit-transition:all 100ms ease-in;    -moz-transition:all 100ms ease-in;    -ms-transition:all 100ms ease-in;    -o-transition:all 100ms ease-in;    Transition:all 100ms ease-in;    Display:inline-block;    Vertical-align:middle;    Content: "+";    Line-height:1;    Font-size:1.5rem;    Border-radius:1.5rem;    Height:1.5rem;    Width:1.5rem; margin:0 0.5rem 0 1rem;    Text-align:center;    Color:white;    text-shadow:1px 1px 1px #476871;    Background: #b4cad0; border:1px solid #95b4bc;    } article > header. Kind, article > header. Name, article > header. status {display:inline-block;    Vertical-align:middle; Pointer-events:none;  } Article > Header i {font-style:normal;} Article > header. Kind, Article > header b {font-weight:normal;}  Article div.more {-webkit-transition:opacity 1s ease-in;  -moz-transition:opacity 1s ease-in;  -ms-transition:opacity 1s ease-in;  -o-transition:opacity 1s ease-in;  transition:opacity 1s ease-in;  Display:none;  opacity:0;  Background:white;  border-radius:0 0 0.3rem 0.3rem;  Padding:0.5em 1em 1.5em 1em;  Margin: -0.3rem 1px 0 1px;  position:relative;  z-index:0; box-shadow:0 0 7px #0c0d0d;  } article Div.more. polyfills b {font-weight:bold;}  Article Div.more. polyfills p {display:inline;} Article Div.more. Links {font-size:0.8em;   Position:absolute;    Bottom:0.5em; Right:1em;    } article Div.more. Links a {padding:0.25em 0.5em;}      Article Div.more. Links a:hover {background: #149cd7;      Color: #fff;      border-radius:5px;      Text-decoration:none; text-shadow:1px 1px 1px #232927;  }article.expanded > Header {border-bottom:1px solid #91a19b;}    article.expanded > Header:before {content: "-";    line-height:0.75;    -webkit-transform:none;    -moz-transform:none;    -ms-transform:none;    -o-transform:none; Transform:none; }article.expanded div.more {opacity:1;}.  Kind {font-size:0.8em;  Line-height:3rem;  Color: #e3d7bf;  Position:absolute;  Left: -5em;  Text-align:right;  Width:4.5em;  Z-index:1; text-shadow:1px 1px 1px #232927;  }.name {Padding:0.4rem 0;  Color: #107aa8; text-shadow:0 1px 0px White; } #noitems {text-align:center;}.  status {font-size:2em;  border-radius:0 0.2rem 0.2rem 0;  padding:0 1rem 0 0.5rem;  Color:white; Text-shadow:1px 1px 1px rgba (0, 0, 0, 0.6);  position:relative; Float:right;    }. Status:before,. Status:after {content: "";    height:50%;    Width:0.8em;    Position:absolute; Left: -0.8em;  }. status:before {top:0;}  . status:after {bottom:0;}    . Status I {font-size:0.3em;    Display:inline-block;    Line-height:1;    Text-transform:none; Font-weight:normal;  }. Status I b {font-size:1.5em;}    . status.avoid {background: #d92626;    Box-shadow: -4px 0px 4px #c32222 inset; Border-right-color: #a51d1d; }. Status.avoid:before {background:-webkit-linear-gradient (34deg, Rgba (217, 0), Rgba (217, 38, 38, 0) 50%      , #c32222 53%, #d92626 56%);      Background:-moz-linear-gradient (34deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%);      Background:-o-linear-gradient (34deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%); Background:linear-gradient (34deg, Rgba (217, 38, 0), Rgba (217, 0), 50%, #c32222 53%, #d92626 56%);    Background:linear-gradient (56deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%);} . status.avoid:after {background:-webkit-linear-gradient ( -34deg, Rgba (217,, 0), Rgba (217,, 0) 50%, #c3      2222 53%, #d92626 56%);      Background:-moz-linear-gradient ( -34deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%);      Background:-o-linear-gradient ( -34deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%);      Background:linear-gradient ( -34deg, Rgba (217, 0), Rgba (217, 56%, 0) 50%, #c32222 53%, #d92626);  Background:linear-gradient (124deg, Rgba (217, 0), Rgba (217,, 0) 50%, #c32222 53%, #d92626 56%);}    . status.use {background: #60ac39;    Box-shadow: -4px 0px 4px #559933 inset; Border-right-color: #467e2a; }. Status.use:before {background:-webkit-linear-gradient (34deg, Rgba (96, 1172, 0), Rgba (0) 50%, #559933 53%, #60ac39 56%);      Background:-moz-linear-gradient (34deg, RGBA (172, 0), Rgba (0) 50%, #559933 53%, #60ac39 56%);      Background:-o-linear-gradient (34deg, RGBA (172, 0), Rgba (0) 50%, #559933 53%, #60ac39 56%);      Background:linear-gradient (34deg, RGBA (172, 0), Rgba (56%, 172, 0), 50%, #559933 53%, #60ac39 (+);    Background:linear-gradient (56deg, RGBA (172, 0), Rgba (56%, 172, 0) 50%, #559933-53% . status.use:after {background:-webkit-linear-gradient ( -34deg, RGBA, 172, 0), RGBA (0) 172, #5599      53%, #60ac39 56%);      Background:-moz-linear-gradient ( -34deg, RGBA, 172, 0), Rgba (56%, 172,, 0) 50%, #559933 53%      Background:-o-linear-gradient ( -34deg, RGBA, 172, 0), Rgba (56%, 172,, 0) 50%, #559933 53% Background:linear-gradient ( -34deg, RGBA (172, 0), RGBA (96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);  Background:linear-gradient (124deg, RGBA (172, 0), Rgba (56%, 172, 0) 50%, #559933-53%    . status.caution {background: #ffaa00;    Box-shadow: -4px 0px 4px #e69900 inset; Border-right-color: #c28100; }. Status.caution:before {background:-webkit-linear-gradient (34deg, Rgba (255, 0, 0), Rgba (255, 170, 0, 0) 5      0%, #e69900 53%, #ffaa00 56%);      Background:-moz-linear-gradient (34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);      Background:-o-linear-gradient (34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);      Background:linear-gradient (34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);    Background:linear-gradient (56deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);} . status.caution:after {background:-webkit-linear-gradient ( -34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);      Background:-moz-linear-gradient ( -34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);      Background:-o-linear-gradient ( -34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);      Background:linear-gradient ( -34deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%); Background:linear-gradient (124deg, Rgba (255, 0, 0), Rgba (255, 0, 0) 50%, #e69900 53%, #ffaa00 56%);}
 

A HTML5 made website, and the use of article tags