II. Propriétés d'un bloc
Prenons comme exemple de départ, comme "base", un rectangle simple de couleur blanche:
- Code:
<div style="width: 200px; height:100Px; background: white;"> Je suis un bateau. </div>
Qui donne:
Je suis un bateau.
Dedans nous avons donc:
La propriété "width" qui permet de régler la largeur du bloc.
La propriété "height" qui permet de régler la hauteur du bloc. La valeur de ces deux propriétés est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px, valeur fixe) et le pourcentage (%, valeur relative, variant suivant la taille de l'écran).
Un petite exemple avec une valeur en pourcentage:
- Code:
<div style="width: 50%; height:100Px; background: white;"> Je suis un bateau. </div>
Qui donne:
Je suis un bateau.
Avant de passer à la dernière propriété de ce petit code tout simple (le "background"), je tiens à préciser que vous pouvez aussi rajouter une largeur et une hauteur minimale ( "min-width" et "min-height") ainsi qu'une largeur et hauteur maximale ("max-width" et "max-height"). Vous n'en voyez pas l'utilité ? Imaginons que vous conceviez un design entièrement en pourcentage, un design qui s'adapte donc à tous les écrans quels que soient leur taille (idée grandiose n'est-ce pas) mais que vous voulez que les avatars ne dépassent jamais 200x320, alors vous devez définir 200x320 comme la largeur et la hauteur maximale des avatars et ainsi, même si quelqu'un possède un écran immense, il ne verra pas les avatars déformés. Ils seront obligatoirement à la taille maximale que vous avez défini.
Sinon, revenons à la propriété "background" qui permet de définir la couleur du bloc. Le plus souvent, la couleur est exprimée en hexadécimal (mais si vous savez, cette chose: #FF6347) ou par son nom (blue, tomato, lightgreen etc. Pour toutes les voir, vous pouvez aller ici: http://web-color.aliasdmc.fr/ ).
On peut créer un dégradé comme couleur de fond, dans ce cas il faut ajouter à la propriété "background", la valeur "linear-gradient". Cette valeur se construit selon cette logique : linear-gradient( direction (ex to right, to top, to left bottom), couleur1, couleur2 )
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: linear-gradient(to top, darkcyan, white);"> Je suis un bateau dont le dégradé va vers le haut (to top) . </div>
Donne:
Je suis un bateau dont le dégradé va vers le haut (to top) .
- Code:
<div style="width: 200px; height:100Px; background: linear-gradient(to top left, darksalmon, white);"> Je suis un bateau dont le dégradé va vers le haut à gauche (to top left). </div>
Donne:
Je suis un bateau dont le dégradé va vers le haut à gauche (to top left).
Vous pouvez aussi faire un dégradé "radial" (qui part d'un point) en utilisant la valeur "radial-gradient". Cette valeur se construit selon cette logique : radial-gradient( forme (circle ou ellipse, circulaire ou elliptique donc) at origine (top center, bottom left etc), couleur1, Couleur2), donc sans les précisions sur les valeurs que vous pouvez utiliser: radial-gradient (forme at origine, couleur 1, couleur 2).
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: radial-gradient(circle at top center, darkcyan, white);"> Je suis un bateau dont le dégradé est de forme circulaire (circle) avec une origine est en haut au centre (top center). </div>
Donne:
Je suis un bateau dont le dégradé est de forme circulaire (circle) avec une origine est en haut au centre (top center).
- Code:
<div style="width: 200px; height:100Px; background: radial-gradient(ellipse at center, darksalmon, white);"> Je suis un bateau dont le dégradé est de forme elliptique (ellipse) avec une origine est au centre (center). </div>
Donne:
Je suis un bateau dont le dégradé est de forme elliptique (ellipse) avec une origine est au centre (center).
La propriété "margin" permet de régler les marges extérieurs du bloc, permettant alors de le centrer en utilisant la valeur "auto". Privilégier le "margin:auto" à la balise dépréciée "center". On peut aussi se concentrer sur une seule marge en particulier en utilisant "margin-top" (haut), "margin-bottom" (bas), "margin-left" (gauche), margin-right" (droite).
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: white; margin: 50px;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
- Code:
<div style="width: 200px; height:100Px; background: white; margin: auto;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété "padding" permet de régler les marges intérieurs du bloc (afin que le texte ne soit pas collé à la bordure par exemple). Attention : le padding déforme votre taille de bloc, cette propriété le rend plus grand, à vous de jouer avec la taille de votre bloc si vous souhaitez avoir une taille précise.
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: white; padding: 10px;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété " background-image" permet de mettre une image sur le fond du bloc.
Exemple :
Prenons cette image de 100x100 libre de droit:
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png');"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Le fond se répète et vous ne le souhaitez pas ? La propriété " background-repeat" associée à la valeur "no-repeat" permet de fixer le fond sans qu'il ne se répète.
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-repeat: no-repeat;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété "background-position" permet de fixer le fond à l'endroit où vous désirez qu'il soit. Vous pouvez l'écrire de deux façons :
- en utilisant les valeurs définies par un nom comme top, top center, bottom etc ...
- en utilisant des unités de mesures (pixels ou pourcentages), dans ce cas là vous avez besoin de deux valeurs mis côte à côte sans signe de ponctuation (ex: background-position: 10px 20px). La première valeur correspond à l'horizontalité, la deuxième à la verticalité.
Exemple pour les unités de mesure puis avec les noms:
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-repeat: no-repeat; background-position: 10px 20px;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-repeat: no-repeat; background-position: center;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété " background-size" permet de gérer les limites de l'image à l'intérieur de notre bloc. Associée à la valeur "contain", l'image s'adapte à la taille de l'élément sans déformation. La valeur "cover" fait la même chose mais peut être rogner (c'est à dire qu'une partie de l'image n'apparaît pas). On peut aussi exprimé la valeur en utilisant des unités de mesures (pixels ou pourcentages), dans ce cas là vous avez besoin de deux valeurs mis côte à côte sans signe de ponctuation (ex: background-size: 10px 50%). La première valeur correspond à l'horizontalité, la deuxième à la verticalité. La valeur "auto" est la valeur par défault.
Exemple avec contain:
- Code:
<div style="width: 90px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-size: contain;"> Je suis un bateau avec contain dans un bloc plus petit que l'image. </div>
Donne:
Je suis un bateau avec contain dans un bloc plus petit que l'image.
Exemple avec cover:
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-size: cover;"> Je suis un bateau avec cover. </div>
Donne:
Je suis un bateau avec cover.
Exemple avec des unités de mesures:
- Code:
<div style="width: 200px; height:100Px; background: white; background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-size: 80% 20px;"> Je suis un bateau avec des unités. </div>
Donne:
Je suis un bateau avec des unités.
La propriété "overflow" permet de gérer les textes (ou autres) trop longs pour votre bloc. En y associant la valeur "auto", vous créez une scrollbarre. En y associant la valeur "hidden", vous cachez tout ce qui dépasse du bloc. En y associant la valeur "scroll" vous mettez une barre de défilement horizontale et verticale (même s'il n'y en a pas besoin).
- Code:
<div style="width: 200px; height:100Px; background: white; overflow: auto;"> Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.</div>
Donne:
Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.
Bande de fourbes.
La propriété "background-attachment" permet de définir si l'image de fond va défiler avec le bloc ou rester fixe. En y associant la valeur "scroll", il ne défilera pas avec l'élément, il est rattaché à la bordure de celui ci (oui ça semble contre intuitif qu'une valeur scroll... ne fasse pas défiler. Mais si vous êtes curieux, valtena_ethan donne la réponse du pourquoi en page 2 et finalement c'est bien logique !). Avec la valeur "fixed", le fond bouge en fonction de votre position dans la page, je ne sais trop comment l'expliquer mais voyez donc l'effet à la suite. Par contre, avec la valeur "local", l'arrière-plan se déplace avec le contenu de l'élément associé.
- Code:
<div style="width: 200px; height:100Px; background: white; overflow: auto;background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-attachment: scroll;"> Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.</div>
Donne:
Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.
Bande de fourbes.
- Code:
<div style="width: 200px; height:100Px; background: white; overflow: auto;background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-attachment: fixed;"> Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.</div>
Donne:
Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.
Bande de fourbes.
- Code:
<div style="width: 200px; height:100Px; background: white; overflow: auto;background-image: url('http://img15.hostingpics.net/pics/973536100pxNChartSymbolINTRockAwashsvg.png'); background-attachment: local;"> Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.</div>
Donne:
Je suis un bateau. Un énorme bateau. Je vous jure, promis. Genre le truc de croisière, oui celui-là même qui s'est écrasé sur un ice-berg. Je suis le titanic héhé. Quoi ce n'est pas une fierté ?
Bande de fourbes.
Bande de fourbes.
La propriété "opacity" permet de régler l'opacité, la transparence du bloc. Sa valeur est un nombre compris entre 0 et 1, 0 étant totalement transparent et 1 totalement opaque. Mais une technique que je vous explique après est bien plus utile dans la mise en forme.
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: white; opacity:0.5;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété "background-color" peut aussi régler l'opacité, la transparence du bloc. Son utilité par rapport à l'autre technique ? Le texte n'est pas touché, il ne devient pas plus transparent, c'est donc plus lisible et très pratique. Sa valeur est exprimée par le code couleur en rgb (différent de l'hexadécimal mais vous pouvez trouver sur internet des convertisseurs d'hexadécimal en rgb) puis une valeur d'opacité comprise entre 0 et 1, 0 étant totalement transparent et 1 totalement opaque.
Exemple :
- Code:
<div style="width: 200px; height:100Px; background-color: rgba(250, 252, 252, 0.5);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété "cursor" permet de définir quelle curseur va s'afficher au survol de l'élément. Il en existe énormément alors pour les consulter, je vous renverrais simplement à ce lien.
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: white; cursor: cell;"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
La propriété "transform" permet de modifier plusieurs choses.
Associée à la valeur "rotate", elle permet de faire pivoter l'élément.
Exemple :
- Code:
<div style="width: 200px; height:100Px; background: white; transform: rotate(5deg);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Associée à la valeur "skewX" et "skewY", elle permet de déformer l'élément, de le rendre oblique. Le "skewX" correspond à une déformation àl'horizontale , tandis que le "skewY" correspond à une déformation à la verticale.
Exemple pour SkewX:
- Code:
<div style="width: 200px; height:100Px; background:white; transform: skewX(15deg);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Exemple pour SkewY:
- Code:
<div style="width: 200px; height:100Px; background: white; transform: skewY(15deg);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Exemple pour les deux:
- Code:
<div style="width: 200px; height:100px; margin-left: 30px; background: white; transform: skewY(15deg) skewX(15deg);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Associée à la valeur "scale", elle permet de modifier les dimensions de l'élément (en gardant son ratio donc c'est pratique, notamment pour les images). La valeur de tout élément sans modification est de 1, les valeurs supérieurs agrandissent l'élément, les valeurs inférieurs le rétrécissent. Vous pouvez décider de ne pas garder le ratio et utiliser "scaleX" et "scaleY" pour agrandir/rétrécir l'horizontale ou la verticale.
Exemple d'agrandissement (1.3): (j'ai ajouté une marge à gauche sinon l'élément est coupé)
- Code:
<div style="width: 200px; height:100Px; background:white; margin-left: 60px; transform: scale(1.3);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Exemple de rétrécissement (0.3):
- Code:
<div style="width: 200px; height:100px; background: white; transform: scale(0.3);"> Je suis un bateau. </div>
Donne:
Je suis un bateau.
Du coup, un petit code à remplir, avec toutes les propriétés vues précédemment:
- Code:
.bloc {
width: px;
height: px;
background: ;
background: linear-gradient(direction , couleur1, couleur2 );
background: radial-gradient(forme at origine, couleur1, couleur2);
margin: px;
padding: px;
background-image: url('LIEN');
background-repeat: no-repeat;
background-position: ;
background-size: ;
background-attachment: ;
overflow: ;
opacity: 1;
transform: rotate(deg);
transform: skewY(deg) skewX(deg);
transform: scale(1);
cursor:;
}