Banniére arrondien en HTML
Résolu/Fermé
Roxane 59
Messages postés
455
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
5 novembre 2008
-
28 oct. 2007 à 01:11
gronobo - 16 janv. 2011 à 18:49
gronobo - 16 janv. 2011 à 18:49
A voir également:
- Banniére arrondien en HTML
- Editeur html - Télécharger - HTML
- Bannière instagram - Guide
- &Nbsp html ✓ - Forum Webmastering
- [HTML] - á et les autres - Forum HTML
- Espace en html ✓ - Forum HTML
6 réponses
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
28 oct. 2007 à 01:50
28 oct. 2007 à 01:50
salut,
pour faire des coins arrondis en css il faut encore passer par le bitmap.
• soit ton conteneur est d'une taille fixe et raisonnable : tu dessines le cadre en entier et tu l'incorpores en image d'arrière plan de ta balise ;
• soit ton conteneur a une taille variable ou trop importante : tu ne gardes que le haut et le bas ou que les quatre coins de ton image et tu les incorpores avec plusieurs balises emboitées.
un article complet chez AlsaCréationS
pour faire des coins arrondis en css il faut encore passer par le bitmap.
• soit ton conteneur est d'une taille fixe et raisonnable : tu dessines le cadre en entier et tu l'incorpores en image d'arrière plan de ta balise ;
• soit ton conteneur a une taille variable ou trop importante : tu ne gardes que le haut et le bas ou que les quatre coins de ton image et tu les incorpores avec plusieurs balises emboitées.
un article complet chez AlsaCréationS
<div style="text-align:center;"><a href="https://www.aweber.com/"><img src="http://www.aweber.com/images/heart1a.gif?101715" alt="I Heart AWeber.com" style="border:none;" /></a><p><a href="http://www.aweber.com/i-heart-aweber.htm?101715">Do you heart AWeber, too?</a></p></div>
Un petit tuto bien sympa pour réaliser des bloc de taille variable avec des bords arrondis sans CSS3 : http://gronoblog.blogspot.com/2010/12/bloc-de-taille-variable-en-css.html
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
16 janv. 2011 à 13:53
16 janv. 2011 à 13:53
ah oui, une méthode avec une jolie <table> !
c'est original et assez actuel, je crois que la recommandation W3C qui incite à ne plus utiliser de tableau pour la mise en forme date de 1999...
et oui, pour contourner l'utilisation de CSS 3, tu nous proposes un bon en arrière de plus de dix ans...
fais gaffe, l'informatique ça avance !
;o)
c'est original et assez actuel, je crois que la recommandation W3C qui incite à ne plus utiliser de tableau pour la mise en forme date de 1999...
et oui, pour contourner l'utilisation de CSS 3, tu nous proposes un bon en arrière de plus de dix ans...
fais gaffe, l'informatique ça avance !
;o)
En effet il est aussi possible d'utiliser les <div> mais il y a une raison bien particulière de "feinter" en utilisant une table. La raison est que lorsque tu veux changer la taille de ton bloc avec une animation, avec une table tu n'a que la case centrale à animer. 3 tween avec la méthode des <div>, ce qui n'est pas négligeable pour les device type ipad, ou android. Google utilise cette technique pour ses widget animable dans gwt. Donc bon, pose la question la prochaine fois avant de prendre les gens pour des newbie ;)
Roxane 59
Messages postés
455
Date d'inscription
jeudi 23 août 2007
Statut
Membre
Dernière intervention
5 novembre 2008
19
28 oct. 2007 à 02:00
28 oct. 2007 à 02:00
re,
Merci Dalida c'est justement ce que je cherchais. A plus et encore merci.
Merci Dalida c'est justement ce que je cherchais. A plus et encore merci.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut
"Nifty Corners" => "Rounded corners without images" ou "Coins arrondies sans images" :
http://www.html.it/articoli/nifty/nifty1.html
Source ; "Webmaster Hub > Bouton arrondi en utilisant css" :
http://www.webmaster-hub.com/lofiversion/index.php/t28041.html
# Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
***************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
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}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
***************
En plus ; sujet ci-dessus ; "Coins arrondis en CSS" :
http://www.svay.com/coins_arrondis/coins_arrondis.html
"Pour obtenir cet effet, j'utilise 4 boites <DIV> imbriquées. Chacune affiche un coin en image de fond. Pour éviter d'utiliser trop de balises (ajout de conteneurs), j'utilise la balise de plus haut niveau pour définir la taille de la boite et celle de plus bas niveau pour définir les marges intérieures."
En plus ; sujet ci-dessus ; formulaire ; "Generate HTML/CSS code and images for rounded corners." :
http://www.roundedcornr.com/ <<== Formulaire !!
# Copyright © 2007, RoundedCornr.com. All rights reserved.
"RoundedCornr permet de créer des boîtes dotées d'arrondis. Le générateur crée lui même les images pour les arrondis et fournit le code nécessaire pour les utiliser et donc créer votre boîte arrondie en toute simplicité. Divers outils vous permettent de créer des boîtes simples, avec dégradé ou avec bordure. Les images sont au format .png uniquement."
Source du texte ; "Dragon Picture - Archive" ; "Le Effets graphiques online - lundi 09 juillet 2007 à 11:27" :
http://dragonpic.net/index.php?selected=archive&mois=juillet&annee=2007
Source du lien :
http://www.webstorming.fr/?roundedcornr-generateur-de-boites-avec-coins-arrondis-en-html-css
En plus ; sujet ci-dessus ; "Des bords arrondis en CSS en attendant le CSS 3" :
http://www.jarodxxx.com/?post%2F2007%2F05%2F09%2FDes-bords-arrondis-en-CSS-en-attendant-le-CSS-3
Spiffy Box => Cliquez ici pour aller sur le site => https://www.afternic.com/forsale/spiffybox.com?utm_source=TDFS_DASLNC&utm_medium=DASLNC&utm_campaign=TDFS_DASLNC&traffic_type=TDFS_DASLNC&traffic_id=daslnc& <<== Formulaire !!
"stylable box" ; "Resizable box with freely stylable corners and surface" :
http://roundedbox.andreas-kalt.de/
En plus ; proche du sujet ci-dessus, aide plus sur les menus ; "POMPAGE - Les Portes Coulissantes de CSS" :
http://www.pompage.net/traduction/portescoulissantes
Qui copie qui ; "Portes coulissantes en CSS (Sliding Doors of CSS)." :
http://www.ultra-fluide.com/ressources/css/menu-onglets.htm
"Beaucoup d'onglets basés sur CSS souffrent de ce même design un peu simple : rectangles de couleur unie, encadrement, bordure qui disparaît pour signifier l'onglet courant, et un changement de couleur au survol de la souris. Est-ce tout ce que CSS peut nous apporter ? Un simple assemblage de rectangles et de couleurs unies ?"
En plus ; bouton forme 3d ; "Créer un bouton style aqua pour le web" :
http://www.photoshop-creation.com/tuto_bouton.php
En plus ; bouton forme 3d ; "15 alternatives a photoshop" :
http://www.jarodxxx.com/?post%2F2007%2F05%2F29%2F15-alternatives-a-photoshop
En plus ; tuto (recherche tag) = css ; "TUTMarks - didacticiels, guides et tutoriaux sur internet" :
http://ww1.tutmarks.com/index.php?search=css&tag=true
En plus ; Norme W3C CCS3, bordures arrondies ; "CSS3 Backgrounds and Borders Module" :
http://www.w3.org/TR/css-backgrounds-3/
Traduction en français par Google :
http://translate.google.com/translate?hl=fr&u=http%3a%2f%2fwww%2ew3%2eorg%2fTR%2fcss3%2dbackground%2f
LE TRUC, que j'ai mis plus + de 2 heures à retrouver :
En plus ; ARRONDIES ET CHEVAUCHEMENTS ; "Sprites CSS : Meurs, découpe d’images, meurs !" :
http://www.pompage.net/traduction/sprites
Les formes irrégulières !! ; L'illusion est complète :
http://pompage.net/IMG/html/sprites/ala-blobs2.html
merci .
à+
"Nifty Corners" => "Rounded corners without images" ou "Coins arrondies sans images" :
http://www.html.it/articoli/nifty/nifty1.html
Source ; "Webmaster Hub > Bouton arrondi en utilisant css" :
http://www.webmaster-hub.com/lofiversion/index.php/t28041.html
# Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
***************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
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}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
***************
En plus ; sujet ci-dessus ; "Coins arrondis en CSS" :
http://www.svay.com/coins_arrondis/coins_arrondis.html
"Pour obtenir cet effet, j'utilise 4 boites <DIV> imbriquées. Chacune affiche un coin en image de fond. Pour éviter d'utiliser trop de balises (ajout de conteneurs), j'utilise la balise de plus haut niveau pour définir la taille de la boite et celle de plus bas niveau pour définir les marges intérieures."
En plus ; sujet ci-dessus ; formulaire ; "Generate HTML/CSS code and images for rounded corners." :
http://www.roundedcornr.com/ <<== Formulaire !!
# Copyright © 2007, RoundedCornr.com. All rights reserved.
"RoundedCornr permet de créer des boîtes dotées d'arrondis. Le générateur crée lui même les images pour les arrondis et fournit le code nécessaire pour les utiliser et donc créer votre boîte arrondie en toute simplicité. Divers outils vous permettent de créer des boîtes simples, avec dégradé ou avec bordure. Les images sont au format .png uniquement."
Source du texte ; "Dragon Picture - Archive" ; "Le Effets graphiques online - lundi 09 juillet 2007 à 11:27" :
http://dragonpic.net/index.php?selected=archive&mois=juillet&annee=2007
Source du lien :
http://www.webstorming.fr/?roundedcornr-generateur-de-boites-avec-coins-arrondis-en-html-css
En plus ; sujet ci-dessus ; "Des bords arrondis en CSS en attendant le CSS 3" :
http://www.jarodxxx.com/?post%2F2007%2F05%2F09%2FDes-bords-arrondis-en-CSS-en-attendant-le-CSS-3
Spiffy Box => Cliquez ici pour aller sur le site => https://www.afternic.com/forsale/spiffybox.com?utm_source=TDFS_DASLNC&utm_medium=DASLNC&utm_campaign=TDFS_DASLNC&traffic_type=TDFS_DASLNC&traffic_id=daslnc& <<== Formulaire !!
"stylable box" ; "Resizable box with freely stylable corners and surface" :
http://roundedbox.andreas-kalt.de/
En plus ; proche du sujet ci-dessus, aide plus sur les menus ; "POMPAGE - Les Portes Coulissantes de CSS" :
http://www.pompage.net/traduction/portescoulissantes
Qui copie qui ; "Portes coulissantes en CSS (Sliding Doors of CSS)." :
http://www.ultra-fluide.com/ressources/css/menu-onglets.htm
"Beaucoup d'onglets basés sur CSS souffrent de ce même design un peu simple : rectangles de couleur unie, encadrement, bordure qui disparaît pour signifier l'onglet courant, et un changement de couleur au survol de la souris. Est-ce tout ce que CSS peut nous apporter ? Un simple assemblage de rectangles et de couleurs unies ?"
En plus ; bouton forme 3d ; "Créer un bouton style aqua pour le web" :
http://www.photoshop-creation.com/tuto_bouton.php
En plus ; bouton forme 3d ; "15 alternatives a photoshop" :
http://www.jarodxxx.com/?post%2F2007%2F05%2F29%2F15-alternatives-a-photoshop
En plus ; tuto (recherche tag) = css ; "TUTMarks - didacticiels, guides et tutoriaux sur internet" :
http://ww1.tutmarks.com/index.php?search=css&tag=true
En plus ; Norme W3C CCS3, bordures arrondies ; "CSS3 Backgrounds and Borders Module" :
http://www.w3.org/TR/css-backgrounds-3/
Traduction en français par Google :
http://translate.google.com/translate?hl=fr&u=http%3a%2f%2fwww%2ew3%2eorg%2fTR%2fcss3%2dbackground%2f
LE TRUC, que j'ai mis plus + de 2 heures à retrouver :
En plus ; ARRONDIES ET CHEVAUCHEMENTS ; "Sprites CSS : Meurs, découpe d’images, meurs !" :
http://www.pompage.net/traduction/sprites
Les formes irrégulières !! ; L'illusion est complète :
http://pompage.net/IMG/html/sprites/ala-blobs2.html
merci .
à+
