• Code CSS pour mettre des bordures scintillantes

     
     

    ______________________________________________________________

    Une version de ce code circule déjà mais elle ne fonctionne pas

    avec tous les gifs

    Je remercie MARJOLAINE qui s'est bien creusé la tête

    pour mettre au point un  code qui fonctionne à tous les coups,

    de me permettre de le publier afin que vous puissiez  en profiter vous aussi.

     

    Code pour le cadre des articles :

     

      /*bordure scintillante*/
     .module_contenu
     
     {border-image-source: url(http://img4.hostingpics.net/pics/543893gold1.gif); border-image-slice: 10; border-image-width:5px; border-image-repeat: round; padding: 5px;}

     

    Les valeurs en rouge peuvent être modifiées

    border-image-slice  :

    correspond à la vitesse de l'animation gif

    border-image-width:

    correspond à la largeur de la bordure

     padding :

    correspond aux marges intérieures (espace entre l'article et la bordure)

     Le code peut s'adapter aux autres cadres du blog, par exemple ,

    Cadre des modules du  menu :

     

      /*bordure scintillante*/

     .module_menu_contenu

       {border-image-source: url(http://img4.hostingpics.net/pics/543893gold1.gif); border-image-slice: 5; border-image-width:3px; border-image-repeat: round; padding: 10px;}

     

    Cadre du Menu gauche :

     

    /*bordure scintillante*/

    #menu1

     {border-image-source: url(http://img4.hostingpics.net/pics/543893gold1.gif); border-image-slice: 5; border-image-width:3px; border-image-repeat: round; padding: 10px;}

     

    Menu  droit :

     

    /*bordure scintillante*/

    #menu2

     {border-image-source: url(http://img4.hostingpics.net/pics/543893gold1.gif); border-image-slice: 5; border-image-width:3px; border-image-repeat: round; padding: 10px;}

     

    etc....

    Bonne chance !

    Merci de votre visite

     

    Rajout Info :

    Dalila (la gentille Rebelle) a  depuis la publication de cet article mis à notre disposition son code personnel dont elle se sert depuis longtemps pour agrémenter la déco de ses amis.

    Il est plus complet  car on peut y ajouter un arrondi.

    Je  laisse quand même cet article car le code de Marjolaine peut être combiné avec celui-ci

    http://leszirondelles.eklablog.com/code-css-pour-doubler-le-cadre-des-articles-a126435502

     exemple

    Code CSS pour mettre des  bordures scintillantes

    Voici le lien du code  de Dalila que je remercie pour son travail

     

     

      http://la-gentille-rebelle4.eklablog.com/mettre-une-texture-or-argent-glitter-autour-des-billets-du-blog-a128870884

     

     

     

    « Grandes textures "shabby""Clusters printemps colombe et lapinous »

  • Commentaires

    13
    Lundi 18 Juin à 11:09

    Tu vois les cordonniers sont toujours les plus mal chaussés lol!

    J'avais perdu mes codes , heureusement tu es mon sauveur

     mille bisous

    Marjolaine

    12
    Lundi 8 Mai 2017 à 21:47

    Maintenant, je n'arrive plus à mettre un encadrement scintillant sur le contenu

    je vais réessayé à tête reposée, merci pour ton aide, bisous

    11
    Dimanche 7 Mai 2017 à 23:04

    Coucou ma belle, ça fonctionne très bien, mais j'ai essayé de mettre un border radius et ça ne fonctionne pas, tu crois que ça peut se faire?

    Merci beaucoup pour ce partage, bisous

      • Lundi 8 Mai 2017 à 05:19

        Oui Angel c'est possible mais pas avec ce code

        J'ai rajouté l'info en fin d'article

        Très bonne journée

        bzz

         

    10
    Vendredi 28 Avril 2017 à 10:44

    Un petit coucou

     avant l'arrivée de mes invités

     je serai plus dispo demain.

    Hier j'ai  galéré, car je voulais mettre une signature au bas de ms coms

     mais comme on avait un css pour le fond

     pas moyen de passer par  com auteur et mettre l'image,

    elle ne voulait pas apparaitre,

    j'ai bidouillé le css et trouvé, mais ça y est ça fonctionne,

    on voit mes zozios et il se placent bien en bas!

     si le code t’intéresse je te l'envoie et tu pourras le partager,

    je n'envisage pas de mettre une rubrique sur mon blog.

    Bonne et belle journée à toi

     un  bisou

    Marjolaine

    9
    Lundi 24 Avril 2017 à 17:23

    merci pour les infos tres interressant ton blog je reviendrais

    8
    Samedi 1er Avril 2017 à 20:10

    Tres contente de tomber sur kelkin ki bidouille les codes sans les voler dans le code source

    Avec mes codes ki sont différents des tiennes j'obtiens aussi le même résultat

    J'ai configuré certains blogs amies avec ! dont certains de mes blogs mais je n'ai pas encore partagé en article car apres tous les blogs se ressemberont de par les configurations, enfin je crois lol

    toute façon, à partir du moment kon connait les noms de sélecteur , on bidouille kome on veut....

    je ne connaissais pas

    border-image-slice

    et

     border-image-repeat: round;

    le round , y fait koi kome fonction????

    par contre je n'emploie pas de générateur , je fais au visuel sur mon blog test

    j'emploi aussi le

    border-image ou le background-image

    mais avec le 1e on ne peut pas rajouter un border-radius alors qu'avec le second oui 

    Sur ce , je te laisse bidouiller lol

    Ton blog est tres joli  et je te souhaite bonne continuation

      • Dimanche 2 Avril 2017 à 09:43

        Merci , grace à toi j'ai sorti un billet et comme je sais pas si t'as abonné à la new de ce blog

        http://la-gentille-rebelle4.eklablog.com/mettre-une-texture-or-argent-glitter-autour-des-billets-du-blog-a128870884

        D'autres suivront lol

        Salutations aussi à Marjolaine ke j'irai visiter plus tard !!!! c'est pas le tout , mais ya ménage à faire lol

      • Samedi 1er Avril 2017 à 23:15

        Merci Dalila pour ton passage chez moi.

        tout d'abord je précise bien que je ne suis pas l'auteur de ce code un peu trop élaboré pour  mon petit cerveau ! lol

        C'est MARJOLAINE qu'il faut remercier.

        En ce qui concerne le "Round", j'ai pu constater quand j'ai fait les essais que l'animation se comporte différemment si on l'enlève :

        au lieu de scintiller sur elle-même ( en rond donc) elle circule autour du cadre ce qui peut aussi être intéressant  selon le gif qu'on utilise.

        Merci pour tes encouragements,

        très bonne soirée (ou journée...)

         

    7
    Vendredi 24 Mars 2017 à 07:48

    Super le partage il n'y a que ça de vrai selon moi!

     Bravo Corinne ça rend bien!

     Je suis allée voir

     bisou ma petite Agnés

    Marjolaine

    6
    Jeudi 23 Mars 2017 à 11:39

    coucou ma choupinette

    une matinée a donner le cafard 

    mais a présent un peu de soleil 

    je vais te faire un mp car ,nouvelle pour mes dents 

    je suis dégoutée 

    tantot je vais me coucher ,j'ai besoin de ma calmer 

    et par chez toi quel temps fait -il ? 

    au moins mes petits oiseaux 

    me font plaisir 

    les becs remplit de branches 

    c'est trop beau a voir 

    bon aprés midi 

    gros gros bisous mireille

    5
    Mercredi 22 Mars 2017 à 10:22

    Re happy

    J'ai mis en place , c'est joli comme tout .

    Merci 

    Bisous

    4
    Mercredi 22 Mars 2017 à 09:59

    Bonjour Agnès 

    Je vais tester , merci à toi et Marjolaine .

    Je ne reçois plus ta news bizarre frown !

    Je ne te vois plus cry .

    Je te souhaite une très bonne journée.

    Gros bisous



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :