Je n'ai jamais souhaité jusqu'à présent sortir d'articles sur CSS car je ne m'en sentais pas capable face aux géants du style Alsacréations et autre. En effet le CSS et les arts graphiques en général demandent de très bonnes connaissances si l'on ne veut pas être ridicule. Le XHTML et le CSS, notamment, en raison des problèmes de compatibilité entre IE et Mozilla sont des sujets tellement épineux et précis qu'il ne faut pas le manier inopinément.
Depuis certains temps, mes efforts portent enfin leurs fruits et mes connaissances en matière de conception Web et d'utilisation de style CSS augmentent.
Je me décide donc à sortir une série d'articles sur CSS et les arts graphiques, en commençant par le plus simple, jusqu'à ... on verra ;)
Dans ce premier article, vous trouverez d'une part un rappel sur ce qu'est le CSS et d'autre part une base importante de liens sur CSS, dans divers biais, son utilisation, des exemples et des sites et qui ont attirés mon attention. Chacun des liens sera en partie décrit et commenter.
Qu'est ce que les styles CSS (Cascading Style Sheets) ?
Cette définition, ou du moins ce commentaire se veut simple pour être compris par tous, je ne rentrerais pas trop dans les détails ici, d'autres sites le font :)
Le HTML, langage utilisé pour la mise en pages des pages Web, est en soit un peu limité, puisqu'il n'est qu'une succession de balises. CSS permet de donner vie à ces pages HTML en associant des styles à ces successions de balises. En effet une feuille de style CSS met en forme votre page HTML. Ce langage déclaratif est très intuitif et vous permet grâce à une simple syntaxe de mettre du texte en couleur, de mettre une image de fond, de positionner des élèments à différents endroits de votre page, de créer une bordure personnalisée ou encore de rajouter une marge, etc.
Voila pour la briève présentation.
CSS beauty autrement dit une base de liens qui vont vous faire baver
http://www.csszengarden.com/
Un standard, la référence en matière de CSS, c'est souvent le premier que l'on cite, à droite vous pourrez trouver les différents graphismes composés toujours avec une même page HTML, seul la feuille de style CSS changent (et les images). Une partie très interessante est les archives des graphismes publiés sur le Jardin Zen CSS)
http://www.cssbeauty.com/
Une référence, leurs archives sont impressionantes, on découvre une quantité incroyable de sites.
http://www.stylegala.com/
Un site d'art qui répertorie bon nombre de jolis sites utilisant CSS, je vous recommande leur galerie classée par note, les premiers sont magnifiques.
http://cssvault.com/
http://www.unmatchedstyle.com/
http://www.cssdrive.com/
http://www.plasticpilots.com/
http://www.webstandardsawards.com/
Encore des classiques qui répertorient des galleries de sites utilisant CSS.
http://www.cssreboot.com/
Une quinzaine de liens sympas sur le menu de droite de ce site.
J'augmenterais cette liste au fur et à mesure, mais déjà avec ces derniers, vous avez du temps devant vous, il serait dômmage de ne pas consacrer suffisament de temps sur chacuns de ces sites. Vous avez des heures devant vous pour les explorer et comme ils sont fréquemment mis à jour...
Exemples de sites utilisant les feuilles de style CSS
Il y a énormément de sites à citer et ce ne serait pas possibler ici sans quoi la lisibilité de mon site ne serait sans doute plus assurée et de surcroit à force vous ne viendrez sans doute plus sur le miens tellement vous le trouveriez simple à côté des liens qui suivent.
http://csszengarden.com/?cssfile=/068/068.css
http://csszengarden.com/?cssfile=/075/075.css
Deux parutions françaises au Jardin Zen CSS :)
http://www.komodomedia.com/
Intuitif et moderne, son système d'onglet est excellent.
http://www.joshuaink.com/
Simple, clair, joli, CSS quoi...
http://www.suspiremedia.co.uk/
Sobre... Notez l'apparition des boutons de choix de l'affichage du texte qu'on trouve plus souvent.
http://www.jeremyboles.com/
Bon exemple de graphisme pour un site contenant un blog, un diaporama et un portfolio.
Jeux de Maux
Un blog absolument splendide...
http://www.dualbase.com/
Le site d'un graphiste avec de beaux dessins et de bons tutoriaux ;) Consulter dans la partie travaux graphiques, la section design de templates.
http://www.airios.com/blog/
Rien à ajouter... Du grand art, j'adore le côté réaliste des éléments de l'interface.
http://www.cafelisa.com/
Ambiance extraordinaire... Le site vient d'être actualisé avec un fond noir, encore mieux !
On a vraiment le sentiment d'ouvrir quelques vielles lettres trouvées par hasard dans un grenier, excellente idée pour un blog.
http://harmoniak.com/
Site d'un groupe de RAP, choix de couleurs original.
http://xethorn.net/
Sans commentaire, à visiter...
(un site qui m'a grandement inspiré pour mes derniers essais, notament les effets sur le menu de l'image supérieure de l'interface. merci d'être passé sur mon blog ;))
http://www.justwatchthesky.com/
Bon effet vertical de l'image, on dirait un site d'un groupe de rock.
Bon, je m'arrête là car comme je disais plus haut, vous avez encore plus d'heures devant vous pour visionner comme il se doit tous ces sites, mais je compte bien en rajouter et peut être ensuite classer cette liste par catégories.
Liens rajoutés :
http://www.jeffsdigital.com/
L'effet papier abîmé est splendide.
http://www.newinphilly.com/
Un blog de Philadelphie, très sympa ;)
http://www.jeffsdigital.com/
L'effet papier abîmé est splendide.
http://www.newinphilly.com/
Un blog de Philadelphie, très sympa ;)
19 avril 2005
Play
Efficace ! C'est bookmarké ! Je suis moi-même fan de CSS. Ta dernière création est tout simplement superbe ! Quand la mets-tu en ligne ? T'es sacrément doué. Bravo.
le 21 avril 2005 14:13
Thalion
Héhé merci encore :)
Pour cette création, je voulais le faire à la base pour documentProject, un projet PHP qui permet d'afficher sur une page Web des informations d'un projet informatique. Je voulais donc présenter un MCD et des feuilles éparpillées pour montrer ce que documentProject permet d'éviter.
Finalement ça m'a bien plu donc je vais peut être le garder pour ma page perso sauf si j'ai le temps et les idées pour en refaire une autre :)
Il sera sûrement en ligne lorsque je ferai ma page perso avec un portfolio, mon cv et un diaporama d'images :)
le 22 avril 2005 11:10
Xethorn
Très sympa le "sans commentaires" :)
/me mort de rire :p
le 22 avril 2005 20:21
Thalion
Bonjour et bienvenue Xethorn, très étonné de te trouver sur mon blog, ça fait plaisir :)
Désolé j'espère que ça n'a pas été mal interprété car c'est bel et bien un compliment, j'ai adoré ton site et comme il a été rajouté plus haut, il m'a grandement inspiré pour ma dernière création comme tu peux voir ;)
J'ai actualisé quelque peu mes commentaires sur les sites car certains laissé à désirer de plus certains des graphismes dont je parle ont été légérement relooké.
le 23 avril 2005 00:34
Xethorn
Jusqu'à preuve du contraire, je suis un simple humain :)
En fait, le "Sans commentaire" m'a beaucoup amusé ... tu aurais dû le laisser, ça laisse au visiteur un soupçon d'illusion, un petit côté magique.
Pour ta création, je ne trouve pas la ressemblance flagrante, mais l'idée des feuilles est intéressante, originale. Si je peux me permettre un commentaire, change un peu l'ombre (on dirait une ombre par défaut, modifie un peu la couleur est éventuellement le pourcentage d'opacité si ton logiciel en offre la possibilité).
Bonne continuation.
le 23 avril 2005 09:48
xethorn
Encore une chose : pour ton site, pense à mettre un fil RSS, c'est très très pratique pour des personnes comme moi :) (je vais très rarement sur les sites, je me contente de lire les fichiers rss et quelques fois, je prends le temps de poster un commentaire :p).
++
le 23 avril 2005 09:51
Thalion
Oki pour l'ombre :)
Mon logiciel est Photoshop, il permet donc tout ce que tu viens de proposer, j'ai en effet laisser l'ombre par défaut, j'ai simplement modifier la distance pour la rapprocher un peu. J'essairai avec une couleur différente. Je me rends compte aussi que la définition n'est pas là même ici que chez moi, c'est la taille et la qualité de l'image qui font ça.
Pour le fil RSS, comme je t'ai dit par mail, je le ferai dès que j'en aurais la possibilité, tout dépends de mes exams :)
Talk you later ;)
le 24 avril 2005 12:37
xethorn
Théoriquement, pour ton RSS, si ton site n'est pas trop mal codé, tu a juste à réutiliser l'index de ton site et de le mettre au format RSS :) (en somme, tu dois en avoir pour une petite dizaine de minutes pour peaufiner l'ensemble du système).
Bonne chance pour les exams :)
le 24 avril 2005 15:37
Thalion
Oui je sais, seulement à faire ça, je voulais apporter quelques améliorations :
Actuellement j'ai un gros index.php de 1000 lignes de code, tout est classé dans des fonctions et en bas suivant la variable $_GET['action'] je renvois sur une fonction. Et chacune de ces dernières appellent des fichiers templates.
Le système de cache notamment pour les catégories, les liens et les archives me permettrai de ne pas reexecuter des requêtes pour des éléments qui changent très peu :)
Le rajout de classes permettrai d'alléger les fichiers index.php et admin.php (ajout pour la prochaine version).
En attendant sans mon fichier RSS tu passes plus souvent et j'arrive même à te faire poster ;)
le 24 avril 2005 16:15
Laurent
Merci pour le lien et les gentils commentaires.
En fait nous sommes deux chez dualbase.com
Chouette Blog, bravo (j'adore ce form ;) )
le 3 mai 2005 22:41
Thalion
Merci beaucoup pour ce message Laurent ;)
Le graphisme de ton site est vraiment très agréable, bravo à vous deux donc :)
A+
le 4 mai 2005 01:06
Xethorn
Je vois que le site a eu une mise à jour, je vais enfin pouvoir le suivre par fil RSS et éventuellement l'ajouter dans la zone Lecteur RSS de mon site ;)
N'étant pas un grand commentateur de blog, je te souhaites bonne continuation & au plaisir de te lire.
le 6 mai 2005 20:06
Thalion
Oui ça y est je suis passé au monde moderne ^^ Après une mise à jour de mon blog vers un fil RSS moyen... J'ai carrément migré chez dotclear et j'en suis très heureux.
Content de savoir que tu me lis. N'hésites à laisser un message de temps en temps, ça me fait plaisir.
A+
le 6 mai 2005 20:54
Raphael
Bonjour à toi Thalion j'ai vu de la lumière alors je suis passé ;) )
Voici un article très sympa qui regroupe de belles ressources.
Si je peux me permettre, tu trouveras peut-être encore d'autres idées dans ces deux pages :
- Galeries de sites CSS : forum.alsacreations.com/t...
- Sites professionnels conformes CSS : forum.alsacreations.com/t...
Certains liens devraient te plaire :)
Bonne continuation,
Raphaël
le 7 juin 2005 11:20
Thalion
Salut Raphaël,
Je suis un peu comme un enfant devant un magicien, c'est en majeure partie gràce à ton site que j'ai appris le langage CSS, je m'y réfère régulièrement et je le conseille à tous ! Tu n'immagines pas ma joie de te croiser sur mon humble blog.
La base de liens que tu mets là à ma disposition a de quoi m'occuper pour plusieurs semaines/mois ^^ Je vais continuer ces articles consacrés au CSS, mais ils seront dédiés à chaque fois à un thème en particulier, tel le dernier sur le papier.
Il faudrait que je pense un jour à actualiser cet article, en ajoutant les captures vignette de ces sites.
A bientôt !
Si c'est pas ici, ça sera forcément sur Alsacreations ;)
le 9 juin 2005 02:15