Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1354 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Help border-image (css3)

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Help border-image (css3)

n°1152875
toum_toum
Vivons masqués
Posté le 09-02-2013 à 00:46:15  profilanswer
 

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
mood
Publicité
Posté le 09-02-2013 à 00:46:15  profilanswer
 

n°1152904
Skopos
Posté le 10-02-2013 à 09:54:50  profilanswer
 

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:

n°1152910
toum_toum
Vivons masqués
Posté le 10-02-2013 à 13:09:31  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Help border-image (css3)

 

Sujets relatifs
Aide pour améliorer une imagePlease Help! pour 2 fonts à trouver.
[HELP] Utilité des cartes graphiques pour CAO / DAO[HELP] Est-ce que l'overclocking est utile en DAO???
Utilisation d'une image de Vasarelyimage 3d
"plongeon" sur une imageImpression image mesurée
Help réalisation logoAjoutez/incruster une image sur une image [voiture]
Plus de sujets relatifs à : Help border-image (css3)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR