HTML5/CSS3

Sommaire 1. Introduction 2. HTML5 1. Syntaxe 2. Sémantique 3. Fonctionnalités 3. CSS3 1. Sélecteurs 2. Mise en forme 3. Styles 4. Compatibilité 5. Conclusion 6. Questions? 7. Documentation

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Introduction

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation html5

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Syntaxe

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sémantique

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sémantique Titre principal Sous-titre

Fonctionnalités datalist Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation …

Fonctionnalités range Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités number Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités mail url tel color patern date… Nouveaux types d’input Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation barre de progression 50 %

Fonctionnalités Contenu éditable Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Drag & Drop Drag in Drag out

Fonctionnalités Gestion native de l’audio et de la vidéo Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités des images dynamiques avec l’API 2d canvas Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités canvas Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation de la 3d en temps réel avec webGL démos: helloracer.comhelloracer.com

Fonctionnalités une page en dialogue constant avec le serveur. WebSockets Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation

Fonctionnalités Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Géolocalisation

Fonctionnalités Local storage pour les applications offline… Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation …IndexedDB pour communiquer avec SQL

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation CSS3

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Sélecteurs :nth-child(even) :nth-child(odd) input[type=‘number’] :not() :first-child

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme display: inline-block

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme display: box positionnement sur mesure

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Mise en forme Colonnes

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Bordures personnalisées div { border-image: url("border.png") 27 round stretch; }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Bordures arrondies div { border-radius: 20px; } div { border-radius: 20px 0px; } div { border-radius: 20px 20px 0px 20px; }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Ombres div { box-shadow: 12px 12px 6px black; text-shadow: 6px 6px 4px black; }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Dégradés radial-gradient(60% 60%, ellipse closest-side, #93ccf3, #0b074a 140%) background: linear-gradient(left top, #0b074a, #93ccf3 50%, #0b074a)

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles div { box-shadow: box-reflect: below 4px linear-gradient(transparent, white); } Réflexion

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transparence div { opacity: 0.5; }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transformations div { transform: skew(-30deg, 0deg); } div { transform: rotate(-30deg); }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Styles Transitions ; div { transition-property: all; transition-duration: 3s; }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation { font-family: 'trashco'; src: url('trashco.eot'); }

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Support HTML5

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Nombreuses fonctionnalités intéressantes mais support encore trop faible

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation Questions?

Introduction >> HTML5 >> CSS3 >> Compatibilité >> Conclusion >> Questions >> Documentation  Sites en français    Sites en anglais   html5demos.com html5demos.com