• Jolies bordures - image

    Par Maximum 34 dans 8-Classiques CSS le 2 Mars 2015 à 14:00
         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.
     
    D'autres exemples dans les articles suivants ainsi que les sélecteurs en question:
    http://bleulezard.eklablog.com/theme-avec-border-image-croix-verte-a114931218
    http://bleulezard.eklablog.com/theme-briques-avec-border-image-a114933116
    http://bleulezard.eklablog.com/theme-mix-border-image-a114940258

    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
    Pipiou Profil de Pipiou
    Lundi 2 Mars 2015 à 15:19
    Pipiou

    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

     

    Répondre
    2
    Maximum 34 Profil de Maximum 34
    Mercredi 4 Mars 2015 à 16:16
    Maximum 34

    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..)

    Répondre
    3
    tchina30 Profil de tchina30
    Lundi 15 Mai 2017 à 12:22
    tchina30

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

    Répondre
    4
    lilablou Profil de lilablou
    Dimanche 18 Août 2019 à 17:14
    lilablou

    bonjour j 'ai essayé sa marche pas pour moi

    le code css me dit erreur donc je ne sais pas comment faire merci

    Répondre


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl