III. Texte
1. Ombre sur un texte
Pour créer une ombre au texte nous utilisons la balise «text-shadow», pour l’effet de style !
Exemple :
Explication
Le premier nombre vous permet de régler l’ombre de façon horizontale, ici de 3px vers la droite.
Le deuxième permet de régler l’ombre verticalement, ici de 6px vers le bas.
Le troisième permet de plus ou moins flouter votre ombre selon le nombre de pixel que vous choisi (opacité). Ici il est de 4px.
Le dernier terme est la couleur de l’ombre (les réglages pouvants être positif comme négatif).
text-shadow
2. Réglage de la couleur
En CSS3, vous utilisez que la balise RGBA (Red Green Blue Alpha (Opacity)), ce qui est plus simple ! Vous n’avez plus le choix entre plusieurs balises !! Comme vous vous en doutez, RGBA va vous servir à mettre des éléments de votre site en couleurs.
Exemple :
Explication :
Les couleurs vont de 0 a 255. Le premier chiffre représente la couleur rouge, le deuxième la couleur bleu, et enfin le troisième, la couleur verte. Mais que représente Alpha ? Il sert à faire varier l’opacité de votre fond. Ici, Alpha varie de 0.1 a 1, si vous voulez qu’il soit plus ou moins transparent. Plus vous allez vers le chiffre 1 et plus la couleur est opaque.
Je suis presque transparent
On me voit un petit peu
Je suis là !
Précision: vous pouvez utiliser ce genre de balises pour mettre une couleur en fond de votre site !
3.Transition
Comme vous aviez pu le remarquer, lors du passage de votre souris sur l'un des titres du sommaire, ou même sur l'un des boutons de la page, le titre se color en rouge. C'est grâce au «hover» que cette transition se met en place. Nous allons voir ca plus en détail.
Exemple :
Explication :
Nous avons choisit ici comme couleur principal pour notre texte, le bleu. Le «hover» va vous permettre d'activer la transition, et ainsi de modifier la couleur de votre texte au passage de la souris dessus. Nous avons choisit la couleur rouge pour l'exemple ci-dessous.
4. Agencer un texte
Avec le CSS, vous allez pouvoir agencer un texte en plusieurs colonnes sur une seule et même page. Pratique lorsque l'on veut garder la mise en page d’un article de journal par exemple ou juste pour le plaisir de mettre 1, 2, voir 1000 colonnes (2 ou 3 colonnes sont largement suffisantes, vous n’arriverez plus à lire apres ^^)
Exemple :
Explication :
Voici l'apparition de deux nouvelles balises, «column-count« et »column-gap».
«column-count» indique le nombre de colonnes que l’on souhaite mettre. Nous avons choisit dans l'exemple ci-dessus trois colonnes.
«column-gap» permet de régler un certains espace entre les colonnes, nous avons choisit 20 pixels.
En France, l'apparition des premiers articles de presse coïncide avec le développement de l'imprimerie, qui permet de diffuser des feuilles volantes comportant des «nouvelles». À partir du XVe siècle, les «occasionnels», surtout vendus par colportage, se composent d'un ou plusieurs textes consacrés à un événement (bataille, célébration, décès d'une personnalité, etc.) et illustrés par des gravures sur bois.
1,
2,
3,
4,
5