HTML5 - CSS3

HTML5/CSS3

Balise Vidéo

La balise < video > est une toute nouvelle addition au HTML5 et permet de visionner un film sur votre site Web. Les données reliées à cette balise sont normalement des vidéos, mais peuvent aussi inclure des images ou des données sonores.

C'est un élément très développé avec des attributs pour définir le ode de fonctionnement et l'apparence.

Mais actuellement elle ne permet pas le plein écran et n'offre donc pas toutes les possibilités du lecteur Flash, comme vous pourrez le constater dans l'exemple suivant :

En savoir plus!

Balise Canvas

L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la future spécification HTML5 qui est en cours de finalisation.

Canvas se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code Javascript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes.

Un exemple de dégradé, réalisé en html5.

Changez de navigateur web! Le votre ne supporte pas correctement le html5!

En savoir plus!

Média Queries

CSS 3 améliore la gestion de feuilles de style en permettant de les étiqueter plus précisément. Une requête media query consiste en un type de média suivi d'au moins une expression limitant l'étendue d'application de la feuille de style en utilisant des fonctionnalités de média comme width (la largeur), height (la hauteur) et color (les couleurs).

En clair, les Media queries permettent d'adapter la présentation du contenu à un ensemble particulier de périphériques sans devoir changer le contenu lui-même.

Vous pouvez voir le fonctionnement des média queries en redimentionnant ce site web, pour voir apparaître un design bien plus adapté à la taille de la fenêtre !

En savoir plus!

Liens intéressants

Voici donc quelques liens jugés intéressants par moi même et qui m'ont aidé dans la conception de ce site web :

En savoir plus!