J’en avais assez de mon précédent design sombre, sans grande cohérence et qui, au final, s’avérait peu lisible.
Même si j’ai dû reprendre le code HTML, la structure n’a pas beaucoup bougée. Le plus gros du travail est dans le CSS et au niveau graphique.
Fini le fond gris sombre, les rectangles bleus et les « je ne sais quoi » oranges.
Bonjour CSS3, les textures, les ombres, les couleurs alpha, les arrondis, bonjour la lumière, bonjour Photoshop, et aussi bonjour ajax.
Mais surtout, adieu IE.
Oui, adieu IE puisque j’ai décidé de ne plus supporter ce navigateur sur le blog. Les autres pages du site n’ont pas bougées et le support des anciennes versions d’IE est toujours assuré, mais la section blog s’adressant principalement à des développeurs/intégrateurs/graphistes n’a pas besoin de supporter ces vieux navigateurs (oui, enfin, j’en connais au moins un qui va être déçu ^^). J’ai pris cette décision aussi pour ne pas surcharger mon code, et surtout pour ne pas perdre plusieurs jours pour ça. Je ne connais pas tous les bugs ou les propriétés CSS non supportées par IE 9 mais ça devrait aller à priori (je ne peux pas tester, je n’ai qu’un vieux XP qui prend la poussière à côté). Juste pour rigoler, j’ai jeté un œil avec IE6, 7 et 8… Je me suis bien marré, le menu s’est même barré MDR :D
Vous l’aurez compris avec ce nouveau thème, beaucoup de CSS3 : multiples backgrounds, couleurs rgba, dégradés, transition, transform, border-radius, box-shadow, text-shadow (CSS2)… Toujours pas de HTML5 mais ça viendra un jour.
Quelques nouvelles fonctionnalités :
– Vous pouvez enfin vous inscrire par email aux commentaires d’un article. Pour cela j’ai utilisé et modifié le plugin Subscribe to Comments Reloaded. A priori il a l’air de fonctionner, à voir.
– Un petit widget qui-sert-à-rien-mais-qui-produit-son-effet pour ceux qui ont un gravatar lorsque vous voulez poster un commentaire (ajax inside) :)
– Un nouveau module de recherche ajax dans le header.
– Utilisation des micro-formats, pour ceux que ça intéresse.
Pour une fois j’ai un peu poussé mon iMac dans ses retranchements avec Photoshop. Pour savoir d’où me vient l’inspiration du header, jetez un œil au générique de la série Human Target ;)
Et oui, j’ai finalement craqué face aux « ribbons » et aux badges :|
Il y a encore quelques petites choses à faire mais le blog peut déjà tourner comme ça.
Allez, je vous lache.
Dites moi ce que vous pensez de tout ça, et prévenez moi si vous trouvez des coquilles ;)
Commentaires
Commentaire de L’ébahi.
Un des sites wordpress les plus réussis graphiquement qu’il m’ait été donné de voir! Vraiment! :D
Comment avez vous mis en place ce système d’infobulle noire sur les liens? Je trouve ça très réussi, et plus rapide à afficher que ma vieille méthode en css. Jquery? :) Quoiqu’il en soit, chapeau bas!
Commentaire de Greg.
Merci =)
Tout est question de gout, je suis content que ce thème plaise à certains.
Pour les infobulles noires, pas de jQuery, juste du CSS. C’est simplement une
<span>cachée avecdisplay: none;qui se dévoile au survol de son élément parent, c’est la vieille méthode que j’applique à des liens, comme à d’autres balises.Commentaire de L'ébahi.
Aaaah, ça y est je vois (j’ai du sortir Firebug pour comprendre). :)
Donc la partie HTML donnerait ça:
Texte-de-la-bulleEt la partie CSS ceci:
01020304050607080910111213141516171819202122232425262728293031323334J’ai juste?
Ce qui m’intrigue c’est la partie triangulaire de la bulle, ma méthode en CSS utilise des sprites en png pour faire ça. C’est plus long à afficher, je dois les précharger du coup. En tout cas je pense passer au CSS3 sous peu, même si un certain navigateur dont je ne citerai pas le nom et qui est encore majoritairement utilisé malgré ses lacunes continue de m’y dissuader… :)
Commentaire de Greg.
Voilà, tu as trouvé sa cachette ;)
Pour Internet Expl’horreur, il suffit de prévoir des fallbacks pour que les bulles se dégradent correctement (couleur de fond unie – coins arrondis et ombres manquantes, est-ce si grave?). Après tout, ce ne sont que des bulles, elles ne sont pas essentielles pour le visiteurs généralement.
Pour les triangles, jette un œil sur mon tutoriel concernant… des tooltips en CSS, tu y trouveras ta réponse vers le début. Concernant le pseudo-élément :after, si vraiment tu y tient, un script spécifique à IE6 peut faire l’affaire :
1Et rajouter .bubble-arrow dans la déclaration css de bubble:after :)