• 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/
     
     
    Partager via Gmail Yahoo! Google Bookmarks

    4 commentaires
//script feuille de style suppl