Bord arrondi !

**muriel76** · 23/04/2007, 16h37

Bonjour !

J'espere que vous allez tous bien.

Une petite aide s'impose pour ma part! je bloque !
Comment puis je faire comme sur le site :

http://www.tasset.com/

sur les colonnes a droite : des bords arrondis.
Je veux faire des boxes comme sur ce site et mettre un code css pr arrondir les boxes. Mais je n'y arrives.

Merci d'avance.

Muriel

**Korko Fain** · 23/04/2007, 17h08

Tu as 2 solutions : 1 qui fonctionne tout le temps je dirais mais qui est assez ch***te.
Et 1 qui ne fonctionnera pour le moment que sous Firefox (Opéra aussi je pense) mais pas sous IE.

La premiere : Tu utilises des images pour les bords. Comme le fait le site que tu as citer :
http://www.tasset.com/images/infobox...ht_bordeau.gif

La 2eme, tu utilises le CSS : border-radius (accepté je pense pas Opéra) et -moz-border-radius pour Firefox

**muriel76** · 23/04/2007, 18h01

[QUOTE=Korko Fain] La premiere : Tu utilises des images pour les bords. Comme le fait le site que tu as citer :
http://www.tasset.com/images/infobox...ht_bordeau.gif

Il faudrait donc que je fasse ac cette methode tous les bords a la "main" avec photososhop par exemple c ça ???
J'ai plus bcp de temps pour le faire ce sera trop long je pense

Et pour ta deuxieme methode !! (qui est à mon gout bien plus interessante !!lol

) Je bosse sous IE (et ouais!!!), je ne verrai donc pas le résultat. Dommage ce script css m'aurait été bien plus pratique.

Merci en tt k !

Avis d'autres personnes ???

**musicann** · 25/04/2007, 21h11

Envoyé par Korko Fain

Tu as 2 solutions : 1 qui fonctionne tout le temps je dirais mais qui est assez ch***te.
Et 1 qui ne fonctionnera pour le moment que sous Firefox (Opéra aussi je pense) mais pas sous IE.

La premiere : Tu utilises des images pour les bords. Comme le fait le site que tu as citer :
http://www.tasset.com/images/infobox...ht_bordeau.gif

La 2eme, tu utilises le CSS : border-radius (accepté je pense pas Opéra) et -moz-border-radius pour Firefox

+1

Soit tu fais des bords arrondis et tu t'embête à tout caler soit tu insére un morceau de code qui ne marchera que sous firefox...

Je ne connais pas d'autres solutions pour le moment..

**marcha** · 26/04/2007, 15h59

Salut,

voici un article intéressant pour comprendre les approches possibles
pour faire des bords arrondis.

http://www.sitepoint.com/article/rou...css-javascript

Puis un framework javascript qui intégre cette fonctionnalité de manière élégante.

http://openrico.org/demos?demo=corner

Et pour bricoler un petit script de test (fonctionne par terrible sur IE6) mais
pourrait être amélioré en ce sens.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<style type='text/css'>
#container { background-color: orange; zoom: 1; }
</style>
<script type='text/javascript'>
 
function Arrondi(element, rayon, couleur) {
	element.style.position = 'relative';
	var e;
	for(var i=0;i<rayon;i++) {
		var n = rayon - Math.floor(rayon * Math.sin(Math.acos((rayon-i)/rayon)));
		e = this.trait(n, couleur);
		e.style.top = i + 'px';
		e.style.left = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.top = i + 'px';
		e.style.right = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.bottom = i + 'px';
		e.style.left = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.bottom = i + 'px';
		e.style.right = 0;
		element.appendChild(e);
	}
}
 
Arrondi.prototype.trait = function(largeur, couleur) {
	var e = document.createElement('div');
	e.style.backgroundColor = couleur;
	e.style.position = 'absolute'; 
	e.style.width = largeur + 'px';
	e.style.height = '1px';
	e.style.overflow = 'hidden';
	e.style.fontSize = '0';
	return e;
}
 
</script>
</head><body onload='new Arrondi(document.getElementById("container"), 14, "white");'>
<div id='container'>
  <h1>Un titre</h1>
  <p>du texte du texte du texte du texte du texte du texte du texte du texte </p>
</div>
</body></html>

**musicann** · 26/04/2007, 16h16

Trés interessant merci pour les liens !!!

Bord arrondi !

CSS

Vue hybride

Discussions similaires

Partager

Partager