• Jolies bordures - image

         Article mis à jour 07/03/2015

     

     Des cadres qui s'adaptent aux dimensions de vos articles, boutons ou titres de menu, modules...

    Avec la propirété CSS border-image:

    Une image:

    Jolies bordures - image

     http://ekladata.com/LZLzncIRri5Im8iPaR2k8zyRkUY.png

     

     

     

    Du CSS :

    border-style: solid;
    border-width: 52px 43px 42px 48px;
    -moz-border-image: url(http://ekladata.com/LZLzncIRri5Im8iPaR2k8zyRkUY.png) 52 43 42 48 round;
    -webkit-border-image: url(http://ekladata.com/LZLzncIRri5Im8iPaR2k8zyRkUY.png) 52 43 42 48 round;
    -o-border-image: url(http://ekladata.com/LZLzncIRri5Im8iPaR2k8zyRkUY.png) 52 43 42 48 round;
    border-image: url(http://ekladata.com/LZLzncIRri5Im8iPaR2k8zyRkUY.png) 52 43 42 48 round;
     
    Et en fonction de l'élément à encadrer, la bordure s'adaptera aux dimensions du contenu.
    Exemple ici sur le contenu de l'article.
     
    Les codes CSS fournis ici ont été générés sur
    http://border-image.com/
     
     
    « Diapo 9 images défilement click numéro sans javascriptThème avec border-image Croix verte »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 2 Mars 2015 à 15:19

    Coucou,

    je sais pas si mon p'tit mot sera à la hauteur de ton excellente trouvaille :  bravo !

    Je compte bien venir fouiller sérieusement pour agrémenter mes pages, j'te tiendrai au courant :-)

    Merci beaucoup pour tes tests, et merci aussi de nous offrir tout ça !

    (j'espère) à très vite

     

    2
    Mercredi 4 Mars 2015 à 16:16

    Bonjour Pipiou, 

    Oui, c'est une propriété intéressante; avec une même image, on peut encadrer les boutons du menu en tête, les titres des modules, les articles..enfin... des contenus aux dimensions variées et variables..

    Merci de ta visite et A bientôt (j'espère ...je vais compléter cet article avec d'autres exemples et explications..je le re-notifierai p.e..)

    3
    Lundi 15 Mai à 12:22

    je viens de visiter votre blog yes merci pour tout je vais y revenir pour pouvoir travailler avec



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl