Vous êtes ici : Accueil > Tests sur les feuilles de style > Quatre bordures en design fluide
Design fluide avec quatre bordures
Exposé
La technique est très proche de celle présentée dans le topo sur la mise en place des coins arrondis que je vous conseille de lire dans un premier temps pour une meilleure compréhension.
Le point particulier c'est la taille des images et éventuellement leur poids.
Exemples
Je rajoute un petit essai amusant que j'ai fait et qui combine 4 coin arrondis, transparence complète sur l'extérieur des coins et transparence alpha sur l'ensemble du conteneur : test transparence... Oui, oui, promis, dès que je trouve 5 minutes je le rend compatible avec pépé IE6 :-))
[Ajout 24 aout 2007]
Nouveaux exemples
Une fois la technique de l'utilisation otpimale du html existant maitrisée, c'est avec un minimum d'intervention et de rajout dans ce html que l'on arrive cette fois à pouvoir gérer toutes les situations. Et notamment celle d'un contenu à hauteur non maitrisable et donc le risque d'images de tailles insuffisantes pour les bordures latérales.
Je profite également de cet ajout pour proposer un nouvel exemple de quatre bordure sur le seul html natif, cela préfigure le refonte de cette partie du travail sur les coins arrondis.
Quatre bordures sur html natif seul
Quatre bordures simples
L'arrondi comprend également un bordure qui est un simple trait que l'on va raccorder à la propriété border de css. Pour cela le heading de la section concernée (<h1>, <h2>, <h3>, etc...) sera doublé par un simple <span>
Quatre bordures complexes
Le cas le plus difficile puisqu'aussi bien les arrondis que l'intégralité des bordures sur les quatre cotés sont constitués d'images. Pour illustré cela je me suis servi d'une ombre portée. Cette fois en plus du doublage du heading, on effectue un doublage du dernier élément block du flux de la section, une fois encore par un simple <span>.