Jusque là, on a vu comment faire un site. Ce n'est pas bien compliqué. Maintenant on va voir comment arranger nos pages et leur donner un peu de personnalité. Je teste les exemples sur les dernières versions de Firefox (y compris Firefox Developer), Chrome, Internet Explorer, Opera et Safari sous Windows et Firefox et Chrome sous Androïd.
Restons à l'ombre
Le lion et le rat (Jean de La Fontaine)
Il faut, autant qu'on peut, obliger tout le monde :
On a souvent besoin d'un plus petit que soi.
De cette vérité deux fables feront foi,
Tant la chose en preuves abonde.
Entre les pattes d'un Lion
Un Rat sortit de terre assez à l'étourdie.
Le Roi des animaux, en cette occasion,
Montra ce qu'il était, et lui donna la vie.
Ce bienfait ne fut pas perdu.
Quelqu'un aurait-il jamais cru
Qu'un Lion d'un Rat eût affaire ?
Cependant il advint qu'au sortir des forêts
Ce Lion fut pris dans des rets,
Dont ses rugissements ne le purent défaire.
Sire Rat accourut, et fit tant par ses dents
Qu'une maille rongée emporta tout l'ouvrage.
Patience et longueur de temps
Font plus que force ni que rage.
On a souvent besoin d'un plus petit que soi.
De cette vérité deux fables feront foi,
Tant la chose en preuves abonde.
Entre les pattes d'un Lion
Un Rat sortit de terre assez à l'étourdie.
Le Roi des animaux, en cette occasion,
Montra ce qu'il était, et lui donna la vie.
Ce bienfait ne fut pas perdu.
Quelqu'un aurait-il jamais cru
Qu'un Lion d'un Rat eût affaire ?
Cependant il advint qu'au sortir des forêts
Ce Lion fut pris dans des rets,
Dont ses rugissements ne le purent défaire.
Sire Rat accourut, et fit tant par ses dents
Qu'une maille rongée emporta tout l'ouvrage.
Patience et longueur de temps
Font plus que force ni que rage.
Il ne s'agit pas ici d'une balise <object> comme on a vu page précédente mais d'une simple balise <div> légèrement améliorée. Lorsque vous passez votre souris sur le texte, celui-ci change d'aspect.
Dans le code ci-dessous, je n'ai pas mis le contenu de la balise head pour ne pas alourdir inutilement le code. De même, j'ai abrégé la fable dans le code car elle n'apporte rien de particulier.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
<style type="text/css">
<!--
#rat {
background-color: #ffffc1;
overflow: auto;
width: 350px;
height: 200px;
box-shadow : 10px 10px 8px #000000;
float: left;
margin-right: 18px;
}
#rat:hover {
background-color: #e0ffff;
color: #ff0000;
}
//-->
</style>
<b>Le lion et le rat</b>
<br>
<div id="rat">
Il faut, autant qu'on peut, obliger tout le monde :<br>
<br>
On a souvent besoin d'un plus petit que soi.<br>
..
..
..
Patience et longueur de temps<br>
Font plus que force ni que rage.<br>
</div>
</body>
</html>
<!DOCTYPE html> : Déclaration obligatoire. On utilise HTML 5 et CSS 3. On reviendra dessus dans les annexes.
<html lang="fr"> : En HTML 5 on déclare la langue de la page dans la balise html.
overflow: auto; : Cette propriété nous permet de gérer les débordements. Dans notre exemple, le texte est trop long pour être contenu dans le DIV alors le navigateur ajoute une barre de défilement verticale. Le texte aurait été trop large, une barre horizontale aurait été ajoutée.
Le roman raconte les aventures d'un Gascon impécunieux de 18 ans, d'Artagnan, venu à Paris pour faire carrière dans le corps des mousquetaires. Il se lie d'amitié avec Athos, Porthos et Aramis, mousquetaires du roi Louis XIII. Ces quatre hommes vont s'opposer au premier ministre, le cardinal de Richelieu et à ses agents, dont le comte de Rochefort et la belle et mystérieuse Milady de Winter, pour sauver l'honneur de la reine de France Anne d'Autriche.
Avec ses nombreux combats et ses rebondissements romanesques, Les Trois Mousquetaires est l'exemple type du roman de cape et d'épée et le succès du roman a été tel que Dumas l'a adapté lui-même au théâtre, et a repris les quatre héros dans la suite de la trilogie.
Toujours très populaire, ce roman a fait l'objet de très nombreuses adaptations au cinéma et à la télévision.
Avec ses nombreux combats et ses rebondissements romanesques, Les Trois Mousquetaires est l'exemple type du roman de cape et d'épée et le succès du roman a été tel que Dumas l'a adapté lui-même au théâtre, et a repris les quatre héros dans la suite de la trilogie.
Toujours très populaire, ce roman a fait l'objet de très nombreuses adaptations au cinéma et à la télévision.
La propriété overflow possède de nombreux arguments qui aident à gérer correctement les débordements. Dans l'exemple de gauche, j'utilise une propriété que, pour le moment, seul Firefox et Explorer gèrent. Il s'agit de la propriété hyphens: qui peut prendre deux arguments auto et manual. Avec auto, la césure se fait de façon intelligente tandis qu'avec manual, la césure se fait sur des espaces ou des tirets que l'on doit ajouter manuellement.
-ms-hyphens:auto;
hyphens:auto;
Ces petites choses devant la propriété hyphens sont appelées des préfixes vendeurs (vendeurs pour marchands de navigateurs). Elles sont nécessaires à certaines propriétés pour pouvoir fonctionner. Ces préfixes n'ont pas vocation à rester. Firefox s'en passe aujourd'hui, Opéra ne l'a pas encore implémenté.
- -o- pour Opera
- -moz- pour Gecko (Mozilla)
- -webkit- pour Webkit (Chrome, Safari, Android...)
- -ms- pour Microsoft (Internet Explorer)
- -khtml- pour KHTML (Konqueror)
#rat:hover : Indique le passage de la souris sur un conteneur. On l'avait vu lorsqu'on a parlé des liens.
box-shadow : 10px 10px 8px #000000; : Voilà une propriété qui ne nécessite plus de préfixe vendeur, les dernières versions des navigateurs la reconnaissent sans problème. C'est elle qui sert, comme son nom l'indique, à ombrer les conteneurs. Les deux premières valeurs indique quels décalages vont être appliqués horizontalement puis verticalement. La troisième valeur indique sur quelle distance va s'étaler l'ombre. Enfin, la quatrième valeur indique la couleur utilisée pour l'ombre. Dans les exemples qui suivent, j'aurai pu remplacer les valeurs hexadécimales par black, red, green et blue.
box-shadow: 6px 6px 10px #000000;
box-shadow:-6px 6px 10px #ff0000;
box-shadow: -6px -6px 10px #00ff00;
box-shadow: 6px -6px 10px #0000ff;
Dans les exemples ci-dessus, vous avez les quatre possibilités de base d'une ombre portée. On peut apporter quelques variantes à notre ombre. Si on supprime la troisième valeur, celle du dégradé, on obtient ceci.
box-shadow: 6px 6px #000000;
Si on veut, on peut placer l'ombre à l'intérieur du conteneur. Pour cela, on dispose du mot-clé inset placé devant les valeurs.
box-shadow: inset 0px 25px 30px gold;
Pour finir, on va mettre une ombre à l'intérieur et une autre à l'extérieur du conteneur.
box-shadow: inset 6px 6px 10px royalblue, 6px 6px 10px black;
Il est également possible de mettre une ombre sur du texte. La syntaxe est la même que pour les conteneurs.
<span style="
font-size: 40px;
font-weight: bold;
color: red;
text-shadow: 2px 2px 5px black;
">
C'est sympa une ombre
</span>
Les deux premières valeurs qui suivent text-shadow: sont obligatoires. Il s'agit des décalages horizontal et vertical de l'ombre par rapport au texte. La troisième valeur représente l'étalement de l'ombre. Enfin, on trouve la couleur qui peut être exprimée en hexadécimal, par son nom, en rgb() ou mieux, en rgba(). Cette denière notation peut être interssante si vous utilisez du texte ombré sur une photo.