Presentation html5 css3 by thibaut

HTML5
PAR THIBAUT BAILLET

HTML5
HTML5
▲
◄ ►
▼

FRONT-END DEVELOPER
HETIC
thibaut-baillet.com
@bailletthibaut

OBJECTIFS
Structurer et donner du sens
Créer des applications

NOUVELLES BALISES
<header>
<hgroup>
<h1>Titre</h1>
<h2>Sous titre</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="http://">Link Text</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h3>Titre article</h3>
<time datetime="2011-15-12">15 décembre 2011</time>
</header>
Contenu...
<figure>
<img src="#" alt="" />
<figcaption>Description de l'image</figcaption>
</figure>
</article>
</section>
<footer>Copyright...</footer>

NOUVEAUX ATTRIBUTS
<tag role="">
<tag data-xxx="">
<tag aria-xxx="">
<tag draggable="">
<tag itemscope="" itemtype="" itemprop="" >
<input type="email" placeholder="Votre email" required />

MICRODATA
<article itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Inception (2010) - IMDb</h1>
<span itemprop="description">The excerpt from the page will show up here. The reason we ca
n't show text from your webpage is because the text depends on the query the user types.</span
>
Director:
<div itemprop="director" itemscope itemtype="http://schema.org/People">
<span itemprop="name">Christopher Nolan</span>
</div>
Writers:
<div itemprop="author" itemscope itemtype="http://schema.org/People">
<span itemprop="name">Christopher Nolan</span>
</div>
<div itemprop="actors" itemscope itemtype="http://schema.org/People">
<span itemprop="name">Leonardo DiCaprio</span>,
</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">8,9</span>/<span itemprop="bestRating">10</span> stars fr
om
<span itemprop="ratingCount">457038</span> users.
</div>
</article>

Rich snippets :

NOUVEAUX FORMULAIRES
<input type="email" placeholder="mail@mail.com"/> mail@mail.com

<input type="number" min="13" max="110" value="20"/> 20

<input type="range" min="0" max="50" step="10"/>
<input type="search" results="10" placeholder="Search..." /> Search...

<input type="tel" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> (555) 555-5555

<input type="color" placeholder="e.g. #bbbbbb" />

Avantage pour les claviers mobiles :

AUTRES BALISES
<meter min="0" max="100" low="40" high="90" optimum="100" value="9
1">A+</meter>
Your score is: A+

<progress>working...</progress>
Download is: working...

<progress value="75" max="100">3/4 complete</progress>
Goal is: 3/4 complete

AUDIO ET VIDÉO

00:00 -00:36

WEBGL
Google+ globe
Nouvelle vague

WEB FONTS
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}

Font Squirrel
Google Web fonts
<link href='http://fonts.googleapis.com/css?family=SpicyRice' rel='stylesheet' type='text/css'
>

h1{ font-family: 'SpicyRice'; }

OPACITÉ
.code{
background: rgba(255, 0, 0, 0.57);
}

ANGLE ARRONDI
.radius{
border-radius : 30px;
border-top-right-radius : 100px;
}

OMBRE PORTÉE
.shadow{
box-shadow : rgba(0, 255, 0, 0.846094) 7px 3px 0px;
}

DÉGRADÉ
.gradient{
background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#000));
}

PRÉFIXES PROPRIÉTAIRES
-webkit
-moz
-o
La solution : -prefix-free

TRANSITION CSS3
.transition{
-webkit-transition: width 1s ease-in-out;
}
.transition:hover{
width: 50%;
}

TRANSFORMATION CSS3
.transform{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.transform:hover{
-webkit-transform: rotateZ(-180deg);
}

ANIMATION
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}

.annim {
display: block; background-color: #FF0; height: 100px; line-height: 100px;
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}

Animation !!

Presentation html5 css3 by thibaut

More Related Content

What's hot

Viewers also liked

Similar to Presentation html5 css3 by thibaut

Recently uploaded

Presentation html5 css3 by thibaut