Des ombres en CSS sans image

Créer des ombres en CSS sans utiliser d’images c’est possible avec : CSS drop-shadows without images (extrêmement original comme nom).

A défaut d’être meilleur que les Beatles, le web worker Nicolas Gallagher nous offre sa technique.

Bien sûr ça marche seulement avec les derniers navigateurs : Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Les nouveaux tags HTML de l’HTML5

Voici la liste des nouveaux tags HTML qui font leur apparition avec le nouveau HTML5 :

  • <article> défini un bloc article
  • <aside> défini un bloc se situant a coté du bloc principal
  • <audio> défini un bloc contenant de l’audio
  • <canvas> défini un bloc graphique (très intéressant)
  • <command> défini un bouton de commande
  • <datalist> défini une liste déroulante
  • <details> défini le détail d’un élément
  • <dialog> défini une conversation
  • <embed> défini un plug-in/module (externe)
  • <figure> défini un groupe de média et leur légende
  • <footer> défini un pied de page
  • <header> défini une entête
  • <hgroup> défini des informations sur une section d’un document
  • <keygen> défini une clé générée d’un formulaire
  • <mark> défini un texte marqué
  • <meter> défini une mesure
  • <nav> défini les liens de navigation
  • <output> défini les types de sorties
  • <progress> défini la progression d’une tache donnée
  • <rp> défini ce que doit afficher lorsque le Ruby n’est pas supporté
  • <rt> défini les explications des annotations Ruby
  • <ruby> défini des annotations Ruby
  • <section> défini une section
  • <source> défini les sources du média
  • <time> défini la date et l’heure
  • <video> défini une vidéo

En gros beaucoup de tags sont créés pour remplacer le <div> en permettant de cibler (les moteurs de recherche) plus précisément le contenu. Sachant que vous pourrez aussi structurer votre code en faisant ressortir les données de façon plus claire :

Voici un exemple de structure de donnée

La principale innovation reste tout de même l’implémentation du tag <canvas>, contrôlable en JavaScript lui permettant de dessiner pixel par pixel sur ce canvas réservé.

Voici un exemple d’application, un jeu en 3d à la Wolfenstein :

En voici d’autres assez jolie par ici et .

Quelques méthodes et attributs pour votre canvas HTML5 :

HTML5 Canvas propriétés

source HTML5 (UK)