• Codes CSS

    Bonjour et bienvenue chez les Zirondelles

     

    J’ai bidouillé les codes qui suivent et que je  mets en partage car malgré mes recherches répétées je ne les ai trouvés nulle part ailleurs.

     

    Je ne prétends pas être la première à les avoir conçus, peut-être existent-ils déjà ailleurs, auquel cas ils m’auront échappé.

    C’est donc en toute bonne foi que je partage ces codes .

    Mon intention n’est pas de plagier les blogueurs spécialisés dans le domaine, je n’ai vraiment aucune aptitude pour cela. Ces codes étaient très simples à composer, j’ai juste usé d’un peu de logique.

    C’est uniquement dans un esprit de partage que je les publie

    J’espère qu' ils vous seront utiles.

    Merci de votre visite

     

  •  


     

    ______________________________________________________________

    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

     

    Clic pour vérifier

    12 commentaires
  • Bonjour

    J'ai bidouillé moi-même ce code pour la déco d'une amie,

    il fonctionne.

    Pour composer mes codes j'utilise le générateur gratuit de Papasti , un peu de logique et rien d'autre

     

     

    Exemple obtenu avec le code

    Mettre une bordure au bas du module de l'article

    Mettre une bordure au bas du module de l'article

    Le code :

     

    .module_bottom
     {
     background-image: url('url de l'image hébergée');height: 161px; background-repeat: no-repeat;
    border-left: 4px  groove #47d6b9; border-right: 4px ridge #47d6b9; border-bottom: 4px ridge #47d6b9; border-top: 0px ;
    border-radius: 0px 0px 100px 0px;}

     

    Vous pouvez modifier les valeurs en rouge à votre convenance

     

    si vous préferez une texture à une image, remplacez  no-repeat par repeat

    Height = hauteur  du bas de module

    Important :

    dans apparences/bas de module,

    pensez à mettre  la valeur 0 pour  la marge extérieure du haut

     

    J'espère que ce code vous sera utile, un petit merci de reconnaissance sera très apprécié si c'est le cas

    Merci de votre visite


    7 commentaires
  • A la demande d'Emile (Pochbe)

    Pour mettre une image png (transparente) trop lourde

    dans le cadre des articles

     le code ci-dessous :

     

     

    .module_contenu
    {
    background-image: url('url de l'image hébergée');
    background-repeat: repeat;
    }

     

     

    Merci de votre visite


    3 commentaires