Cadres de texte multiforme

**Pyanepsion** · 21/05/2012, 18h38

Bonjour à tous.

Les cadres de textes sont normalement rectangulaires. Comment créer des cadres de textes avec des formes fantaisistes ? Puis positionner ces formes où l'on veut sur l'écran ?

Merci pour votre aide.

**Muchos** · 21/05/2012, 20h30

C'est plutôt une question de css. Vous pouvez :

Soit utiliser la propriété css3 border-radius pour arrondir plus ou moins un ou des coins.

Soit réaliser un cadre dans un logiciel de graphisme et l'intégrer en css. Ex:

Code :

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

1
2
3
4
 
  <div style="width: $px; height: $px; background: transparent url(/adresse/mon-image.png) no-repeat;">
      <p style="text-align: center; position: relative; top: 50%;">BLA BLA BLA</p>
  </div>

**Pyanepsion** · 22/05/2012, 07h59

Merci Muchos pour ta réponse. Voilà donc une forme insolite et l'embryon de code correspondant à ta deuxième proposition. Comment habiller le texte à l'intérieur de ce pentadécagone tout en suivant ses différents bords ?

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
 
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<title>Multiforme</title>
	<style>
                body{
                        background: aliceblue;
                }
                div{
                        width:500px;
                        height: 477px;
                        background: transparent url(http://img4.hostingpics.net/pics/763697pentadecagone.png) no-repeat;
                }
                p{
                        text-align: center;
                        position: relative;
                        top: 50%;
                }
        </style>
</head>
<body>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Pellentesque porttitor, velit lacinia egestas auctor, diam eros tempus arcu, nec vulputate augue magna vel risus. Cras non magna vel ante adipiscing rhoncus. Vivamus a mi. Morbi neque. Aliquam erat volutpat. Integer ultrices lobortis eros.</p>
	</div>
</body>
</html>

**Muchos** · 22/05/2012, 18h14

Oulah ! On connaissait Picasa Web, maintenant il y a Picasso web !

Sérieusement, là, c'est au-dessus de mes petites forces... Aucune idée de comment s'y prendre :/

**Vil'Coyote** · 22/05/2012, 18h40

j'ai un peux peur que là on ne sorte des possibilité offerte par le web en générale. voir du coté de java / flash ou javascript peut être mais html /html5 j'ai un doute

Cadres de texte multiforme

HTML

Vue hybride

Discussions similaires

Partager

Partager