Jeudi 1 Novembre 2007
Cadre extensible CSS II
Par Jacky, Jeudi 1 Novembre 2007 à 03:39 GMT+2 dans Astuces CSS
Pour obtenir ce résultat, créez 4 coins (jpg) avec la couleur de fond de votre page comme ceux-ci:
(Cliquez pour visionner)
Pour réaliser ces coins ouvrez Photofitre, créez une image de 35 x 35px avec votre couleur de fond; ensuite Sélection>Tout sélectionner>Changer la forme>Elipse. Remplissez-la avec une couleur de votre choix. Faites Ctrl+D pour arrêter la sélection; refaites 'Tout sélectionner', avec la souris positionnez-vous sur la sélection en partant de l'angle droite du bas, puis avancez vers le coin gaughe du haut afin d'obtenir un carré
de 15 x 15px.
Copiez et collez l'image, puis répétez l'opération en faisant cette fois-ci un clic-droit sur la sélection,
'Paramétrage manuel', 'Position automatique', cliquez sur 'Conserver les proportions',
puis cliquez dans les cases qui correspondent aux coins; à la fin, vous devrez avoir 4 images (coins).
Dans votre feuille de style, copiez ce code:
| .upperleft { width : 50%; margin-left:auto; margin-right:auto; background:#993366; background-image: url('image haut gauche'); background-repeat : no-repeat; background-position : top left; } .upperright{ background-image: url('image haut droite'); background-repeat : no-repeat; background-position : top right; } .lowerleft{ background-image: url('image bas gauche'); background-repeat : no-repeat; background-position : bottom left; } .lowerright{ background-image: url('image bas droite'); background-repeat : no-repeat; background-position : bottom right; padding : 3% 3% 3% 3%; } |
Puis dans votre article en mode HTML:
<div class="upperleft"><div class="upperright">
<div class="lowerleft"><div class="lowerright">
Votre texte</div></div></div></div>
Pour obtenir le cadre en hauteur, diminuez les % dans 'width' ou augmentez ceux-ci pour obtenir
le cadre en largeur.
