Le blong de Saniss

. le blog de Saniss.

Nouvelle CSS : Portal staille

Pfiou. P’tain, j’en ai marre. J’ai pas compté, mais j’ai passé suffisament de jours à bosser sur cette css pour avoir ma dose pour longtemps.

Avant, pour ceux qui ont du mal, c’était sur le thème de Team Fortress 2 et ça ressemblait à ça :

Donc voici la nouvelle gueule de mon blog, cette fois sur le thème de Portal.
Ouais, je sais, on me reprochera de me baser sur des univers existants au lieu de me créer mon propre style.
Mais j’ai franchement pas d’imagination à ce niveau-là. Je préfère faire plusieurs thèmes différents, ça change un peu. Que les éventuelles personnes qui aimaient ma css TF² se rassurent, elle est bien au chaud, et je la remettrai peut-être plus tard si j’ai envie. C’est aussi ça l’intérêt.

Vos avis, critiques et conseils sont of course les bienvenus. Rien n’est définitif et je ne demande qu’à améliorer tout ça pour coller un peu plus à l’ambiance du jeu - ça, c’est à vous de me dire si j’ai à peu près réussi ou pas. Vous êtes bien évidemment en droit de me dire que j’ai des goûts de chiottes. Que je devrais faire autre chose. Que je suis un Dieu. Et tout ça. Je n’ai jamais pris le temps d’étudier avec précision xhtml et css, donc j’ai fait comme j’ai pu.

Et, comme je suis certain que cette css est un gros bordel pas valide et tout, certains vont probablement avoir droit à de gros bugs. Il me semble que pour ceux qui ont encore IE 6, c’est assez psychédélique (menu au milieu qui décale tout). Merci donc de m’en faire part, screens à l’appui, en me précisant votre résolution et le navigateur utilisé. Là, j’en ai marre, mais je m’efforcerai d’étendre le plus possible la compatibilité de mon bordel.

Le background du bloc principal (effet ciment, là) est selon moi pas franchement beau. Je pense à le remplacer, mais je sais pas par quoi. À vous de me dire aussi.

Aussi, désolé pour le blanc momentané dû au chargement de l’image auquel vous aurez droit lorsque vous passerez le curseur sur le titre d’un article. Je peux pas faire autrement, faut faire appel au javascript pour corriger ça, ce qui est pas possible sur cette plate-forme.

Voilà voilà, merci, and may Obama win the elections.

PS : Merci à Xandar et à Nesquik pour l’aide qu’ils m’ont apporté.

PS2 : J’ai cherché, cherché et encore cherché pour tenter de bien centrer la pub Google qu’affichent certains navigateurs dans le menu de droite, mais rien à faire. C’est con, ça gâche tout l’alignement du truc. Mais j’arrive pas à régler ça. :/

20 commentaires pour “Nouvelle CSS : Portal staille”

  1. Mysterius dit :

    Il était cool ton design TF2.
    C’était mieux avant §§§

    Sinon, c’est cool mais y’a un je-ne-sais-quoi d’étrange. J’aurais bien mis de "bordures" sur chaque côté de la partie centrale car le blanc qui passe direct dans le mur métallique noir derrière ca tranche trop.

  2. Saniss dit :

    Ouais, ben en fait y’en a une. Mais si c’est clair, ça se verra pas à cause du bloc principal, si c’est sombre, ça se verra pas à cause du fond. Je peux tenter d’augmenter l’épaisseur, mais je suis pas sûr que ça rendrait bien. Et une bordure image, c’est encore un rêve.
    Le je-ne-sais-quoi étrange peut venir aussi du fait que les textures et le header sont prises sur la vue 3D de Hammer, plutôt qu’in-game (sauf pour le fond), car in-game, j’arrive pas à obtenir un éclairage correct, c’est toujours trop sombre. Évidemment, en vue 3D, c’est un peu spécial. Si j’ai la foi, j’essaierai de retoucher ça sous Toshop. Mais pas ce soir. :-°

  3. SPhoenix dit :

    J’aime beaucoup, c’est vraiment très réussi.

    Ca passe nickel en 1680*1050 sur Opera.

  4. ap0 dit :

    Niquel en 1440×900 sous Firefox

  5. xandar dit :

    Ça roske. En revanche j’aurai p’tete vu le header un poil plus foncé.

  6. D0h dit :

    So Cute.

    T’as utilisé quoi comme outil pour développer cette css ?

  7. Nooky dit :

    Ca tape, si mon blog était pas magnifiquement beau je serais jaloux.

  8. Thermostat dit :

    Très sympa.

  9. Anonyme dit :

    Je comprends pas les pokeballs de chaque côté de "Retour au blog".

  10. Saniss dit :

    xandar > Ouais, je retoucherai un peu ça.

    d0H : Bloc-notes, Photoshop, et un poil de Hammer. =D

    Anon > C’est une texture de Portal, hein, c’est le contour des vitres de surveillance dans les salles de test.

  11. Ubiquité dit :

    C’est moche, c’est Portal style mais c’est moche.

  12. Saniss dit :

    Plus sérieusement : j’ai rien contre les critiques négatives, mais il va falloir développer un peu si tu veux que j’en tienne compte. -.-

    Parce qu’honnêtement, et je me répète, je suis pas du tout convaincu de la qualité de ma css, ni de sa fidélité à Portal, et je demande qu’à l’améliorer.

  13. Ubiquité dit :

    Laisse tomber, ta CSS plaira jamais à tout le monde.

    Mais pour développer un peu quand même :

    Les colonnes de carrés gris foncé sur les côté, je trouve ça bien trop … présent. On a l’impression d’être entre deux murs.
    Et au centre on a quoi ? Du gris béton …

    Ta bannière est pas mal, mais elle sauve pas le reste.

  14. Saniss dit :

    Mh, ouais, en fait ça m’étonne pas. Je crois que je vais revoir les backgrounds. Merci pour ta critique.

  15. Thermostat dit :

    Moi j’aime bien justement, ca fait étouffant un peu comme les salles de tests, mais le blog est quand même très lisible.

    Je verrai bien un peu plus de caméras par contre.

  16. G.UNIT dit :

    Les pokeballs comme dit l’Anonyme, je ne vois pas ce que c’est dans Portal, tu n’aurais pas un screenshot sous la main ? Je trouve que ça fait un peu trop rajouter.

    Sinon le blanc de fond tranche trop avec les murs, voit pour mettre un gris très léger pour rappeler ta bannière et unifier le tout.

    Le logo Aperture qui apparait quand tu rédiges un commentaire est vraiment bien trouvé, mais il me semble que ça couleur d’origine est le bleu, le orange c’est pour Black Mesa.

    Dernière chose si tu veux pousser le trip Portal encore un peu plus loin, tu pourrais cacher des messages enigmatiques (ou images) à la manière du blog d’inso

  17. Saniss dit :

    Thermostat : Ouais, j’y pensais justement, faudra que je fasse un peu de déco. ;)

    G.UNIT : Si, il y a l’orange et le bleu. Si j’ai le temps ce soir je prendrai des screens pour tout ça. Quant aux messages, faut voir… j’ai des idées, je tenterai de mettre tout ça en oeuvre ce week-end. :]

    EDIT: Screenz §!

    Donc, voici les fameuses pokeballs qui vous inquiètent. Quant à la couleur orange du logo d’Aperture, on peut voir ça par exemple ici, ici ou encore ici. ;]

    Ce serait aussi très joli en bleu, je sais pas. C’est peut-être bien aussi de varier un peu les couleurs, vu que j’ai déjà les surbrillances des liens en bleu, ainsi que les titres des articles.
    Voilà, sinon j’ai ajouté un message "behind the scenes style". Je vous laisse le trouver, il est pas très loin. J’en ajouterai d’autres un peu partout dans le blog, ça sera marrant, et puis comme le dit G.UNIT, ça permet de pousser le trip un peu plus loin.
    J’ai aussi suivi ton conseil par rapport au fond. C’est peut-être mieux comme ça en effet.

    Merci beaucoup pour tous ces conseils en tout cas.

  18. Anonyme dit :

    Youhou ! Content de voir que le design soit terminé et que mon aide a été utile =)

    Concernant les critiques (et les bons points aussi), voici une liste :

    - La bannière demanderait à être un poil plus sombre.
    - Une bordure entre le centre de la page et le fond serait effectivement pas mal, là ça tranche trop…
    - J’adore le coup d’avoir mis un logo "Aperture Science" dans le textarea des commentaires !
    - Et je ne veux pas qu’on vire les pokeballs sachant que c’est la seule partie où j’ai bossé dessus §
    - Left 4 Dead cay le bieng §
    - …

    Nes’

  19. Anonyme dit :

    Beau boulot. Le header est mieux qu’avec le Spy :-’

    Après la CSS TF² et la CCS Portal, on aura le droit à la CSS L4D ? :D

  20. Tydax dit :

    Sympathique, mignon. MAIS Y A PAS DE COMPANION CUBE § Sinon, ça rosk beaucoup x) .

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>