Tutorial html5 et css3

Vous allez commencer prochainement le design d'un site (plus exactement dans le tutorial d'aujourd'hui, un blog Wordpress) et vous voulez déjà être prêt pour html5 et utiliser les propriétés les plus intéressantes de CSS3. Vous êtes par nature un early adopter. Enfin, vous n'êtes pas un ayatollah de la compatibilité. Ne passez donc pas votre chemin, vous avez trouvé le tutorial qu'il vous faut !! :-)

Si vous souhaitez utiliser dès maintenant ces fameuses balises html5 et explorer de nouvelles possibilités graphiques avec les CSS3, voici ce que vous allez apprendre à faire :

1. permettre au navigateur d'interpréter les balises HTML 5.
2. Utilisez les balises html5 pour le zonage de la page
   1. <header> pour le header de la page mais aussi pour celui d'un article
   2. <footer> pour le footer de la page mais aussi pour celui d'un article
   3. <hgroup> pour regrouper les différents niveaux de titre dans votre header de page
   4. <article> pour délimiter le contenu de la page
   5. <section> pour indiquer les différentes parties de votre article
   6. <aside> pour indiquer des références en compléments de votre article
   7. <nav> pour baliser les éléments de navigation
   8. <time> pour donner une date de parution
3. Essayez de nouvelles possibilités graphiques avec les CSS3 :
   1. Générer des blocs à coins arrondis via border-radius
   2. Créer des ombres à du texte via text-shadow
   3. Créer un imprimé type bayadère sur une bordure en CSS via border-left-colors
   4. Créer un effet de dégradé sur le fond de page (aucune image utilisée) via box-shadow
   5. Jouer les effets de transparence sur les images via opacity

Le design de ce tutorial HTML5 et CSS3 pour blog Wordpress est réalisée entièrement sans images (sauf illustrations en provenance de Flickr) , uniquement avec de la typographie et les possibilités graphiques de CSS3.

Pour apprendre à faire tout ceci, cliquez sur le lien suivant (le design ne s'affichera correctement qu'avec les navigateurs énumérés ci-dessus) et affichez le code source de la page: tout y est commenté pour votre apprentissage.

Fichier de la page HTML5 et CSS3

Comments

[Incube]

Si vous voulez en savoir plus, en ajouter plus, trouver des réponses sur le CSS3, HTML5 et javascript, je vous conseil aussi ce site francophone : beta.rdsign.net



Une mine d'information.

[freeman]

"un ayatollah de la compatibilité".
c'est un peu comme les grévistes qui prennent les gens en "otage", les "pirates" qui volent nos œuvres (toutes aussi moches les unes que les autres).
Que dire des masochistes, qui jouissent en payant des logiciels des prix exorbitants et qui marchent mieux en gratuit, qui sont à cheval alors que les autres sont en formule 1.

[caroder]

J'ajoute à cet article le lien ci-dessous regroupant 70 ressources et tuto pour CSS3 et HTML5 : http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/

[Caroder]

- MSIE 6, 7 et 8 (voir code spécifique dans le fichier source)
- Firefox 3.5
- Google Chrome 1.0
- Safari 4

[nicopingu]

article simple efficace :) quid du support des navigateurs ? quand google (et les autres — heu qui sont ils déjà ? ) tiendra compte de cette nouvelle structure ?