Arts numériques

CSS pour le futur

Le langage CSS a été mis en place au milieu des années 90’ et a connu plusieurs versions depuis. La version qui sert de base au codage actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours pas implémentée partout.
CSS3 n’est pas encore officiellement adopté partout mais plusieurs navigateurs tirent vers l’avant cette norme de description css en reconnaissant certaines déclarations.

Voici celles qui nous paraissent rapidement utilisable.
un site web de test pour plusieurs des déclarations ci-dessous : css3 generator.

Box shadow

La déclaration "box-shadow", comme son nom le laisse entendre, permet de mettre une ombre portée àun élément de type block.
Voici un exemple rapide :

box-shadow: 0 0 40px #BDBAB2;

Plusieurs paramètres sont àdonner :
1) décalage horizontal vers la droite (ici 0)
2) décalage vertical vers le bas (ici 0)
3) étendue de la diffusion (ici 40px)
4) la couleur (ici #BDBAB2)

Pour rendre la déclaration compatible avec de vieilles versions de safari et firefox et quelques autres logiciels, on devra déclarer plusieurs fois le box shadow en le précédent de préfixes - moz- et -webkit-, et ce pour encore quelques années.

Donc voici un code complet

box-shadow: 0 0 40px #BDBAB2;
-moz-box-shadow: 0 0 40px #BDBAB2; 
-webkit-box-shadow: 0 0 40px #BDBAB2;

Un article plus complet sur Alsacréations
Un autre sur mamouthland

Text shadow

Il est aussi possible de donner des ombres aux éléments de texte eux-mêmes.

text-shadow:1px 1px 2px #666;

De nouveau, les paramètres gèrent le décalage en x et y, puis la dose de flou et la couleur.
Note : Internet explorer ne reconnait pas la transparence de texte.
Voir le lien vers alsacréations pour plus d’info.

Transparence de couleur

On peut aussi rendre partiellement transparente une couleur en lui associant une valeur en rgba :

color:rgba(255,0,0,0.5);

les trois premiers paramètres sont les valeurs du rouge, vert et bleu entre 0 et 255, puis l’opacité de la couleur entre 0 et 1.

Dégradé de couleur en background

Il est désormais possible de placer un dégradé en background. Techniquement, le code affecte l’attribut background-image :

body {
    background-image:linear-gradient(90deg,red,yellow);
}

Le premier argument est l’orientation (ici 90 degrés pour un dégradé horizontal), puis la liste des couleurs par lesquelles passe le dégradé, ici du rouge au jaune.
Il est possible d’être plus précis dans le points de passage des couleurs :

body {
    background-image:linear-gradient(90deg, red 0%, yellow 10%, blue 50%, purple 100%);
}

Il est aussi possible de faire des dégradés radiaux, en forme de cercle donc :

body {
    background-image:radial-gradient(90deg, red 0%, yellow 10%, blue 50%, purple 100%);
}

Et il est possible enfin de produire des dégradés répétitifs.

body {
background-image:repeating-linear-gradient(90deg,white 0px,white 10px, black 15px, black 25px, white 30px);
}

Voir la page de documentation sur le site de la fondation Mozilla.

Appliquer des filtres sur des images

Il est possible d’appliquer des filtres sur les images. Cette option est très gourmande en ressources, et donc a utiliser avec parcimonie, mais promet de beaux développements : l’attribut filter a pour le moment un nombre limité d’effets mais rien n’empêche àl’avenir de la compléter.
Actuellement il est possible d’utiliser : blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() ;

Selon les cas, on trouvera entre parenthèses un pourcentage (en % ou valeur entre 0 et 1), un chiffre en longueur (em ou px par exemple) et parfois des paramètres plus complexes (dans le cas du drop shadow par exemple.

#truc img {
   filter: blur(5px);
}

Combiné avec une déclaration css en survol (:hover), c’est enfin une solution pour éviter de devoir utiliser deux images.

Voir la page de référence sur le site Mozilla.

Border-radius

Les coins d’un bloc peuvent enfin être arrondis avec css3, sans devoir utiliser des images de fond...
Les bords arrondis sont reconnus par tous les navigateurs contemporains (Explorer 9 les accepte).

border-radius:10px;

Remarquez les deux déclarations permettant la reconnaissance par les vieux navigateurs Safari et Firefox.

Sachez qu’il est possible de préciser les arrondis de chaque coins séparément, comme ceci par exemple :

border-radius: 5px 10px 0 5px;

Display : flex

La déclaration "display" a reçu plusieurs nouveaux modes avec css3. Le mode flex est un de ceux qui apporte des solutions pratiques aux graphistes qui ont été attendues longtemps.
Le display flex s’applique àun élément parent, et agit sur le premier niveau de ses enfants. Par exemple, une liste ul et ses enfants li. Ou encore, une section et ses articles enfants.

Display : flex peut remplacer dans de nombreux cas de figure la disposition en float. Mais il a beaucoup d’avantage en plus.
Par exemple, les enfants d’un élément en display:flex vont par défaut se placer en ligne horizontale, en répartissant leur largeur. Ils vont aussi occuper le même espace vertical quand ils sont sur la même ligne.
On peut aussi les justifier facilement àgauche ou àdroite, changer leur ordre, décider s’ils peuvent occuper une seule ligne ou plusieurs...
Voir un didacticiel assez complet et en français sur flex chez Alsacreations

Polices embarquées

Les polices utilisables dans une page web sont par défaut celle qui sont présentes dans le système de l’ordinateur utilisé. Il est possible depuis longtemps de charger une police personnelle, mais c’est seulement avec css3 et les polices open source que cette solution est viable.

L’utilisation de polices personnalisées reste complexe cependant pour deux raisons :
– il est nécessaire de posséder les droits d’utilisation de ces polices. On peut utiliser aujourd’hui pas mal de polices ouvrant ces droits, mais n’importe qui d’un peu malin peut, comme pour une image, télécharger la police depuis votre site et ensuite l’utiliser sur son ordinateur, ce qui est problématique.
– Les navigateurs ou nouveau médias (tablette, smartphone) ne suivent pas les mêmes standards. Pour faire face àtous ceux-ci, il faut pas moins de 4 fichiers : TrueType pour Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, EOT pour Internet Explorer 4+, WOFF pour Firefox 3.6+, Internet Explorer 9+, Chrome 5+ et SVG pour iPad and iPhone

Fabriquer ces fichiers et les déclarer dans la css est encore un peu compliqué donc. Conseil final : suivez la procédure sur le site web de fontSquirrel. Ils mettent àdisposition un nombre élevé de "fontface kits", ou kits tout fait pour l’utilisation de ces polices.

Lire les deux articles sur ce site concernant l’historique et la mise en pratique des typos embarquées.
Voir le site des fontface kits sur le site fontsquirrel

Medias queries

Les medias queries permettent d’adapter un comportement css àcertaines configuration de la page. Typiquement, pour réduire les tailles de polices pour les petits écrans, ou repèrer si on est sur une tablette ou un smartphone. Impossible de couvrir le sujet dans cet article en forme d’overview, voici un exemple simple :

@media screen and (max-height:600px){
#general {
width:400px;
}
}

Lire les deux articles sur le concept de media queries et la mise en pratique sur ce site.

Voir un article àce sujet sur le site de Mamouthland

Sélecteurs

On peut aussi sélectionner des éléments de manière plus précise qu’en css 2.1 : le premier paragraphe d’un bloc, ou le troisième, etc.
Un article au sujet des nouveaux sélecteurs sur le site de Jérôme Debray