Les nouveaux navigateurs tel que Firefox, Google-Chrome et Opera peuvent grace à des instructions modifier la présentation de ceux ci.
Les instructions entrant en ligne de compte font parties des instructions css et décrivent différents aspects comme la couleur les ombres rotations et ainsi de suite.
Un nombre restreint de ces instruction est suffisant pour enrichir la présentation graphiques des textes.
Les polices offrent la possibilité modifier le graphisme des textes. Une quantité énorme de polices existent, beaucoup ne peuvent pas être utilisée certaine possèdent une licence autorisant une exploitations plus ou moin libre.
Des polices connues sont Helvetica et son pendant Arial. Ces polices ont été conçues pour l'impression et ne sont pas particulièrement adaptées pour la reproduction sur écran. Les polices développées pour l'utilisation sur écran ne sont pas obligatoirement installée sur tous les ordinateurs, de plus ces polices ne sont généralement pas attractives.
Une solution élégante constitue à embarquer ses propres police sur le navigateur et de l'instruire quand à leur utilisation.
<style type="text/css">
@font-face {
font-family: YanoneKaffeesatz;
font-weight:normal;
src: url("fonts/YanoneKaffeesatz-Regular.ttf") format("truetype");
}
@font-face {
font-family: YanoneKaffeesatz;
font-weight:bold;
src: url("fonts/YanoneKaffeesatz-Bold.ttf") format("truetype");
}
</style>
Ces lignes font que le navigateur télécharge les fichiers YanoneKaffeesatz-Regular.ttf et YanoneKaffeesatz-Bold.ttf qui se trouvent sou le répertoire fonts qui lui même est dans le même dossier que les fichiers html. Le nom de police YanoneKaffeesatz est valable pout les deux fichiers. Les instructions font-weight:normal; et font-weight:bold; précisent le contexte d'utilisation de l'un ou de l'autre fichier. Les Titres sont généralement en caractère gras (bold), les textes courants en caractère normeaux (normal).
Au lieu de proposer des fichiers aux format ttf (TrueType) il est également possible d'utiliser de polices aux format woff. L'avantage du format woff est que la taille des fichiers est plus faible. Si vous posséder des fichiers woff il suffit de remplacer le suffixe .ttf par woff et de changer le format de "truetype" en "woff".
src: url("fonts/YanoneKaffeesatz-Bold.woff") format("woff");
Les polices TTF peuvent être convertie en fichier woff à l'aide de l'utilitaire sfnt2woff (http://people.mozilla.org/~jkew/woff/).
Il est, en plus, nécessaire de déclarer que ces polices sont à utiliser par défaut. La ligne suivante doit être placée dans la partie <style> du fichier html.
body { font-family: YanoneKaffeesatz; }
La taille devrait être définie pour les éléments concernés due fichier html. Les éléments <h1> et <h2> feraient suffire pour un diaporama.
Un em décrit la hauteur nécéssaire du cadre pouvant contenir n'importe quelque caractére de la police. Pour les police habituelle la hauteur d'une lettre majuscule comme le "A" correspond à environ 75% de la hauteur maximale, le reste est utilisé pour les accents et la partie inférieure des caractères comme le "g". La définition font-size: 5em est une donnée relative qui stipule que les lettres doivent être agrandie de 5 fois.
La déclaration color: red entraine le reproduction des textes en couleur rouge. Il est également possible de déclarer la couleur ainsi: color: rgb(255,0,0);. Chaque composante de la couleur du modèle rgb (rouge, vert, bleu) est précisée séparément, la luminosité peu prendre une valeur comprise entre 0 et 255. La couleur jaune est produite par color: rgb(255,255,0);, le rose par color: rgb(255,200,200);. Une notation en valeur hexadécimale peu également être utilisée: color: #ff0000; correspond au rouge. Si vous possédez un logiciel de traitement des images, vous disposé certainement d'une boite graphique de sélection des couleurs et vous pouvez prendre les valeurs affichées et les utiliser.
Internet Explorer 9 ne produit pas d'ombre avec les méthodes standard!
Le Stile
font-weight:bold;color:red;
text-shadow: .1em 0em 0em black;
produit:
Ombre
L'ombre est déplacée vers la droite.
font-weight:bold;color:red;
text-shadow: .1em 0.1em .0em black; donne:
Ombre
l'ombre est de plus déplacée vers le bas. Dans ces deux exemples, le contour de l'ombre
est net.
font-weight:bold;color:red;text-shadow: .1em 0.1em .07em black; engendre:
Ombre
Les contours sont flous.
font-weigth:bold;color:white:text-shadow: 0em 0em .17em black; donne:
Ombre
Cet effet peu être intéressant si le texte est superposé à une image dont les
couleurs sont similaires à celle du texte.
Les différents navigateurs ne dessinent pas des ombres identiques. Firefox produit des ombres moins nettes avec un rayon de flou plus important que pour ses confrères.
Le navigateurs moderne autorise la rotation des textes. Les instructions nécessaire ne sont pas encore passée dans les normes. De ce fait une commande spécifique doit être produite pour chaque navigateur.
display: inline-block; color:red; font-size:3em; font-weight:bold; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg);
génère:
Les ligne noires délimitent la hauteur maximale prisent par la police.
Il est, bien sur, possible de combiner les différent effets.
Un fichier html n'est pas une chose compliquée. Un fichier simple ne consiste que de peu d'éléments.
<!DOCTYPE html> Déclaration de la variante Html, ici html 5 <html lang="de"> Début du code <head> Entête (javascript, Style) </head> <body> Contenu </body> </html>
Chaque section contient les éléments définis ci après:
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* Déclaration des polices et de la taille par défaut */
body {
font-family: sans-serif;
font-size: 100%;
}
/* Définition de certains attributs des éléments html utilisés */
h1 {
text-align:center;
font-size:9em;
color:red;
}
h2 {
text-align:center;
font-size:4.5em;
color:lime;
}
/* Déclaraion des classes */
.rot-15 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.shadowWhite {
text-shadow: .1em .1em .07em white;
}
.shadowYellow {
text-shadow: .1em .07em .2em #ffff77;
}
.lime {
color:lime;
}
</style>
<script>
/* Les fonction javascript nécessaires à la
* visualisation du document peuvent être placées ici.
* Cette partie peu être supprimée ci non nécessaire.
*/
</script>
Des commentaires peuvent être inclus dans les sous sections <style>.. </style> et <script>.. </script> Les commentaires débutent avec /* et se terminent avec */.
La sous section <style> permet, entre autre, la définition des caractéristiques des éléments principaux (h1, h2) ce qui devrait, dans le cadre de notre diaporama être suffisant.
Il est également possible d'assigner des éléments à différentes classes (class). Cette méthode autorise la définition d'attributs supplémentaires pour un ou plusieurs éléments de la section du contenu (body).
Cette section reçoit le code qui sera visualisé. elle pourrait comprendre le code suivant:
<h1 class="shadowWhite">Mes vacances</h1> <h1 class="lime shadowYellow rot-15">2011</h1>
Le document produit sera ceci:
Opera, contrierement à ses collègues Firefox et Google-Chrome applique la couleur transparente> (color:transparent;) sur l'ensemble texte et ombres. Il est donc nécessaire de choisir une autre voie pour réaliser ceci.
.ntext {
position:relative;
left:-10000px;
text-shadow: 10000xp 0em .2em white;
}
produit les effet suivants:
L' élément qui est membre de la classe ntext
est dans un premier temps déplacé vers la gauche à
l' extérieur de la surface de visualisation (
left:-10000px;). Les ombres sont
positionnées par rapport aux texte dans la direction
opposée. L'exemple suivant démontre cet effet sur le
second élément.
Nous utilisons, à ce niveau l'unité de mesure px (pixel) car Opera n'accepte que des caleurs comprisent entre -32744 et 32744. L'utilisation de l'unité em est calculée internement en pixel et si nous utilisons une valeur exprimée en em trop élevée nous risquons une conversion à une valeur située hors de la plage admissible.
une superposition de différents textes peu être produite par la rotation de l'un de ceux ci.
La boite contenant un texte (h1, h2, p, ...) possède plusieurs attributs d'espacements. Un espace extérieur (margin) et un espace intérieur (padding). Les espaces extérieurs de deux éléments consécutifs sont superposés, l'espacement résultant correspond à l'espace le plus grand.
Lors de l'inclinaison nous pouvons obtenir quelque chose de similaire à ceci:
La modification de l'espacement externe due second élément <h1 style="margin-top:0.8em;"> nous permet d'afficher cela:
Nous avons, ici, déclaré le stile directement dans l'élément concerné. La valeur adéquate dépend de la longueur du texte. Le code est ce qui suit:
<h1>Des ennuis, que des ennuis</h1>
<h1 class="rot-15" style="margin-top:0.5em;" >Ennuis, ennuis</h1>
L'espacement extérieur peu être définit de différente façons. margin: 1em; signifie que les marges sont les mêmes sur les quatres cotés. margin: 1em 0em; produit des marges inférieure et supérieures de 1 em, sur les cotés droit et gauche il n'y a pas de marge.
Les marges peuvent être spécifiées séparément: margin: 1em 2em 3em 4em; signifie en haut: 1 em a droite 2em, en bas 3em et a gauche 4em.
Une autre possibilité est la suivante:
margin-top: 1em;
margin-right; 2em;
margin-bottom; 3em;
margin-left: 4em;
Une modification des espacememts externes ont un petit défaut, si les textes doivent être centrés verticalement, le navigateur le fait par rapport aux cadre contenant les textes (ici en bleu).
L'exemple, ci dessus, montre le cadre (bleu) entourant les deux
éléments. Le texte incliné déborde amplement.
Étant donné que des marges intérieures (padding) peuvent être spécifiées, nous pouvons utiliser cette alternative:
<h1 style="padding:.8em 0;" class="rot-15" >Ennuis, ennuis</h1>
Les élements sont maintenant à l'intérieur de la boite les contenants, Ceci mous permettra un centrage vertical correct.
Les règles concernant la définition des marges extérieures sont applicables pour l'attribut padding.