CSS 3 : les effets de texte

C’est en 1999 que le développement des CSS 3 a débuté et aujourd’hui encore tous les navigateurs du marché ne sont pas capables de les interpréter. C’est d’autant plus regrettable que ces dernières apportent de nombreuses nouveautés très pratiques pour tous les webmestres. Oui même que nous allons justement nous intéresser aux effets de texte qui vous permettront de laisser Photoshop de côté.

Développer en CSS 3 est un choix qui appartient à chaque webmestre. Comme je l’ai dit un peu plus haut, tous les navigateurs du marché ne sont pas capables de les interpréter. Concrètement, si la plupart de ces derniers font de gros efforts, c’est encore et toujours Internet Explorer qui reste à la traîne. Même sa dernière version, Internet Explorer 8, n’est pas capable de gérer la plupart des nouvelles propriétés introduites par les CSS3.

Globalement, donc, il est préférable de ne pas baser tout son site sur les CSS 3. En revanche, ceux qui ont un vrai navigateur seront les premiers à en profiter et c’est finalement ça qui compte. Pour le reste, comme dirait l’autre, OSEF !

Le Word-Wrapping : la césure du texte

D’un certain sens, le texte est assez paradoxal. C’est l’élément le plus important d’un site (sans contenu, un site n’est rien) mais c’est aussi le plus difficile à mettre en forme. On doit choisir le bon contraste, c’est un fait, mais on doit également s’assurer de bien présenter ses paragraphes pour qu’ils soient aérés et qu’ils incitent nos visiteurs à passer un peu plus de temps chez nous.

En la matière, les propriétés CSS ne manquent pas. En dehors de l’éternel « text-align », on peut aussi citer le « letter-spacing » ou encore le « line-height » qui nous permettent de faire pas mal de choses. Cela dit, le vrai problème, ce sont les longs mots (ou les URL) qui ont tendance à semer la zizanie dans notre mise en page et l’objectif de la propriété « word-wrap » est justement de nous filer un coup de main :

1
2
3

p {
word-wrap: break-word;
}

Compatibilité :

• Internet Explorer : à partir de la version 5.5
• Opera : ?
• Safari : à partir de la version 1.0
• Firefox : à partir de la version 3.5
• Chrome : ?

Web Fonts : toutes les polices que l’on aime

Les webmestres le savent, tous les navigateurs ne sont pas capables d’interpréter toutes les polices d’écriture. En réalité, ces dernières varient même selon le navigateur, bien sûr, mais aussi et surtout selon le système d’exploitation de l’internaute. On est donc souvent obligé de troquer notre chouette police ultra hyper qui rend super bien sur Photoshop avec des polices plus traditionnelles.

Bien entendu, des méthodes existent pour tromper le navigateur, comme de transformer certains éléments en images, mais les CSS 3 le permettent également grâce à la règle « @font-face » dont voici un exemple :

1
2
3
4

@font-face { 
font-family: 'Nom de ma police hype'; 
src: url('url de ma police hype');
}

Compatibilité :

• Internet Explorer : Embedded OpenType uniquement
• Opera : à partir de la version 10
• Safari : à partir de la version 3.1
• Firefox : à partir de la version 3.5
• Chrome : ?

Text-Shadow : de l’ombré sur ses textes

En réalité, cette propriété a été introduite dans les CSS 2 mais je la compte quand même dans cette liste car je la trouve très orientée CSS 3. Elle permet ainsi d’ajouter un effet ombré à n’importe quel texte. On précisera en outre que l’effet est entièrement personnalisable et qu’il peut ainsi s’adapter à n’importe quelle charte.

1
2
3

.monelement {
text-shadow: 2em 2em 0.2em red;
}

C’est donc un bon moyen de mettre en valeur certains éléments de son texte et par conséquent d’attirer l’attention des internautes. Pour certains, ce n’est qu’un effet « gadget » mais vous aurez sans doute compris que je ne suis pas de ceux-là.

Compatibilité :

• Internet Explorer : non
• Opera : à partir de la version 9.5
• Safari : à partir de la version 1.1
• Firefox : à partir de la version 3.1 (ombres multiples à partir de la version 4.0)
• Chrome : à partir de la version 1