• 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

     

  • Avec le générateur de codes gratuit de Papasti

     

     

    (Suite à une demande)

    Vous n'y connaissez pas grand chose aux codes et vous

     voulez juste  un sélecteur pour adapter un code déjà existant à vos besoins

    Rendez-vous ICI

    Puis suivre les indications suivantes

    Trouver facilement un sélecteur

    Trouver facilement un sélecteur

     

     

    Voilà,c'est bête comme chou ! merci Papasti !

    Internet regorge de sites  qui pourront aussi vous renseigner

    Mais moi c'est celui-là que je préfère parce que je le trouve mignon ! lol

    bonne chance à vous


    3 commentaires
  •  
     

    ______________________________________________________________

    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

     

     

     


    13 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