AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Liste de propriétés, entre célèbres et plus méconnues

    Partagez
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 9 Jan 2016 - 1:57



    Yop !

    Je vais essayer aujourd'hui de dresser un exemplier de toutes les propriétés liées à l'esthétique qui vous permettront donc de réaliser avec précision ce que vous avez en tête. En effet, beaucoup de balises restent peu connues. J'ai découvert il y'a seulement un mois que l'on pouvait mettre un dégradé sur un bloc. Mon tutoriel n'est pas exhaustif, il y'a surement d'autres propriétés que je ne connais pas. Vous pouvez tout à fait me les soumettre à la suite afin que je les ajoute ^^


    Menu des propriétés relatives:
    I. Au texte, à la police
    II. Au bloc
    III. A la bordure


    I. Propriétés de la police

    Prenons un exemple simple:  Je suis un bateau.
    Voici les propriétés permettant d'en modifier l'esthétisme. Je mets ici les balises qui sont aussi les plus connues dans un soucis d'exhaustivité.

    La propriété  "font-size" permet de régler la taille de la police. La valeur 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).
    Exemple :
    Code:
    <div style=" font-size: 20px;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "color" permet de définir la couleur du texte.Le plus souvent, elle 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/ ).
    Exemple :
    Code:
    <div style="color: blue;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "font-family" permet de changer la police d'un texte. La valeur (votre nom de police) se met entre guillemets simples. Vous pouvez trouver des polices originales sur le site google font, à installer sur l'ensemble de votre forum en copiant simplement après la balise head dans le template overall_header, ou dans votre message avant votre codage, le bout du code fourni sous cette forme:
    Code:
    <link href="https://fonts.googleapis.com/css?family=Griffy" rel="stylesheet">
    Vous pouvez ajouter un autre police "au cas où" après une virgule et sans guillemets. Imaginons pendant une panne du site "google font", celle ci sera alors remplacé par cette police (times imaginons) ou un style de police (serif, sans-serif, cursive, fantasy, monospace)
    Exemple :
    Code:
    <div style="font-family: 'Griffy', cursive; "> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "font-style" permet d'afficher le texte en italique en y associant la valeur "italic", en oblique avec la valeur "oblique" (mais il y'a peu de différence suivent les polices), ou en "normal".
    Exemple :
    Code:
    <div style="font-style: italic;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="font-style: oblique;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "font-weight" permet de définir l'épaisseur du texte, en y associant la valeur "bold" on met le texte en gras, "bolder" en plus gras encore, "normal" de façon normal et "lighter" en plus léger. (Attention avec certaines polices, cela n'a aucun effet). On peut aussi définir l'épaisseur de sa police en utilisant des nombres compris entre 100 (très fin, lighter) à 900 (très gras, bolder). La valeur "normal" est à 400.
    Exemple :
    Code:
    <div style="font-family: 'Open Sans'; font-weight: lighter;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="font-family: 'Open Sans'; font-weight: bold;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Avec les chiffres: (respectivement 300, 400, 600, 700, 900)
    Code:
    <div style="font-family: 'Open Sans'; font-weight: 300;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Je suis un bateau
    Je suis un bateau
    Je suis un bateau
    Je suis un bateau

    La propriété  " font-variant" permet d'afficher le texte en petites capitales en y associant la valeur "small-caps". Ou "normal" (je ne préciserais plus que normal vaut dire qu'elle prend sa valeur de base, sa valeur normale).
    Exemple :
    Code:
    <div style=" font-variant: small-caps; "> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "line-height" permet de gérer l'espace interligne. La valeur est exprimée en diverses unités de mesures mais les plus utilisées (et pratiques) sont le pixel (px), le pourcentage (%) et le numérique (exprimé en chiffre, se fonde sur la valeur de font-size, le 1 étant l'écart normal).
    Exemple :  
    Je suis un bateau.
    Je suis un beau bateau.
    Code:
    <div style="line-height: 10px; "> Je suis un bateau.
    Je suis un beau bateau.  </div>
    Donne:
    Je suis un bateau.
    Je suis un beau bateau.

    Code:
    <div style="line-height: 2; "> Je suis un bateau.
    Je suis un beau bateau.  </div>
    Donne:
    Je suis un bateau.
    Je suis un beau bateau.


    La propriété  "text-shadow:" permet d'ajouter des ombres au texte. La valeur associée s'écrit de la sorte: "décalage horizontal    décalage verticale    niveau de flou    couleur". Il peut y avoir deux ombres différentes (regardez le troisième exemple)
    Exemple :
    Code:
    <div style="text-shadow: 2px 2px 0px white;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="text-shadow: -2px -2px 2px grey;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="text-shadow: 2px 2px 0px orange, -1px -1px 0px blue;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  " letter-spacing" permet de régler l'espace entre les lettres. Généralement utilisée avec les pixels, on ne peut pas utiliser les pourcentages pour exprimer la valeur.
    Exemple :
    Code:
    <div style=" letter-spacing: 10px;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.



    La propriété  "text-align" permet de régler l'alignement horizontale du texte: à gauche (left), à droite (right), au centre (center) ou justifié (justify). Un texte justifié est un texte aligné à gauche et à droite, si bien que l'espace entre les mots s'adaptent afin que le texte ait cette forme de bloc, de carré. La propriété text-align déplace de manière général tout élément inline.
    Exemple :
    Code:
    <div style="text-align: center;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    Vous voulez aligner du texte verticalement dans un bloc? ( Cette propriété touche plus au bloc qu'à la police mais bon, je me suis dit que si vous cherchiez la solution, vous iriez davantage voir de ce côté-ci que dans le post qui suit. ) Il existe plusieurs solutions, je vais vous énumérer. La propriété  "vertical-align: middle" vous le permet mais seulement si vous convertissez votre élément en une cellule de tableau ("display:table-cell").
    Exemple :
    Code:
    <div style="width: 200px; height:100Px; background: white; display:table-cell; vertical-align: middle;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    La deuxième solution utilise plusieurs propriétés et valeurs! L'élément doit être en "position:absolute", avec un "top:50%", et un "transform: translateY(-50%)".
    Une troisième solution est l'utilisation de flexbox (ce que je recommende super-méga-fortement pour le positionnement, c'est une vraie révolution pratique !) Il faut utiliser deux blocs, le premier englobe le second, le premier est un parent, le second un enfant. On peut indiquer l'alignement sur l'enfant, en mettant le "display: flex" sur le parent et "margin-auto" sur l'enfant (et oui, c'est tout bête)
    Exemple :
    Code:
    <div style="width: 200px; height:100Px; background: white; display: flex;"><div style="margin:auto;"> Je suis un bateau. </div></div>
    Donne:
    Je suis un bateau.

    On peut également indiquer l'alignement sur le parent avec un "display: flex; ", "flex-direction: column" et un "justify-content: center".
    Exemple :
    Code:
    <div style="width: 200px; height:100Px; background: white; display: flex; flex-direction: column; justify-content: center;"><div style="color:darkgrey;"> Je suis un bateau. </div></div>
    Donne:
    Je suis un bateau.


    La propriété  " text-indent" permet de définir la longueur de l'espace avant la première ligne de texte dans un élément le contenant. La valeur 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). ( Ce qui suit ne fonctionne malheureusement pas sur la grande majorité des navigateurs mais cela pourrait changer à l'avenir alors je vous le mets tout de même). Elle peut aussi être associée avec la valeur "each-line" qui permet de définir cet espace pour la première ligne certes, mais plus encore, après chaque saut de ligne "forcé" (qui ne sont pas automatiques), sous la forme "text-indent: unité-de-longueur each-line;". Associée à la valeur "hanging", toutes les lignes auront cet espace SAUF la première. Vous pouvez aussi associer "hanging" et "each-line" ensemble.
    Exemple :
    Code:
    <div style="width: 200px; height:120Px; background: white; text-indent: 20px;">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.  </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.


    La propriété  " text-align-last" permet de définir la façon dont la dernière ligne du texte doit être alignée, ainsi que celles qui sont avant un saut de ligne forcé . Elle peut être associée à la valeur "left" (gauche), "right" (droite), "center" (centré) et "justify" (justifié).
    Exemple :
    Code:
    <div style="width: 200px; height:120Px; background: white; text-align-last: center;">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.  </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.


    La propriété  " word-spacing" permet de régler l'espace entre les mots. La valeur 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).
    Exemple :
    Code:
    <div style="word-spacing:15px; "> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "text-transform" permet de modifier ce qui attrait aux majuscules, minuscules. La valeur "capitalize" permet de mettre la première lettre du texte en majuscule, la valeur "uppercase" permet de mettre tout en majuscule, la valeur "lowercase"permet de mettre tout en minuscule, la valeur "none" produit un texte normal (valeur par défault).
    Exemple :
    Code:
    <div style="text-transform: uppercase;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "text-decoration" permet de modifier la décoration d'un mot (le soulignement par exemple). La valeur "underline" permet de le souligner, la valeur "overline" permet de le surligner, la valeur "line-through" de le barrer, la valeur "none" de ne pas le décorer (pratique pour enlever le soulignement des liens par exemple).
    Exemple :
    Code:
    <div style="text-decoration: overline;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Les autres:
    Je suis un bateau sous underline.

    Je suis un bateau sous line-through.



    La propriété  "font-stretch" permet d'afficher le texte de façon resserré avec les valeurs "semi-condensed, condensed", "extra-condensed" et "ultra-condensed" ou moins resserré avec "semi-expanded", "expanded", "extra-expanded" et "ultra-expanded".
    Exemple :
    Code:
    <div style="font-family:'Times New Roman';font-stretch:normal;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="font-family:'Times New Roman';font-stretch: ultra-condensed;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Code:
    <div style="font-family:'Times New Roman';font-stretch: ultra-expanded;"> 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:
    .police {
    font-size: ;
    color: ;
    font-family: '  ' ;
    font-style: ;
    font-weight: ;
    font-variant: ;
    line-height: ;
    text-shadow: décalage horizontal décalage verticale niveau de flou  couleur , décalage horizontal    décalage verticale    niveau de flou    couleur;
    letter-spacing: ;
    text-align: ;
    text-decoration: ;
    word-spacing; ;
    text-transform: ;
    font-stretch: ;
    font-size-adjust : ;
    text-indent: ;
    text-align-last: ;
    }  



    Dernière édition par Youp le Dim 5 Mar 2017 - 18:28, édité 28 fois



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 9 Jan 2016 - 1:57


    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.


    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.


    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.


    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.



    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:;
    }  



    Dernière édition par Youp le Dim 5 Mar 2017 - 18:30, édité 26 fois



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 9 Jan 2016 - 2:03

    III. Propriétés des bordures

    Prenons comme exemple de départ, comme "base":
    Code:
    <div style="width: 200px; height:100Px; background: white;"> Je suis un bateau. </div>
    Qui donne:
    Je suis un bateau.


    La propriété  " border" permet de gérer l'épaisseur, le style et la couleur d'une bordure. Elle s'écrit sous cette forme: "border: épaisseur   style   couleur;". Il existe différents style: dotted (pointillé), dashed (tirets), solid (normal), double (double), groove (rainurée), ridge (relief), inset (relief intérieur), outset (relief extérieur).
    Exemple:
    Code:
    <div style="width: 200px; height:100Px; background: white; border: 4px solid darkcyan;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    Exemple pour dotted:
    Je suis un bateau.

    Exemple pour dashed:
    Je suis un bateau.

    Exemple pour double:
    Je suis un bateau.

    Exemple pour groove:
    Je suis un bateau.

    Exemple pour ridge:
    Je suis un bateau.

    Exemple pour inset:
    Je suis un bateau.

    Exemple pour outset:
    Je suis un bateau.


    La propriété  " border-radius:" permet de faire des coins arrondis. Vous pouvez cibler un coin spécifique en utilisant une forme telle que cet exemple: "border-bottom-left-radius" mais également, écrire la valeur de tous les coins en une seule ligne (exemple 2) avec un ordre implicite qui est : haut-gauche , haut-droite, bas-gauche, bas-droite,.
    Exemple:
    Code:
    <div style="width: 200px; height:100Px; background: white; border-radius: 20px;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    Code:
    <div style="width: 200px; height:100px; background: white; border-radius: 10px 5px 20px 15px;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  " box-shadow:" permet de mettre une ombre (ou plusieurs d'ailleurs!) sur un bloc. Si vous y ajoutez un arrondi, l'ombre prend la forme de l'arrondi. La propriété s'écrit sous cette forme : "box-shadow: décalage horizontale    décalage verticale    niveau de flou     taille de l'ombre     couleur".
    Exemple:
    Code:
    <div style="width: 200px; height:100Px; margin-left: 20px; background: white; box-shadow: 2px 2px 3px 5px grey;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.

    En ajoutant la valeur "inset" à la fin, vous pouvez créer une ombre à l'intérieur du bloc.
    Code:
    <div style="width: 200px; height:100Px; margin-left: 20px; background: white; box-shadow: 2px 2px 3px 5px grey inset;"> Je suis un bateau. </div>
    Donne:
    Je suis un bateau.


    La propriété  "outline" permet de faire des "contours", elles diffèrent des bordures dans le sens où elle ne prennent pas d'espace et sont dessinés au dessus du contenu. La syntaxe des valeurs est "outline: couleur style épaisseur". Le style est le même que pour les bordures (voir plus haut)
    Exemple:
    Code:
    <div style="width: 200px; height:100Px; background: white; outline: dotted orange 3px; "> 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:
    .bordure {
    border: épaisseur style couleur;
    border-radius: px;
    box-shadow: décalage horizontale  décalage verticale  niveau de flou  taille de l'ombre  couleur;
    outline: couleur style épaisseur;
    }  


    Dernière édition par Youp le Jeu 30 Mar 2017 - 16:34, édité 11 fois



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Dim 10 Jan 2016 - 18:48

    J'ai fini ^^ Si vous avez des remarques, que vous remarquez des oublis, que ce sujet vous a aidé, n'hésitez pas à poster à la suite.


    Dernière édition par Youp le Lun 15 Fév 2016 - 20:22, édité 2 fois



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Ven 15 Jan 2016 - 13:14

    Coucou Youp ^^
    Alors, déjà et avant tout, merci pour ce long tuto! Cependant j'ai quelques petits soucis avec ce dernier.

    Tout d'abord, pour la plupart des fonctions que tu proposes, tu semble oublier (voir ne pas connaître tout simplement) certaines valeurs.
    Par exemple, pour font-style, tu ne propose que italic alors que oblique existe aussi. Sur certains navigateurs, les deux n'ont pratiquement aucune différence visuelle, mais ça reste tout de même une autre valeur possible. De même, pour font-weight tu ne proposes que bold, alors qu'il y a les numéros (de 100 à 900), mais aussi bolder, normal et lighter, qui permettent tous de faire quelque chose de concret. Évidemment, de nombreuses polices ne permettent pas l'utilisation de TOUS les niveaux de font-weight, mais pour ce genre de tuto, il reste utile et important de le préciser.
    Voilà une exemple de police qui utilise plusieurs niveaux de font-weight (Open Sans, qui a: 300, 400, 600, 700 et 800):

    Je suis un bateau
    Je suis un bateau
    Je suis un bateau
    Je suis un bateau
    Je suis un bateau
    Maintenant équivalent avec lighter, normal, bold et bolder:
    Je suis un bateau
    Je suis un bateau
    Je suis un bateau
    Je suis un bateau

    Bref, tu as raté plusieurs valeurs dans les propriétés, font-weight n'en est qu'un exemple, car en réalité, pour la plupart des propriétés que tu proposes, tu ne montres qu'un exemple, qu'une valeur, alors qu'il y a bien plus derrière chacune d'entre elles.

    Après, tu as aussi des choses qu'il ne faut pas faire dans ton exemple, comme par exemple dans font-family où tu ne mets pas les guillemets simple autour de impact. Donc tu devrais avoir: "font-family: 'Impact';"

    D'autres remarques serait de parler aussi des autres systèmes de mesures que les px dans tout ce qui est font-size, line-height, letter-spacing, etc, comme les pourcentages, les em ou les pt...
    Mon autre soucis est le côté aussi un peu doublon que cela fait avec certains points du cursus ou certains tutos, qui voient certes pas toutes ces propriétés ensemble, mais certaines d'entre elles en plus précidsemment avec des explications parfois plus précisers.

    Du coup mon plus grand soucis avec ce tuto, c'est qu'il est vraiment incomplet, et qu'en réalité, il y a des sites comme W3 qui expliquent bien mieux chaque propriété et leurs possibilités. Je dis pas qu'il est inutiles, parce que dans un sens ça permet aux gens de facilement voir quel genre de propriétés existent et de s'amuser avec, sans avoir à chercher et comprendre l'anglais (pour W3 par exemple). Mais dans l'état actuel, justement parce qu'il est incomplet, je ne peux pas le classer ^^"



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Ven 15 Jan 2016 - 17:44

    Hello Nyo ^^
    Tu as du lire mon tuto avant hier au soir puisque j'y avais justement ajouté les valeurs lighter et bolder que j'avais effectivement oublié (je n'y avais juste pas encore mis d'exemples). Les choses que tu soulignes ne viennent trèès souvent pas d'un oubli (je me suis super renseignée pour la création de ce tuto), mais d'une volonté "utilitaire" (puisque oblic avait peu de différence avec italique par exemple), une volonté de "c'est évident voyons" pour les valeurs de bases (tous les "normal" par exemple, tu as oublié un défault de mon tuto Razz), une volonté de "je ne veux pas faire trop complexe pour ne pas perdre le petit codeur en herbe" "qui n'utilisera sûrement pas ces valeurs" (qui m'a fait gentiment mettre de côté les valeurs font-weight en nombre et les autres systèmes de mesures pour les valeurs, les valeurs "inherit" aussi) . Mais j'en conviens: c'est débile tout plein Razz Un tuto comme ça doit tendre vers l'exhaustivité la plus absolue ! Du coup, je vais bien sûr modifier tout ça et le rendre le plus complet possible. C'est d'ailleurs ma volonté de le bonnifier (comme en témoigne le nombre d'édit qu'ils ont subis).

    Par contre, je pense qu'il a vraiment son utilité même si des passages de cursus ou de tutos parlent plus précisément de ces propriétés parce que, mise à part le fait que la relecture est la base de la mémorisation, surtout si deux choses sont expliquées de façon différente, c'est surtout parce que c'est un vrai condensé qui permet de retrouver rapidement ce que l'on cherche et d'en avoir un aperçu. En fait, j'ai eu l'idée de ce tuto parce que je me suis rendue compte que je tapais trop souvent sur mon ordinateur le nom des propriétés pour savoir l'ordre des valeurs ou leur écriture par exemple, et que si j'avais un condensé sous les yeux, je n'aurais plus à avoir mille onglets Razz. Oui ce tuto est un peu pour moi aussi héhé

    Voili voilou, je complète ça le plus vite possible  ^^



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Sam 16 Jan 2016 - 0:10

    Alors dis-moi quand c'est fait Wink



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 15 Fév 2016 - 4:32

    J'ai déjà bien modifié la première partie sur le texte ! Bon par contre, je n'ai cité que les unités de longueur les plus utilisées (en précisant qu'il en existait d'autre) parce que les autres ( tout ce qui est pt, pc, in, ex, em, rem) sont trop obscures pour moi et donc je pense, pour le commun des mortels. Le pouce est un peu désuet et sa visualisation est difficile, ex n'est pas fiable, on peut exprimer les em en pourcentage et on a moins mal à la tête en essayant de les comprendre Razz ). Je ne vois donc pas l'utilité de les préciser. Je me tâte sur le fait de préciser pour la valeur "inherit", je pense qu'il serait plus simple que je renvoie au tuto sur la parenté au début de mon tuto et que je cite simplement quand on peut utiliser inherit ou que je cite seulement les propriétés avec lesquelles on ne peut l'utiliser. J'ai rajouté quelques exemples de ci de là. Mvoili voilà, j'espère que c'est déjà plus complet.

    EDIT: j'ai modifié aussi la partie sur le bloc, j'ai rajouté des précisions et deux propriétés.

    Re-edit: je me fais une petite liste des propriétés à ajouter:
    I font-stretch, font-size-adjust, text-indent, text-align-last
    II. background-attachment , cursor, mettre autre technique d'alignement vertical
    III. outline


    Dernière édition par Youp le Lun 27 Fév 2017 - 10:13, édité 8 fois



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Lun 18 Avr 2016 - 7:51

    Hé!

    J'aime ♥

    Mais plus encore, je te suggère de rajouter ceci :
    Code:
    background-color: rgba('0, 0, 0, 0.5');
    Cela permet de mettre une opacité (avec le dernier chiffre) (les 3 premiers chiffrs étants ton code couleur sous forme rgb à la place de sous code hex) sur la couleur de ton background. Parce que c'est cool l'opacity, mais des fois, on veut que notre bloc soit à moitié transaparent sans que notre texte le soit aussi (parce que sinon il devient dur à lire).

    Et si tu rajoutes le visibility, autant rajouter aussi le display.



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 18 Avr 2016 - 19:51

    :OOO Trop cool, tu viens de m'apprendre quelque chose Razz J'avoue, c'est super pratique !
    C'est noté pour le display, je l'ajouterais Wink



    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Mer 11 Mai 2016 - 17:13

    Je viens de mettre l'icône en cours (je fais un petit point sur la section là). Je me trompe pas ? C'est pas fini, non ?



     
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Mer 11 Mai 2016 - 19:54

    Tu as bien fait ! J'ai encore quelques propriétés à ajouter ^^



    avatar
    Shaneliae
    FémininAge : 21Messages : 806

    le Sam 28 Mai 2016 - 12:12

    Coucou !

    Très bonne idée de tuto ^^ J'ajouterais des liens vers les différentes étapes de cursus où ces propriétés sont aussi abordées ! Et en lisant, j'ai vu que tu n'as pas précisé que text-shadow (et box-shadox aussi), peuvent avoir plusieurs ombres à la fois ! je ne connaissais pas non plus la taille de l'ombre, et est-ce qu'elle peut aussi s'appliquer sur text-shadow ou seulement sur box-shadow ?

    Tests pour moi-même :

    Test du bloc

    Test du texte


    PS : comme il me semblait, la taille de l'ombre ne fonctionne pas sur text-shadow :hum:



    Présence réduite.
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 28 Mai 2016 - 17:34

    Oh c'est super ça, je préciserais ! Pour text-shadow, je donne un exemple où il y'en a deux (mais du coup faut aussi que je précise)



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Dim 28 Aoû 2016 - 21:43

    Je passe en coup de vent pour dire que je n'oublie pas ce tuto et que je le finirais avant ma rentrée héhé
    Tchouuuuusss



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 20 Fév 2017 - 23:15

    Yo ! Je reprends le tuto et j'ai un petit problème. C'est moi où la propriété "font-stretch" ne fonctionne tout bonnement pas ?



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 871

    le Mar 21 Fév 2017 - 0:31

    Coucou !
    Je ne sais pas si ça peut t'aider mais voilà un lien de MDN sur la propriété :)
    https://developer.mozilla.org/fr/docs/Web/CSS/font-stretch



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Mar 21 Fév 2017 - 0:47

    J'ai utilisé ce lien justement mais sincèrement, vous voyez une différence dans les exemples que je donne ? J'ai essayé avec plusieurs polices, franchement je vois riiiieeeen haha. Mais en vrai, même sur l'exemple du site, je vois aucune différence ! Du coup, je la retire ?



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Mar 21 Fév 2017 - 9:16

    Coucou!

    Dit, je passais par là et j'ai une question , après vous pourrez effacer mon message sans soucis, mais il y a pas une erreur là:

    Code:
    width: 200px; height:100Px; background: transform: transform: scale(0.3);"

    Deux fois transform et un background vide? O_o

    Pour ce qui est du background, je le vois souvent vide en faite. ^^'



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Mar 21 Fév 2017 - 9:55

    Oulaaaaa méga boulette, étrange cette erreur ! Je modifie ça de suite ( le problème est sur toute la fin de la partie bloc mais c'est normal sur le début puisqu'associée à d'autres valeurs)



    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Mar 21 Fév 2017 - 10:04

    Ha ouf! Tu me rassures. ^^

    Sinon il y en a une ici aussi:

    Code:
    "width: 200px; height:100Px; background: transform: skewX(15deg);"

    Allez, je te laisse tranquille!

    Bisous!



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Mar 21 Fév 2017 - 10:17

    Hahaha je l'avais pas vu cette petite fourbe ! C'est modifié, merci en tout cas <3



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 27 Fév 2017 - 10:45

    J'ai ajouté des propriétés, mis quelques précisions. Du coup, tutoriel fini ! Mais bien sûr améliorable si j'ai oublié quelques propriétés, si vous avez des suggestions etc.



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 871

    le Lun 27 Fév 2017 - 18:39

    Coucou Youp !
    Alors j'ai noté deux trois trucs quant à ton tutoriel :)

    @Youp a écrit:La valeur (votre nom de police) se met entre guillemets simples.

    Ce n'est pas tout à fait exact, dans le sens où on n'est pas obligé de mettre une police entre ' ' quand elle est installée. De même, tu pourrais aller plus loin en expliquant le fait que si l'ont met une virgule, on peut "installer une police de secours". Imaginons que tu utilises la police d'un site comme Google Font, mais que celui-ci est temporairement indisponible. Il est possible que la police ne fonctionne plus sur la page web sur laquelle tu l'as utilisée. Si tu n'as pas mis de police de "rechange", la police qui sera affichée sera soit Time New Roman si tu n'as pas attribué de police de base sur tout ton site, soit la police que tu as attribuée pour tout le site ou la zone du code.
    Je ne sais pas si je suis claire :')

    @Youp a écrit:La propriété "text-align" permet de régler l'alignement horizontale du texte: à gauche (left), à droite (right), au centre (center) ou justifié (justify). Un texte justifié est un texte aligné à gauche et à droite, si bien que l'espace entre les mots s'adaptent afin que le texte ait cette forme de bloc, de carré.
    Tu peux aussi ajouter le fait que la propriété text-align déplace de manière général tout élément inline. Cela comprend donc les balises span, img, abbr, br, input, a, strong, em, etc.

    De plus, je ne crois pas l'avoir vue dans ton tutoriel, mais tu pourrais ajouter la propriété line-height qui permet de modifier l'espacement entre les lignes ^-^

    Voilà, je crois que c'est tout ce que j'ai pu voir pour le moment :3



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 27 Fév 2017 - 18:50

    Merci pour les précisions !

    Quand tu dis qu'on est pas obligée de mettre des guillemets simples si la police est installée, même une police dafont ? Dans mes souvenirs, je ne les mettais pas avant mais Nyo m'avait reprise en disant que ce n'était pas correct. Super idée pour la police de secours ! Je vais rajouter ça. Du coup, ça donnerait bien: font-family: bangers, arial; par exemple?

    Je vais rajouter aussi tes précisions pour la propriété text-align !

    Line-height est bien déjà dans mon tuto Razz



    Contenu sponsorisé


      La date/heure actuelle est Sam 19 Aoû 2017 - 0:07