21 mai

Encore un nouveau thème sur le blog

Catégorie blog  |  Tag , , ,   |  2 Commentaires

Et ouais, encore! Enfin pour les habitués, pas de changement majeur, ce n’est qu’une grosse retouche esthétique, mais la présentation générale reste la même: 2 colonnes, la sidebar à gauche en menu déroulant, une home limitée au strict minimum (les articles, rien que les articles) et aucune image dans le thème hormis le fond de page.

Par contre, le plus gros du boulot est dans ce qu’on ne voit pas: j’en ai effectivement profité pour ré-écrire de fond en comble tout le thème en HMTL5 et CSS3, en me basant sur l’excellent template de HTML5 Reset.

Comme d’habitude, je fignolerai au fur et à mesure afin de corriger les derniers bugs. Pour info, le code est plutôt orienté WebKit donc l’expérience sera meilleure sous Safari et Chrome. Pour Firefox et Internet Explorer, ça reste cependant tout à fait acceptable…

8 déc

WebKit Clock, l’heure partout dans le monde en HTML5

Catégorie web  |  Tag , , , , ,   |  2 Commentaires

Encore une magnifique réalisation, à base de HTML5, de CSS3, de Javascript, de SVG et sans aucune image. WebKit Clock, comme son nom l’indique, est optimisé pour les navigateurs utilisant le moteur de rendu éponyme: Safari et Chrome, donc. Il est d’ailleurs impressionnant de voir le truc tourner sous Safari Mobile, certes lentement mais correctement affiché.

Ah, et puisqu’on en est à parler de HTML5, si vous voulez découvrir ou redécouvrir de beaux projets, de belles démos et plein d’autres trucs amusants conçus dans ce beau langage, allez jeter un coup d’oeil au Calendrier de l’Avent du HTML5, c’est de saison…

6 nov

Une présentation web très complète des possibilités du CSS3

Catégorie web  |  Tag ,   |  Pas de commentaires

Belle présentation sur le CSS3, réalisée par Lea Verou, et consultable directement dans votre navigateur (il suffit de parcourir dans les différents slides avec les touches fléchées de votre clavier). Elle y détaille chaque nouveauté du CSS3 par l’exemple, et adresse point par point les différentes limitations du CSS2.1.

The old way:

The CSS3 way:

Et indespensable, à chaque nouvelle propriété, il est précisé si c’est supporté par les principaux navigateurs.

Le disclaimer indique que cette présentation a été développé pour Firefox 4 beta et risque de ne pas s’afficher correctement sur les autres navigateurs ne supportant pas encore certaines propriétés.

14 juil
23 mai

Transitions, transformations et animations CSS3 par l’exemple

Catégorie web  |  Tag , , , ,   |  Pas de commentaires

Ca se passe sur css3.bradshawenterprises.com. Une série d’exemples de transitions et d’animations exclusivement réalisées en CSS3, sans faire appel au moindre bout de code javascript (à part pour gérer l’interactivité). Ca démontre bien la puissance du truc et comme le code source est fourni, vous verrez que c’est relativement simple.

Bien évidemment, tout ceci ne fonctionne que sur des navigateurs dignes de ce nom (oubliez IE, donc) avec un petit avantage pour Safari qui est le seul aujourd’hui à supporter les transformations 3D.

Et puis, quand vous aurez terminé de tout lire, vous aurez bien mérité un peu de détente, avec une petite session de retro-gaming sur cet Asteroids entièrement réalisé en HTML5.

20 avr

Tout savoir sur le HTML5

Catégorie web  |  Tag , ,   |  Pas de commentaires

Tout d’abord, une présentation très complète (via @MoxFolder) sur les fonctionnalités majeures apportées par le HTML5, entièrement réalisée en… HTML5 et donc consultable dans votre navigateur. Les bouts de code étant la plupart du temps accompagnés d’exemples concrets au sein de la présentation, il vous faudra un navigateur approprié pour les visualiser (en clair, oubliez IE6-7-8 et optez plutôt pour Google Chrome, sur ce coup là).

Et justement, puisqu’on parle de compatibilité avec les navigateurs, HTML5 & CSS3 Readiness donne une vision très rapide des fonctionnalités supportées par les différentes versions d’IE, Firefox, Safari, Opera et Chrome.

19 mar