IV. Effets sur une page

1. Coins d’ une page.

Arrondissons un peu les coins de votre page !

Exemple :

Explication :

Ici, les balises «border-top-left-radius» et «border-bottom-right-radius» arrondissent le coin en haut (top) à gauche (left) ainsi que le coin en bas (bottom) à droite (right) de la page. Dans le cas où l'on mettrait qu'un «border-radius», tous les coins de la page seraient modifiés. Les balise «width» et «height» définissent quand à elles, la largeur et la hauteur de votre boite.

2. Les boîtes

a. Ombre

Différentes balises ont pour but de créer des effets sur le site. Ici, nous aborderons les ombres pour vous permettre de placer un peu plus d’effets à votre site.

Exemple :

Explication :

Le premier nombre vous permet de régler l’ombre de façon horizontale, ici de 1px 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).

Si vous souhaitez inverser l’ombre, il vous suffit de rajouter la valeur "inset", permettant de positionner l’ombre en haut à gauche.

Exemple :

b. Box Resize

Nous allons vous montrer comment créer une boite modifiable dans le sens de la longueur comme de la largeur. Ceci s'effectue en paramétrant la taille de votre boite créée à son apparition à l’ouverture de votre site, modifiable par la suite (d’où le principe de cette boite ^^).

Exemple :

Explication :

Vous pouvez rajouter «min-» devant width/heigh si vous désirez une taille minimale pour votre boite. Vous pouvez rajoutez «max-» devant width/heigh si vous désirez une taille maximale pour votre boite pour ne pas agrandir votre page à l’infinit.
«resize» : elle permet d'étirer la boite de façon verticale et horizontale. Vous pouvez écrire «resize-horizontal»/«resize-vertical» si vous souhaitez que le défilement se fasse de façon horizontale, ou verticale.
«overflow» : il règle automatiquement le texte par rapport à la boite.

Vous pouvez tirer le coin en bas à droite de la boite pour faire varier la tille de celle-ci et vous pouvez vous déplacer dans cette boite grace aux flèches situées à droite et en bas.

c. Dégradé

Mettez un peu de couleur à cette boite !!

Vous pouvez maintenant modifier votre couleur d'arrière plan, et mettre un jolie dégradé pour le rendre plus vivant !

Exemple :

Explication :

«border-radius» est la balise qui met en forme votre dégradé. On peut remarquer ici que le dégradé a pour point de départ le haut de la boite (top), et va se faire de haut en bas. Un dégradé partant du rouge (red) pour terminer au jaune (yellow). Voici un jolie couché de soleil.

Attention, pour Safari et Chrome, il y a un léger changement au niveau de la balise :

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, blue),color-stop(1, yellow));

d. Contour

Pour créer un jolie contour à votre cadre, nous utiliserons la balise "outline". Celle-ci permet la création d’un cadre autour d’un texte. Elle prend en information la largeur de la barrière en pixel, le style de bordure souhaitée ainsi que la couleur choisie.

Il existe 9 styles différents de bordures:

«inherit»
«dotted»
«solid»
«dashed»
«outset»
«ridge»
«double»
«inset»
«groove»

Nous allons vous expliquer chaque type plus clairement , mais d’abord regardons le code de cette balise.

Exemple :

Explication :

«outline»: elle définit l'épaisseur de la bordure que l'on a choisit, le choix de la bordure «dotted», ainsi que la couleur «#eb63eb».
«outline-offset»: c’est la distance définit entre le border et la outline, ici de 10px.

e. Transform.

Cette balise permet de tourner, pencher, agrandir comme rétrécir votre boite comme vous l’entendez, en mettant des effets de styles comme le zoom.

Exemple :

Explication :

«scale»: Il vous permet d’agrandir comme de rétrécir la boite, c’est l’effet zoom / dézoom. Elle varie entre 0.1 et 2, plus vous allez vers 2, et plus la boite se rapproche de votre écran, comme quand vous voulez regarder à travers le trou de la serrure.
«rotate»: elle permet de faire tourner la boite. Ici elle tourne de 60 degrés dans le sens des aiguilles d’une montre.
«translate»: permet de pouvoir déplacer votre boite en la translatant. Dans l’exemple ci dessus, la boite se déplace de 36px vers la droite, puis de 15px vers la gauche.
«skew»: elle vous permet de changer la forme de votre boite. Il ne fait varier que le déplacement du haut et du bas de votre boite, transformant celle-ci en une forme plus ou moins trapézoïdale. Les gauches et droits de la boite étant de plus en plus penchés. Sur l’exemple ci-dessous, le haut de votre boite se déplace de 6deg vers la gauche, et le bas de votre boite, de 8deg vers la droite.