28172 sujets

CSS et mise en forme, CSS3

Contenu dans des div "obliques" ?

Bonjour à tous Smiley biggrin ,

je cherche à faire un effet utilisé dans les magasines de mode qui est le contenu mise en page dans des "losanges".
Au lieu d'avoir un texte dans un carré, comme habituellement, les textes sont mis en page obliquement.

Je ne suis pas sur de bien me faire comprendre rien de tel qu'une petite illustration (ci-dessous).

J'ai recherché sur la toile, sans grand succès... Peut être que les mots clés utilisés ne sont pas les bons...

Si quelqu'un a une solution, un début d'idée pour réaliser cet effet je suis preneur!
Le but étant, bien sur, une grande compatibilité avec les navigateurs et les robots Google et autres. Avec le moins de JS possible et ni en Flash ni en Image.

Par avance merci Smiley smile

upload/37820-Sanstitre-.jpg
Modifié par mouic (12 May 2011 - 11:45)
Il y a une solution assez simple, mais vraiment pas pratique, qui serait de définir un padding-left et un padding-right, ligne par ligne.

Evidemment tu ne pourras pas mettre du texte dynamique, il faudra que tu cales au pixel près chaque ligne, ce qui avouons le perd tout sont intérêt.

A toi de voir ce texte sera-t-il fixe, ou amené à changer ?
Bonjour,

- En CSS à l'heure actuelle: pas possible.
- En CSS à l'avenir: Adobe a proposé une spec pour ça cette année, mais il va falloir attendre au moins quelques années pour pouvoir l'utiliser (dans certains navigateurs, pas forcément tous).

Autres technologies envisageable:
- J'imagine que ça doit être faisable en Flash.
- Peut-être aussi en SVG.
Bon j'ai réussi à faire un petit exemple sympa. On détourne l'usage de base mais bon rien n'est trop beau pour de la mise en style originale ^^ !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title>Text</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
  <div style="width:600px;height:200px;border:1px solid black;font-size:12px;line-height:14px;">
	<div style="float:left;width:140px;height:14px;"></div>
	<div style="float:right;width:20px;height:14px;"></div>
	<div style="clear:both;float:left;width:120px;height:14px;"></div>
	<div style="float:right;width:40px;height:14px;"></div>
	<div style="clear:both;float:left;width:100px;height:14px;"></div>
	<div style="float:right;width:60px;height:14px;"></div>
	<div style="clear:both;float:left;width:80px;height:14px;"></div>
	<div style="float:right;width:80px;height:14px;"></div>
	<div style="clear:both;float:left;width:60px;height:14px;"></div>
	<div style="float:right;width:100px;height:14px;"></div>
	<div style="clear:both;float:left;width:40px;height:14px;"></div>
	<div style="float:right;width:120px;height:14px;"></div>
	<div style="clear:both;float:left;width:20px;height:14px;"></div>
	<div style="float:right;width:140px;height:14px;"></div>
	"Here is a great tree, standing close to the ditch. If the Tin Woodman can chop it down, so that it will fall to the other side, we can walk across it easily." "That is a first-rate idea," said the Lion. "One would almost suspect you had brains in your head, instead of straw." The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through. Then the Lion put his strong front legs against the tree and pushed with all his might, and slowly the big tree tipped and fell with a crash across the ditch, with its top branches on the other side. They had just started to cross this queer bridge when a sharp growl made them all look up, and to their horror they saw running toward them two great beasts...
  </div>
  </body>
</html>


Comme tu le vois il y a des divs "flottantes" à gauche et à droite (tout au début de la div contenant le tout). Ces divs viennent définir le retrait du texte. Je les ai mises à la main mais je pense qu'il peut être facile de les crééer dynamiquement en JS.

Avec cette méthode, une fois le gabarit défini, on peut mettre ce que l'on veut en guise de texte (ici un court extrait du magicien d'Oz) ^^.

J'espère que cela va t'aider.
Je pensais également à une solution de ce type, bien vu !
Maintenant, c'est clair que c'est une solution qui semble fonctionner, mais point de vue "beauté" du code c'est pas top top...
Salut,

Pour une forme "classique" pur losange, courbe etc c'est un peu une usine à gaz mais en php par exemple on y arrive en faisant une simple fonction qui te calcule un padding... Pour des formes indéterminées là c'est plus improbable.

Un exemple de "texte courbe" si ça peux t'inspirer Smiley smile 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> test_php</title>

<style type="text/css">
*{margin: 0; padding: 0;}

ul{
list-style-type: none;
width: 800px;
margin: auto;
border: 1px solid black;
}

li{
margin-left: 15px;
}
</style>
</head>
<body>

<?php
$decalage = 0.05;//------------ Arrondi ----------------
$padding = 30;//------------ courbure ----------------
$pente = 60;//------------ pente ----------------
?>
<ul>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Quisque a ante. Nunc in turpis et enim sagittis commodo.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>> Integer euismod leo. Quisque rhoncus ante.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Curabitur a ante quis erat molestie venenatis.</li>
<li style="padding-left: <?php echo ($padding-log($decalage)*$pente).'px;"'; $decalage = $decalage+0.1; ?>>Morbi imperdiet nibh at nisl. Vestibulum elementum tempor lorem.</li>
</ul>
Merci à tous pour vos réponses Smiley biggrin !!!

Je vais tester tout ça et ferai un retour d'ici demain.
Administrateur
Une liste de lignes ? Aargh, pourquoi pas plutôt des span si ces lignes font partie du même paragraphe ?

Sinon Eric Meyer s'était amusé à habiller des contours, il y a de cela quelques années mais j'arrive pas à retrouver l'article (sur meyerweb et pas ALA, de mémoire)

edit: ZOMG http://meyerweb.com/eric/css/edge/curvelicious/demo.html et http://meyerweb.com/eric/css/edge/raggedfloat/demo.html
Spécial mauvaise pratique de performance web Smiley lol
Modifié par Felipe (12 May 2011 - 20:38)
Bon j'ai intégré ces différents codes et celui qui me semble le plus apte au niveau rendu est celui de Shinji car il gère aussi la partie droite du texte.

Seul soucis est le code qui est "sale" mais il ne devrait pas gêner le référencement.
Au cours de mon expérience j'ai vu du code largement plus crade Smiley ravi

A voir au rendu final sur le site!

En tout cas merci, la conversation reste ouverte si il y encore mieux Smiley biggrin

Bonne journée!
Modifié par mouic (13 May 2011 - 16:19)
Sujet clos
Aller à