Annonce

  •  » Utilisation
  •  » Coins arrondis sur tous browsers

#1 2006-03-13 21:29:59

pfrize
Membre
2006-03-09
73

Coins arrondis sur tous browsers

J'espère que ce sujet n'a pas été déjà traité. Il y a un moyen très simple d'arrondir les coins de n'importe quel cadre avec uniquement des tags HTML et du code CSS, compris par tous les browsers y compris IE :

1. Ajouter dans la feuille de style (en remplaçant la couleur #fff avec celle souhaitée) :

/* ROUNDED CORNERS */
b.rtop, b.rbottom{display:block; background:#fff;}
b.rtop b, b.rbottom b{display:block; height:1px; overflow:hidden; background:#fff;}
b.r1{margin:0 5px;}
b.r2{margin:0 3px;}
b.r3{margin:0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px; height:2px;}

2. Pour arrondir les coins du cadre "cadre" :

<div id="cadre">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<!-- contenu -->
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

3. Attention, les éléments ainsi stylés ne doivent pas recevoir de padding.

Philippe

Hors ligne

#2 2006-03-14 18:55:46

Gege
Membre
Ile de France
2006-03-10
68

Re: Coins arrondis sur tous browsers

Salut,
Effectivement, ça peut être trés interressant comme effet. Tu as un exemple à nous montrer. Ton script tu le mets dans quelle feuille de style?


Chaque fois que je vois le travail effectué par les utilisateurs de Webgallery devenu piwigo, je me dis que tout est possible !!! Vous êtes fantastiques !

Hors ligne

#3 2006-03-14 20:03:18

pfrize
Membre
2006-03-09
73

Re: Coins arrondis sur tous browsers

Comme tout code CSS, celui-ci peut se mettre dans n'importe quelle feuille de style existante, ou dans une nouvelle, ou même directement dans une page html entre deux tags <style> et </style>.

Si tu préfères ne pas modifier les feuilles existantes, crée une nouvelle feuille, par exemple coin.css, et ajoute dans la section <head> de header.tpl à la suite des déclarations
existantes :
<link rel="stylesheet" type="text/css" href="template/nom du template que tu utilises/coin.css">

Hors ligne

  •  » Utilisation
  •  » Coins arrondis sur tous browsers

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact