Help border-image (css3)

Help border-image (css3) - Web design - Graphisme

Marsh Posté le 09-02-2013 à 00:46:15    

Salut à vous,
 
 
 
Découvrant la propriété "border-image", qui me semble bien intéressante pour pas mal de raisons, (bien que ne fonctionnant pas sous IE :/ )
je suis en train de la tester, et rien à faire ma bordure d'image n'apparaît pas dans un navigateur de prévisualisation (firefox)
 
 
Un petit tuto pour ceux (celles) qui ne connaissent pas :
http://www.lafermeduweb.net/billet [...] -1076.html
 
 
 
Voici l'image qui doit être affectée à ces bordures, sur un élément #page :
 
http://nsa32.casimages.com/img/2013/02/09/130209123948395570.png
 
 
Donc l'idée n'est pas sorcière :  je veux récupérer sur 30 pixels les éléments dessinés latéralement.
Idem pour la ligne du haut, sur 15 px.
 
 
 
Voici mon code :  
   
CSS :  
 

Code :
  1. .imageBordurePage {   /* bordure de la #page */
  2. border-width: 15px 30px;
  3. -moz-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
  4. -webkit-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
  5. -o-border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
  6. border-image: url(../images/imageBordure02.png) 15 30 0 30 stretch;
  7.  }


 
Html :  
 

Code :
  1. <div id="page" class="imageBordurePage">


 
 
Je vois bien que l'élément  #page prend les attributs, en largeur, de cette bordure. Donc c'est correctement
écrit concernant la propriété.
 
Mais les bordures de l'image n'apparaissent pas.
 
 
J'ai 2 autres éléments sur ma page avec cette propriété "border-image", et j'ai même résultat : je vois bien de la bordure
du moins de l'espace-bordure qui s'est créé, mais pas d' images.  
 
-> J'ai appliqué sur un élément #piedepage cette propriété, là sur la bordure haute.
-> J'ai appliqué aussi sur mon #body cette propriété sur la bordure haute : là c'est pire car je n'ai pas cet espace "bordure" qui
se crée, contrairement à mes éléments #page et #piedepage.
 
 
 
Donc problèmes sur le chemin des images ?
 
Je l'ai réécrit 20 fois, dans toutes les possibilités (même si à priori ca me semble écrit correctement...)
 
 
Mon arborescence :  
 
--- mes fichiers html  
     |_ répertoire "css"
     |_ répertoire '"images"
 
 
 
 
Merci de votre help :o


Message édité par toum_toum le 09-02-2013 à 00:48:40

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 09-02-2013 à 00:46:15   

Reply

Marsh Posté le 10-02-2013 à 09:54:50    

Quand les exemples trouvés ne fonctionnent plus ça indique une modif de l'implémentation de la propriété, et effectivement -> http://dbaron.org/log/20120612-border-image
J'ai pas cherché plus mais ça devrait te mettre sur la piste :jap:

Reply

Marsh Posté le 10-02-2013 à 13:09:31    

Bonjour. Ca semble une très très bonne piste en effet...
 
Merci :jap:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed