• Codage

    "le codage et moi, j'sais pas combien ça fait

    peut-être un, qui sait ? j'aime jouer avec, créer des trucs avec, etc... tout bidouiller voilà voilà, faîtes-moi confiance, je pense être calée, donc..."

  • il y a peu de temps, pendant que je préparais un des thèmes d'un blog, j'ai découvert une astuce plutôt sympa qui consiste à pouvoir ajouter plusieurs bordures sur un seul et même élément

    cette astuce peut servir afin de rajouter de la couleur au blog, de la structure mais je le recommande pas trop aux blogs ayant l'inverse, trop de couleur tue la couleur comme on dit alors je vais vous donner des codes, dont je suis sûre que vous connaissez déjà, mais avec quelques retouches à faire en plus ^^'

     

    ↓ Le code de base : ↓

     #selecteur  {

     border : VALEUR /*solid, double, dashed, dotted, etc...*/ TAILLEpx COULEUR;

     box-shadow : VALEURpx VALEURpx VALEURpx COULEUR;

     propriété : VALEUR;}

    // modifiez tout ce qui est en vert par les valeurs de propriétés qui correspondent pour que le code que vous voulez réaliser puisse fonctionner //

    —  #selecteur  → le remplacer par le nom du sélecteur correspondant : #header, #menu, #menu1(2), #content, #menubar, etc...

    —  border  : le style, la taille et la couleur de la première bordure // vous pouvez préciser s'il s'agit de la bordure du haut = border-top / bas = border-bottom / gauche = border-left / droite = border-right

    —  box-shadow  : les ombres du sélecteur // si elles sont bien utilisées, ce sont elles qui servent à faire plusieurs bordures

    ↓ Comment les utiliser ici ↓

     box-shadow : VALEUR1px VALEUR2px 0 COULEUR, /*vous pouvez répéter cette étape autant de fois que possible avec d'autres valeurs et d'autres couleurs en rajoutant une virgule à chaque fois*/;

    • VALEUR1 → l'ombre part vers la droite ou vers la gauche selon le nombre que vous avez mis ; valeur positive = ombre à droite / valeur négative = ombre à gauche

    • VALEUR2 → l'ombre part vers le bas ou vers le haut selon le nombre que vous avez mis ; valeur positive = ombre en bas / valeur négative = ombre en haut

    • 0 → c'est en quelque sorte l'adoucisseur d'ombre, qui va ajouter un flou à cette ombre, laissez la valeur à 0 et votre ombre se substitue à une bordure (c'est le petit détail qui change tout ^^)

    • COULEUR → de préférence une couleur ni trop vive ni trop pâle après vous faites comme vous voulez / camaïeu de couleurs allant avec les couleurs du blog

    // plus vous rajoutez d'ombres, plus il vous faudra mettre de grandes valeurs, puisque vous les superposez : -20px 0 0, -40px 0 0; par exemple //

    —  propriété  : vous pouvez en rajouter comme le fond de l'élément = background / sa taille = height / sa largeur = width / l'arrondi des bordures = border-radius // etc...

     

    Et puisqu'un exemple est toujours parlant, voici ce que j'ai fait avec l'header du blog...

     (ce qu'il y a en beige c'est le fond du blog)

     

    ↓ Code exemple : ↓

     #header  { width 625px;

     height 445px;

     margin-left 285px;

     margin-bottom 100px;

     border 10px solid #282828;

     box-shadow 20px 0 white-20px 0 white20px 20px 0 white-20px 20px 0 white20px -20px 0 white-20px -20px white;

     background url("quelque-part-dans-un-endroit-sans-nom")center no-repeat;}

    // ceci est le code exact que j'ai mis pour l'header, sauf que j'ai enlevé l'adresse de mon image, n'hésitez pas à tester ce code sur votre blog (test de préférence) en changeant les valeurs et en rajoutant davantage de propriétés //

    — tout ce qui est en  turquoise  sont les propriétés que j'ai ajouté en plus des deux propriétés " border " et " box-shadow "

    — tout ce qui est en vert sont les valeurs que j'ai changées

    — et les 0 en rouge sont volontairement laissés pour ne pas adoucir les ombres

     

     

    Voilà, ça faisait un moment que je n'avais pas publié de vrai article :) j'espère que cet article vous a été utile, qu'il vous a fait apprendre une nouvelle chose au moins et si jamais vous utilisez ce code, un petit merci fait toujours plaisir ...

    so tschüss !

    — Lazu'


    2 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique