Comment créer des bordures d'image répétitives dans CSS3 - mannequins

L'une des utilisations les plus courantes des images répétitives dans CSS3 consiste à créer des bordures composées d'images. Malheureusement, cette technique ne fonctionne pas bien avec Internet Explorer 9. Elle fonctionne cependant avec toutes les nouvelles versions de Chrome, Firefox et Internet Explorer 10. La procédure suivante prend l'exemple SimpleGraphics créé précédemment et ajoute une bordure à empreinte à lui.

1. Ouvrez le SimpleGraphics. Fichier HTML

   Vous devez modifier la page pour qu'il y ait un nouveau pour maintenir la marge, qui ne fait pas partie de l'image. Si vous essayez de joindre les graphiques de marge au conteneur d'image existant, les graphiques apparaîtront centrés sur la marge du conteneur d'image, plutôt que comme des images complètes.

2. Ajouter un nouveau à la page comme indiqué ici.

   
   Une photo d'un chat mignon!
   
   
   
   
   
   
   
   

3. Modifiez le tag afin qu'il ressemble à ceci:

4. Enregistrez le fichier HTML en tant que BorderGraphics. HTML

5. Ouvrez le SimpleGraphics. Fichier CSS.

   Vous devez modifier les styles pour qu'ils fonctionnent avec les nouveaux conteneurs trouvés dans le fichier HTML. Pensez à la frontière étant une boîte qui entoure une boîte contenant l'image et la légende. Ce que vous obtenez à la place d'une seule boîte d'image est une boîte dans une boîte.

6. Ajoutez un nouveau style #BorderContainer comme celui montré ici.

   #BorderContainer {border-style: solide; border-width: 20px; border-image: url (PawPrint.gif) 25 22 23 remplir le tour; rembourrage: 24px; float: à gauche; position: absolue; hauteur: 465px; largeur: 440px; gauche: 50%; margin-left: -244px;}
   

   La plupart de ces propriétés sont les mêmes que celles utilisées à l'origine pour le style #ImageContainer. BorderContainer est maintenant le conteneur externe, donc vous le positionnez plutôt que le ImageContainer. Il y a quelques changements dans les mesures pour s'adapter à la taille de la frontière.

   Le plus gros changement est l'ajout de la propriété border-image. Vous fournissez l'URL de l'image que vous souhaitez utiliser, ainsi que le décalage vers l'intérieur de l'image de bordure, la largeur de l'image et le début de l'image.

   La valeur de remplissage indique au navigateur de remplir les copies de l'image et la valeur ronde indique au navigateur de redimensionner l'image de sorte qu'un nombre pair d'images remplisse le.

   Déterminer les nombres pour une image de bordure peut être difficile et prendre beaucoup de temps. Heureusement, vous pouvez utiliser le générateur d'image de frontière pour faire le travail pour vous. Fournissez simplement l'emplacement de l'image de bordure que vous souhaitez utiliser, puis utilisez les curseurs pour déterminer les valeurs optimales pour placer cette image autour d'un. Vous pouvez copier les résultats directement de la page dans votre application.

7. Modifiez le style #ImageContainer afin qu'il reflète son nouveau rôle en tant que conteneur interne.

   #ImageContainer {margin: 20px; hauteur: 420px; largeur: 400px; background-color: White;}
   

8. Enregistrez le fichier CSS en tant que BorderGraphics. CSS.

9. Chargez la page BorderGraphics.

   Vous voyez la page. Notez que les graphiques de bordure entourent à la fois l'image et sa légende.