• ACCUEIL
  • blogger

    Texte sur fond de couleur ou encadré


    Information: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...

    Le principe est simple
    C'est assez facile, mais il faut obligatoirement passer en mode html !

    exemple pour l'encadré bleu ci-dessus, le code est:

    <div style="background-color: #c5ddf6; border-radius: 5px; border: 2px solid#1c75c8; padding: 3px;">
    <strong>Information</strong>: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...</div>

    Voici 3 possibilités différentes pour créer un "CADRE"  ou "FOND" en couleur dans un article  ou une page de Blogger


    1-Notion de couleur en html
    2-Un simple fond de couleur  sur un bloc de texte
    3-Un cadre... à partir d'une cellule de tableau ! 
    4-De jolis cadres élaborés en HTML  avec du code  à ajuster...=> l'idéal
    5-Un cadre avec ascenseur "scrollbar"




    1-Préambule : notion de "couleur"
    Comment peut-on afficher des couleurs? Vous savez que derrière le "texte brut " de votre article se cache du "code HTML" et donc les couleurs correspondent à un code HTML !

    Formats de codes HTML : le code Hexadécimal

    Chaque code HTML contient le symbole "#" et 6 lettres ou chiffres. Ces numéros sont sous forme hexadécimale. Par exemple "FF" en hexadécimal représente le nombre 255 en décimal.
    On utilisera 
     le code Hexadécimal de couleur

    Signification des symboles :
    Les deux premiers du code couleur HTML représentent l’intensité de la couleur rouge. 00 est le minimum, est FF le plus intense. Les troisième et quatrième représentent l’intensité de vert, les cinquième et sixième celle de bleu. En combinant l’intensité de rouge, vert et bleu, on peut former n’importe quelle couleur


    Exemples :
    #FF0000 - Avec ce code HTML, nous demandons au navigateur d’afficher un maximum de rouge, et ni bleu ni vert. Le résultat est du rouge pur :     

    #00FF00 – Ce code HTML affiche du vert, sans bleu ni rouge. Le résultat est :     

    #0000FF - Ce code HTML affiche du bleu, sans rouge ni vert. Le résultat est :     

    #FFFF00 – Combinaison de rouge et vert donne du jaune :     

    #CCEEFF - Prenez un peu de rouge, un peu plus de vert et un maximum de bleu pour obtenir la couleur du ciel :     



    NOIR  #000000;    BLANC  #FFFFFF;


    Obtenir facilement une couleur ?
     Pour sélectionner un code  couleur,  divers sites vous proposent des solutions simples pour récupérer le code Hexadécimal de votre couleur (#suivi de 6 chiffres/lettres)

    => visitez ces sites et choisissez celui qui  vous convient le mieux pour récupérer un code couleur  #xxxxxx



    Autres formats :  nom web  & RGB


    Les navigateurs modernes supportent 140 couleurs nommées (on utilise un "nom" pour les qualifier), qui sont énumérés sur ce SITE 
    .

    Vous pouvez les utiliser dans votre code HTM par nom, code Hex ou de la valeur RGB
    :
     et vous avez déjà deviné...quelques noms:  white black red  pink tomato orange gold violet fuchsia magenta indigo green olive aqua turquoise blue chocolate snow

    Comment intervenir dans le code et utiliser les couleurs
    Dans le code, entre les balises <....>, dans les "modèles" ci-dessous,  on  modifiera  seulement la couleur soit en "nom" soit en "héxadécimal" ainsi:
    background-color: gold; 

    2-Changer la couleur de fond d'un bloc de texte

    Copier/coller ce code en modifiant  la couleur et texte (padding=> marge intérieure)


    <div style="background: #FCF550; padding: 10px;">
    Mon texte
    </div>


    pour obtenir

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



    le code classqiue html  devrait être :
    <p style="padding: 20px; background: #code couleur; ">
    Votre texte 
    </p>
    mais Blogger le modifie comme indiqué ci-dessus




    3- Un cadre dans un article à partir d'une cellule de tableau


    C'est assez simple, mais il faut passer en mode html !
    Voir également l'article consacré au tableau car, en fait, ici, nous allons créer un tableau composé d'une seule cellule.

    METHODE dans un article, dans un "gadget" texte ou HTML/Javascript, se mettre d'abord en "Mode HTML"

    Attention à bien distinguer 
    • Mode "code HTML" => Image de A
      par défaut la balise <br> s'affiche.
      Dans ce mode on ne peut que mettre du code et rien d'autre.
    • Mode texte "format RTF" => image de Bc'est le mode "visuel"  par défaut : vous voyez ce qui s'affichera.
    • Pour passer de l'un à l'autre 
      • en mode HTML : cliquer sur "Format RTF"pour passer en mode texte  
      • en mode texte: cliquer sur "Modifier code HTML" pour passer en mode Texte RTF

    A-en mode "HTML" : insérer le code ci-dessous
    C'est très simple si rien n'est encore rédigé...


    Si l'article a du contenu, ce sera plus difficile. Il faudra, par exemple, d'abord repérer l'endroit ou mettre le code en mode HTML en ayant auparavant  fait un repère dans le texte (avoir écrit en majuscule BLABLA par exemple)


    B-en mode "Rédiger" : modifier le contenu du cadre "blablabla"






    LE CODE HTML

    Il faut tout copier ce qui se situe entre les 2  -----
    • CODE pour un cadre basique (changer ensuite le  texte, ici colorié en rouge)
    ----------------------------------------------------------------------------
    <TABLE BORDER>
    <TR><TD>blablabla</TD></TR>
    </TABLE>
     -----------------------------------------------------------------------
    ce qui donnera

    blablabla

    • Améliorer les COULEURS il faudra ajouter ou modifier le code:

    BORDER=3                      => épaisseur de la bordure en pixels
    BORDERCOLOR="red">             => couleur de la bordure
    BGCOLOR="F9FFD9">              => couleur de fond

    => en fait, il s'avère que Blogger n'accepte pas le code (classique)  pour la couleur de la bordure  (bordercolor) qui reste "grise". Seule la couleur de fond est modifiable.
    Une couleur de bordure est toujours possible (voir ci-dessous) mais le code est complexe...


    ce qui donne :
    CODE pour un cadre amélioré
    (changer le  texte, et, aussi les valeurs du code,  ici colorié en rose)

    -----------------------------------------
    <TABLE BORDER=3  BORDERCOLOR="#003399"  BGCOLOR="F9FFD9">
    <TR><TD>blablabla</TD></TR>
    </TABLE>
    ----------------------------------
    blablabla




    4-D'autres cadres élaborés...

    Ci-dessous, il est possible de retrouver une multitude d'exemples de cadre, faciles à utiliser. Pour chacun des cadres présenté, il suffit de copier/coller le code joint (sousle cadre).
    Le plus difficile est donc de faire un choix parmi tous les cadres disponibles.
    Vous pouvez modifier le code HTML pour choisir d'autres dimensions, couleurs...[voir notre article  qui liste les codes couleur]
    Faire des essais

    A-PRINCIPE DE BASE 
    voici notre modèle de base
    Information: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...

    Le principe  est simple mais il faut obligatoirement passer en mode html !
    exemple pour l'encadré bleu ci-dessus, le code est:
    => attention ne copier que le texte html !

    <div style="background-color: #c5ddf6; border-radius: 5px; border: 2px solid#1c75c8; padding: 3px;">
    <strong>Information</strong>: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...</div>


    B-BASES pour MODIFICATIONS DU CODE

    1-largeurs en px (pixel)
    border: 2px => largeur bordure
    Remarque ; le code est parfois plus complexe mais on retrouve les idées principales comme  pourcette bordure  ajustée en épaisseur et couleur ou l'arrondi (radius)
    border: 2px solid #1c75c8; 
     border-radius: 5px;

    padding: 10px => largeur marge entre texte et bordure

    2-couleurs en code hexadécimal (#suivi de 6 chiffre/lettre)
    background-color: #c5ddf6;   => arrière plan

    3-pour définir une largeur précise au cadre, ajouter dans le code :
     width:300px;   => largeur  du cadre 

    4-Centrer le cadre
    margin: auto;  => centrage du cadre 

    C-DEMO DU CODE CI DESSUS modifié

    <div style="background-color: #f8ece0; border-radius: 5px; border: 2px solid #61380B; padding: 3px; width: 300px; margin: auto;">
    <strong>Information</strong>: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...</div>

    pour obtenir
    (couleurs arrière plan  et bordure  modifiées + ajout  d'une largeur fixe avec =>  width:300pi;  + centrage avec => margin: auto;)

    Information: En suivant ce tutoriel vous serez capable de réaliser un cadre similaire pour votre blog...


    D- DE NOMBREUX EXEMPLES
    présentation du cadre et en dessous le code html  à récupérer puis modifier

    Cadre d'information   avec contour gris ombré, fond blanc  et texte en bleu (modifiable via le code  =>color:blue)
    Le code :
    <blockquote style="border: 1px solid rgb(241, 241, 241); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; font-family: verdana ; font-size: 12px; line-height: 20px; margin: 10px; outline: 0px; padding: 10px; vertical-align: baseline;">
    <span style="color: blue;">votre texte</span></blockquote>


    Cadre d'information: Copier/coller le code présent ci-dessous
    <div style="border: 2px solid #1c75c8; padding: 3px; background-color: #c5ddf6; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;">
    <p>
    <strong>Cadre d'information</strong>: Copier/coller le code présent ci-dessous
    </p>
    </div>
    ?
    Cadre d'information: Ce cadre est idéal pour insérer un texte informatif que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
    <div style="padding:5px; background-color:#9ba0ee; border:2px solid #656ab0; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
    <div style="font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px; padding:3px;">?</div>

    <strong>Cadre d'information</strong>: Ce cadre est idéal pour insérer un texte informatif que les leclteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
    </div>
    !
    Cadre d'avertissement: Ce cadre est idéal pour insérer un texte d'avertissement que les lecteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
    <div style="padding:5px; background-color:#ffaca3; border:2px solid #ff3924; -moz-border-radius:9px; -khtml-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;">
    <div style="padding: 4px; font-size: 3em; float: left; width: 40px; text-align: center; margin-right: 5px; height: 20px;">!</div>

    <strong>Cadre d'avertissement</strong>: Ce cadre est idéal pour insérer un texte d'avertissement que les lecteurs repéreront facilement. Pour l'utiliser il suffit de copier/coller le code ci-dessous.
    </div>
    Cadre pointillés: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
    <div style="padding:3px; border:2px dotted #a5a5a5; background-color:#e3e3e3;">
    <strong>Cadre pointillés</strong>: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.
    </div>
    Cadre important: Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant "copier/coller".
    <div style="padding:3px; border:5px double #ff6b00; background-color:#ffdbc1;">
    <strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant "copier/coller".
    </div>
    Cadre de citation: Idéal pour citer les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et coller le code ci-dessous.
    <div style="padding:3px; padding-left:6px; border-left:4px solid #d0d0d0; background-color:#f1f1f1; margin-left:20px; font-style:italic;">
    <strong>Cadre de citation</strong>: Idéal pour citer les propos de quelqu'un dans un texte. Pour utiliser ce cadre il suffit de copier et coller le code ci-dessous.
    </div>
    Cadre de citation 2: Idéal pour citer les propos de quelqu'un dans un texte. En copiant-collant le code ci-dessous vous pourrez utiliser ce cadre sur votre site.
    <div style="padding:3px; padding-left:6px; border:1px dotted #d0d0d0; border-left:4px solid #d0d0d0; margin-left:20px; font-style:italic;">
    <strong>Cadre de citation 2</strong>: Idéal pour citer les propos de quelqu'un dans un texte. En copiant-collant le code ci-dessous vous pourrez utiliser ce cadre sur votre site.
    </div>
    Cadre tirets: Cadre idéal pour une information à découper, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...
    Pour reproduire ce cadre sur votre site web, il suffit de recopier le code HTML ci-dessous, tout simplement en le copiant/collant.
    <div style="padding:3px; border:2px dashed #c0c0c0;">
    <strong>Cadre tirets</strong>: Cadre idéal pour une information à <em>découper</em>, autrement dit des informations tel que les coupons de réduction, les bulletin à remplir ...<br />
    Pour reproduire ce cadre sur votre site web, il suffit de recopier le code HTML ci-dessous, tout simplement en le copiant/collant.
    </div>
    Cadre de contenu neutre: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.
    <div style="padding:4px; border:4px solid #e0e0e0;">
    <div style="padding:3px; background-color:#e0e0e0;">

    <strong>Cadre de contenu neutre</strong>: Ce cadre assez simpliste et discret peut être installer simplement en copiant/collant le code ci-dessous.
    </div>
    </div>
    Cadre cinéma: Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d'un film dedans. Pour ce servir de ce cadre, il suffit de se recopier ou de copier/coller le code présent juste en dessous.
    <div style="padding:3px; background-color:#888;">
    <div style="padding:4px; border-top:8px dotted #fff; border-bottom:8px dotted #fff;">

    <strong>Cadre cinéma</strong>: Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d'un film dedans. Pour ce servir de ce cadre, il suffit de se recopier ou de copier/coller le code présent juste en dessous.
    </div>
    </div>
    Cadre orignal: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c'est-à-dire le code e3e3e3).
    <div style="padding:3px; border-top:5px dashed #fff; border-bottom:5px dashed #fff; background-color:#e3e3e3;">
    <strong>Cadre orignal</strong>: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c'est-à-dire le code e3e3e3).
    </div>
    Cadre peu large: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présent après le "width". La valeur actuel est de 300 pixels.
    Pour utiliser le cadre, il faut recopier le code présent juste en dessous.
    <div style="padding:5px; width:300px; margin:auto; border:8px solid #67ab9f; background-color:#b3d8d2; -moz-border-radius:20px; -khtml-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;">
    <strong>Cadre peu large</strong>: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présent après le "width". La valeur actuel est de 300 pixels.<br />
    Pour utiliser le cadre, il faut recopier le code présent juste en dessous.
    </div>
    Cadre 1: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    <div style="padding:3px; border:4px inset #4cdc67; background-color:#4cdc67;">
    <strong>Cadre 1</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    </div>
    Cadre 2: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    <div style="padding:3px; border:4px outset #ee6388; background-color:#ee6388;">
    <strong>Cadre 2</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    </div>
    Cadre 3: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    <div style="padding:3px; border:8px ridge #d04cdc; background-color:#d04cdc;">
    <strong>Cadre 3</strong>: L'utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.
    </div>
























    SOURCE de tous les exemples ci-dessus partie3.

    Merci à l'auteur !

    5-Un  cadre avec ascenseur

    Un élément (texte, tableau, image,...) est trop large pour être affiché complètement dans un article :  créez un Zone avec  une barre de défilement horizontale (scrollbar) placée à la base de l’élément avec la propriété CSS overflow.


    Créer un ascenseur =Scrollbar de texte avec la balise scroll


    1-D'abord taper son texte "normalement", en édition basique, de choisir sa police, sa taille, sa couleur....
    2-Passer en mode HTML
    3-Avant votre texte, ajouter :
    <div style="height: 400px; width: 650px; overflow: auto; 1px solid;">et
    après votre texte :
    </div>

    4-Paramétrages
    • "Height" représente la hauteur de votre ascenseur.
    • "Width" représente la largeur de l'ascenseur
    • "1px solid "représente le cadre et son épaisseur
    • Autres valeurs de la propriété  overflow: auto;
      • visible : rend visible tout ce qui dépasse de l’élément et ne met pas de barre de défilement. Valeur par défaut.
      • hidden : cache tout ce qui dépasse de l’élément et ne met pas de barre de défilement (scrollbar).
      • scroll : met toujours une barre de défilement horizontale et verticale.
      • auto : met une barre de défilement horizontale ou verticale si besoin.
      • inherit : hérite de la propriété CSS overflow de son parent (CSS2).

    5-A savoir :
     votre ascenseur n'apparaîtra que si le texte à l'intérieur "dépasse" de la taille définie.