Visual effects with CSS styles

Visual effects with CSS styles

I often say that I am not a graphic designer. When I build a theme, I always encounter technical constraints such as « how to do a gradient », or « how to obtain a 3D aspect ». When designing the current theme, I found some workarounds for this lack of « graphic » by using only CSS.

HTML/CSS: 8 méthodes pour créer des boîtes à coins arrondis

HTML/CSS: 8 méthodes pour créer des boîtes à coins arrondis

Pour ceux qui ne sont ni designer, ni graphiste, il est souvent difficile de se construire son propre design. Les idées ne manquent pas, mais la difficulté réside plutôt dans leur mise en oeuvre. Les designs obtenus sont donc simples, voir rudimentaires.
Une façon de tromper un peu son monde est d’ajouter quelques petites fioritures comme par exemple, des coins arrondis. Voici quelques techniques HTML, CSS et/ou javascript pour obtenir de belles boîtes à coins arrondies.


Notions  de variables en CSS

Notions de variables en CSS

Malgré des évolutions régulières, et des efforts du côté des navigateurs, le développement de feuilles de styles CSS reste assez frustre. Nous passons notamment beaucoup de temps à copier/coller des valeurs numériques correspondant à des couleurs, des marges, des largeurs … La modification de ces valeurs obligent à de fastidieux chercher/remplacer, ou de long parcours de fichiers. L’idéal serait de disposer de la notion de constante nous permettent d’associer une valeur à un label, puis d’utiliser ce label dans tout le reste des feuilles de styles.
Hors cette notion de constante n’existe pas aujourd’hui, et même la version 3 de ce standard n’inclut pas de telles fonctionnalités. Voici quelques idées pour contourner cette difficulté.

Un framework CSS hybride

Un framework CSS hybride

L’étude des frameworks CSS m’a permi d’étudier quatre frameworks: BluePrint, Yahoo YUI, YAML, et plus rescemment 960 System Kit. J’ai écarté YAML, trop complexe à mon goût, et 960 System Kit, trop rudimentaire. Entre Yahoo YUI et BluePrint le choix est plus compliqué: le point fort du premier est plutôt sa feuille de styles de positionnement (la grille), alors que le second se révèle plus intéressant pour les styles typographiques.

A priori, il semble difficile (voir déconseillé) de mélanger les éléments de différents frameworks: les styles de grille et de typographie sont parfois liés, et il y a le risque de perdre la cohérence de l’ensemble. Pourtant la tentation est grande … j’ai donc essayé.

Avec quelques modifications, il est possible de construire un framework CSS hybride, utilisant la grille de Yahoo YUI, et la typographie de BluePrint.

Test du Framework CSS 960 Kit

Test du Framework CSS 960 Kit

Le dossier sur les framework CSS ne devait initialement être composé que de trois tests (BluePrint, Yahoo YUI et YAML). Entre temps, j’ai découvert un peu par hasard, un framework qui reprend le concept utilisé par BluePrint: 960 Grid System. Il me semble intéressant de compléter le dossier avec le test de ce framework.

Frameworks CSS: Conclusion

Frameworks CSS: Conclusion

Le dossier sur les frameworks CSS touche à sa fin (ouf!). Après avoir présenté le concept de grid CSS, les tests des frameworks BluePrint, Yahoo YUI et YAML, vont nous permettrent maintenant de conclure, et de répondre aux questions initiales

  • A quoi servent les frameworks? Quels sont leurs domaines d’application?
  • Faut-il les utiliser? pour quel usage?
  • Lequel utiliser?