• Faire un effet de halo

     

    Faire une aura autour d'un personnage et d'un texte.

    Tuto by Sosso1998

    7 commentaires
  • Vous pouvez appliquer une ombre portée à vos éléments block et vos éléments inline.

    box-shadow

    La propriété box-shadow s'applique sur un bloc, c'est à dire que la "boite" contenant l'élément ciblé aura une ombre.

    selecteur {
         box-shadow : Xpx Xpx Xpx Xpx #COLOR inset;
    }

    Décortiquons ceci :

    Le premier Xpx indique le décalage horizontal vers la gauche de l'ombre 
    Le deuxième Xpx indique le décalage vertical vers le bas
    Le troisième permet de gérer le flou.
    Le quatrième correspond à la taille de l'ombre.
    #COLOR indique bien évidemment la couleur de l'ombre
    inset est une valeur optionnel permettant de définir si l'ombre est externe ou interne

    boite_jaune {
         box-shadow: -4px 1px 2px -1px black;
    }

    .

    Dans l'exemple ci-dessus, j'ai appliqué une ombre portée à mon objet "boite_jaune".
    En appliquant une valeur négative pour le décalage horizontal, mon ombre se place à droite. Si vous voulez que l'ombre aille vers le haut, il faut appliquer une valeur négative au décalage vertical.

    boite_jaune {
         box-shadow: -4px 1px 2px -1px black inset;
    }

    .

    Même exemple, en rajoutant cette fois la valeur inset pour que l'ombre se trouve à l'intérieur de la boite. Vous remarquez que l'emplacement de mes ombres sont inversé par rapport à mon premier exemple, gardez cela en tête lorsque vous utilisez des ombres internes et des ombres externes.

    text-shadow

    La propriété text-shadow ressemble beaucoup à box-shadow

    selecteur {
         text-shadow : Xpx Xpx Xpx #COLOR;
    }

    Comme son nom l'indique, cette propriété s'adresse au texte. L'ombre portée suivra les contours des lettres.

    texte_ombre {
         box-shadow: -1px -1px 0px black;
    }

    Du texte avec une ombre

    Cette propriété est très utile pour donner un effet de relief à vos textes.

    Ombres multiples

    Vous pouvez appliquer plusieurs ombres à un élément. Il suffit simplement de les séparer par des virgules :

    selecteur {
         box-shadow : Xpx Xpx Xpx #COLOR, Xpx Xpx Xpx #COLOR;
    }


    178 commentaires
  • Images

    Tuto de signature n°1  Tuto de signature n°1 
    Texture

                  





    Tuto by Nagalia

    36 commentaires


  • Article

    .module_contenu {propriété: valeur;}

    Article titre

    .module_titre {propriété: valeur;}

    Article bas

    #module_bottom {propriété: valeur;}

    Barre d'outil >>Article détaillé<<

    #menubar {propriété: valeur;}

    Commentaire

    .comment_normal {propriété: valeur;}

    Commentaire auteur

    .comment_admin {propriété: valeur;}

    Commentaire avatar

    .commentavatar {propriété: valeur;}

    Dernier Visiteur

    .module_menu_type_lastvisitors {propriété: valeur;}

    Fond de fenêtre

    #body {propriété: valeur;}

    Fenêtre d'information >>Article détaillé<<

    .window {propriété: valeur;}

    Fond de page

    #background {propriété: valeur;}

    Forum Liste

    #module_contenu_pageforums {propriété: valeur;}

    Header

    #header {propriété: valeur;}

    Menu contenu

    module_menu_contenu_block {propriété: valeur;}

    Menu gauche

    #menu1 {propriété: valeur;}

    Menu droit

    #menu2 {propriété: valeur;}

    Menu titre

    .module_menu_titre {propriété: valeur;}

    Menu de l'en tête

    #menu {propriété: valeur;}

    Pied de page

    #footer {propriété: valeur;}

    209 commentaires