Aller au contenu


[Astuce] Backgrounds, Bordures Et Pavages


  • Vous ne pouvez pas répondre à ce sujet
No replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 27 avril 2012 - 08:40

Backgrounds, bordures et pavages

P182.gif



La question des pavages est un domaine passionnant des mathématiques, en tout cas tant qu'on n'est pas confronté aux démonstrations de ses résultats. :ga:

Et c'est aussi une source intéressante pour réaliser des fonds de pages, de blocs, etc, ainsi que des bordures assez décoratives.

Voilà un site qui propose ce que l'on cherche: http://www.tilingsearch.org/



Alors bien sûr, si vous n'êtes pas graphiste, vraiment graphiste, un bon conseil serait de rester prudent dans l'utilisation des pavages: il ne faut pas saturer, il ne faut pas canaliser le regard d'un internaute visiteur sur le fond de page, il ne faut pas que les décorations mangent le contenu, il ne faut pas provoquer d’écœurement par un jeu mal maitrisé des couleurs, bref, il faut rester prudent.


Mais une fois l'attention attirée sur ce point, on peut laisser libre cours à son imagination. Pavages simples ou complexes, couleurs déclinées ou tranchées, taille (ou zoom) sur les motifs, etc

Attention: le découpage de votre motif doit être parfait, mais c'est un jeu d'enfant à réaliser avec tout logiciel de retouche d'images.


Pour un fond, on utilise repeat (ou repeat-x, repeat-y selon ce qu'il faut réaliser) et le tour est joué.
Un lien sympa pour plus de créativité ou plus de facilité: http://www.quirksmod...background.html (attention toutefois au support de certaines valeurs).


Pour les bordures, on utilise la propriété border-image de CSS3.
Spécifications: http://www.css3.info...w/border-image/
Attention, cela est encore peu supporté au moment où j'écris: http://caniuse.com/#...ch=border-image
Un exemple d'utilisation: http://www.w3.org/TR...he-border-image


A nous d'être créatifs maintenant. :transpi:





0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)