Texte vertical
Ça fonctionne !!!
Ça fonctionne !!!
Petit problème lors de la réalisation de la nouvelle version de notre site NAOS: Comment écrire du texte verticalement avec du CSS afin d'éviter d'avoir à faire des images pour tous les textes ?
Après une petite recherche sur le net, j'ai trouvé quelques liens assez intéressants. Pour faire rapide voici un exemple de solution :
.verticaltext {
color:#333;
writing-mode:tb-rl;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
text-shadow: 0px 0px 1px #333;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
color:#333;
writing-mode:tb-rl;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
text-shadow: 0px 0px 1px #333;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
Alors, j'ai testé sur Mac OSX avec Safari, FF et Chrome ça fonctionne, mais pas avec Camino et Opera (version 10).
Ça marche sur Window XP, avec IE 7, FF, Safari et Chrome.
Il me reste juste à faire des tests de positionnement...
Ça marche sur Window XP, avec IE 7, FF, Safari et Chrome.
Par contre sur IE, pour arriver à mettre le texte dans le sens ou je voulais, j'ai ajouté dans la feuille de style l'élément suivant : filter:flipH() flipV();
Il me reste juste à faire des tests de positionnement...
Voici les liens intéressant pour plus d'informations sur le sujet :
Malheureusement, j'ai été obligé de faire une image pour chacune des rubriques. Ceci à cause de la trop grande différences visuelle des polices de caractères entre les Mac et les PC.
RépondreSupprimerLe résultat final n'était vraiment pas top, voire décevant.
Salut,
RépondreSupprimerPour que ça fonctionne sous Opera >=10.5, il faut utiliser :
-o-transform: rotate(270deg);
Merci bcp!!!
RépondreSupprimer