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 : 579

    le Sam 9 Jan 2016 - 1:57

    Rappel du premier message :



    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
    Nihil Scar Winspeare
    Messages : 4749

    le Lun 27 Fév 2017 - 18:54

    Coucou :hudada:

    Pour les guillemets, il me semble que Nyo en avait parlé là :hum:
    CSS - Les guillemets autour de la police

    * voilà voilà, Nihil la personne qui vient, ne lit pas le tuto, ne lit pas la discussion et jette juste un lien par terre *



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Lun 27 Fév 2017 - 18:55

    Ah j'ai pas dû voir pour line-height alors xD

    Bah pour les polices Dafont je sais pas, je pense que tu peux les mettre oui à la limite. 'fin perso Nihil m'a précisé que lorsque la police est déjà installée par un lien, ça sert à rien de mettre les ' ' :c
    Du coup je sais pas, fait comme tu le sens x)

    EDIT: oublie ce que j'ai dit sur les polices u.u



    avatar
    Nihil Scar Winspeare
    Messages : 4749

    le Lun 27 Fév 2017 - 19:06

    En fait c'est presque ça oui, il faut pas les mettre du tout pour sans-serif / serif / etc (il y a d'autres "noms" comme ça).
    Ces noms correspondent à l'instruction "Ok, prend la police par défaut qui est de type sans-serif / serif / ...". Si on mettait "" autour, par exemple : "sans-serif", le navigateur pourrait penser qu'on parle de la police qui s'appelle "sans-serif". Au lieu de mettre par défaut une police sans-serif installée sur l'ordinateur, il chercherait la police nommée comme ça ^^'
    Par exemple si je mets :
    Code:
    font-family: 'Shadows Into Light', cursive;
    Il va chercher 'Shadows Into Light' et s'il ne la trouve pas, il prendra la police de type cursive par défaut. En général sur windows, la cursive par défaut c'est Comic Sans MS ^^. Mais par exemple sur mon mac c'est "Apple Chancery" ^^



    avatar
    valtena_ethan
    MasculinAge : 26Messages : 413

    le Lun 27 Fév 2017 - 19:43

    Youp a écrit:
    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). 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é.

    En fait, le scroll, c'est celui de ta page, pas seulement du cadre ( sauf peut-être avec un position relatif, j'ai pas testé). Il faut voir ta page comme un page longue mais pas très large, dont tu ne verrais qu'une partie et pour voir le reste, ta page défile avec un scroll. Du coup, il est normal et intuitif (avec ce genre de raisonnement) de dire que la valeur scroll fasse suivre le background à l'élément et que la valeur fixe fixe le background sur la partie que tu vois car elle ne suit pas le scroll.

    Si je n'ai pas été assez claire, je te ferrais une explication vidéo avec du papier et tout et tout.



    avatar
    Youp
    FémininAge : 22Messages : 579

    le Lun 27 Fév 2017 - 22:24

    Merci pour ces éclaircissements sur la police ! Je rajouterais ces infos héhé

    Valtena, j'ai relu tes explications 4 fois mais je crois enfin comprendre héhé, par contre ça va être vachement difficile à reformuler. En groooos, si j'ai bien compris, le "scroll" suit le scroll de la page et donc ne scroll pas le background de l'élément mais la valeur fixed se fout du scroll de la page et donc défile parce que justement on scroll la page ! (Punaise c'est perdant)


    Dernière édition par Youp le Lun 27 Fév 2017 - 22:43, édité 1 fois



    avatar
    valtena_ethan
    MasculinAge : 26Messages : 413

    le Lun 27 Fév 2017 - 22:36

    Exactement. C'est plus simple a expliquer en mode maquette avec des feuilles.



    avatar
    Youp
    FémininAge : 22Messages : 579

    le Dim 5 Mar 2017 - 18:31

    J'ai modifié font-family, ajouté une petite précision dans text-align et background-attachement !

    Tutoriel fini ? :ggg1:



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Ven 10 Mar 2017 - 17:21

    Du coup je pense que c'est tout bon, je te déplace ça :love:



    Contenu sponsorisé


      La date/heure actuelle est Lun 23 Oct 2017 - 11:44