18073 sujets

Questions générales et questions de débutants

Dessiner en Css

Bonjour,
Est-il possible de dessiner une forme (exemple un triangle) via une feuille de style.

Attention, je ne parle pas d'inclure une image, mais bien de dessiner en css une forme.

Merci d'avance.
Salut,

non et ce n'est pas fait pour ça Smiley cligne

Il y a des possibilité de bidouiller un truc et un machin mais ça n'a pas d'interet et ce n'est pas fait pour ça Smiley lol

Les styles CSS sont un langage de mise en page et en forme d'un document.

C'est tout Smiley cligne

Pour le dessin, tu as photoshop, paint, gimp, paintshop pro, etc Smiley cligne

Pour le web, si tu ne veux pas utiliser d'images, tu as le Flash qui te le permettras en tout légitimité ainsi que le SVG qui semble adapté aussi à ce que tu sembles vouloir.
Salut,

Tout d'abord merci pour cette réponse rapide.

La solution SVG est sympa, mais elle nécessite SVG Viewer... qui n'est malheureusement pas installée de base (même si SVG est reconnu par le W3C).

Je veux justement éviter de créer une image, donc pas de photoshop... Je sais que le Css n'est pas fait pour ca, mais je me demandais s'il n'y avait tout de même pas de méthode.

Dans le pire des cas je générerai une image directement en Php, mais je pense que ca sera lourd et pas propre du tout...
totoro a écrit :

Je veux justement éviter de créer une image, donc pas de photoshop... Je sais que le Css n'est pas fait pour ca, mais je me demandais s'il n'y avait tout de même pas de méthode.

Dans le pire des cas je générerai une image directement en Php, mais je pense que ca sera lourd et pas propre du tout...


J'aimerais savoir pourquoi tu ne veux pas utiliser d'image...

En fait, j'aimerai savoir pour quoi c'est faire exactement Smiley cligne histoire qu'on puisse te conseiller plus directement par rapport à ton problème parcequ'il peut y avoir milles solutions sinon...

Utiliser le PHP pour générer une image n'a rien d'impropre puisque le rendu est au final indentique à une image, à savoir ... une image Smiley langue

Il nous faudrait plus de détails sur ce que tu souhaites faire.

Sinon, jette un oeil au concours alsa n°1 (ou 2 je sais plus) mais c'est vraiment pas la meilleures des solutions, limite la pire Smiley langue
Tu découpe ta page en 1024* 768 div d'un pixel carré.

Chaque aura un id numéroté .

Ensuite il ne te reste plus qu'a te faire un beau bitmap Smiley lol
TriadPtale a écrit :
Tu découpe ta page en 1024* 768 div d'un pixel carré.

Chaque aura un id numéroté .

Ensuite il ne te reste plus qu'a te faire un beau bitmap Smiley lol


MDR ! et comment tu fais pour le 1280*1024 et le 800*600 Smiley langue

Bon, totoro, TriadPtale à trouvé pire que de dessiner avec CSS => dessiner avec HTML Smiley cligne
Question: quel est le rôle de l'image ?
- exclusivement décorative ? Tu trouveras chez Eric Meyer et consors des astuces (affreuses) pour faire ton triangle en full CSS acceptable par un navigateur graphique très récent sur dix.
- en revanche, si elle véhicule une information jugée nécessaire à l'expérience utilisateur sur le site... oublions CSS puisqu'il s'agit du contenu, et non plus de la déco. Reste :
* les formats d'images connus, générés d'une manière ou d'une autre.
* SVG: voir ci-dessus
* Flash, généré dynamiquement ou non.
Modifié par Laurent Denis (01 Jul 2005 - 19:42)
Laurent Denis a écrit :
Question: quel est le rôle de l'image ?
- exclusivement décorative ? Tu trouveras chez Eric Meyer et consors des astuces (affreuses) pour faire ton triangle en full CSS acceptable par un navigateur graphique très récent sur dix.
- en revanche, si elle véhicule une information jugée nécessaire à l'expérience utilisateur sur le site... oublions CSS puisqu'il s'agit du contenu, et non plus de la déco. Reste :
* les formats d'images connus, générés d'une manière ou d'une autre.
* SVG: voir ci-dessus
* Flash, généré dynamiquement ou non.


Wala ^^ c'est pour ça que je voulais le pourquoi du comment Smiley smile
Laurent t'as donné les possibilités en fonction de ce que tu veux faire Smiley cligne
Effectivement, la solution du HTML est ultime.... Smiley lol

L'image à un rôle décoratif. Imaginez un site non pas rectangulaire, mais en losange. (Type "Le vrai journal"). -> http://media.canal-plus.com/lib/media_tools/image_format.php?path=/image/30/9/2309.gif&format=1

Le site est carré de base, avec des triangles sur les cotés pour faire un losange (ca va j'ai perdu personne jusque la ... ? Smiley cligne ).

Ne connaissant pas la taille de la page, je ne peux pas créer une image de taille fixe.

La solution d'étendre une image en jouant sur sa taille ne me plait pas non plus, ca va pixeliser, ca va etre sale.

Trouver la taille de la page (faire une estimation de la taille selon le contenu) et générer une image en php est déjà mieux... mais pas top.

J'aimerai une soluce générique qui me crée mes triangles en fonction de la taille de la page... Smiley smile

Effectivement SVG est pas mal, mais comme expliqué plus haut personne n'a le viewer sur son navigateur...

Donc si vous avez qqch, même de pas tout à fait propre à me proposer... Smiley confused je suis preneur.

Merki.
Bah là ça parait assez complexe comme truc...

Flash ? avec un équivalent moins biscornu en HTML à côté.

Je vois mal comment tu pourrais t'en sortir sans le vectoriel Smiley ohwell
N'oublie pas non plus que la création de maquettes pour le web a ses contraintres propres, et que quelque chose de beau sur papier est peut être totalement inadapté au web Smiley smile
Pour le fun, un texte dans un losange CSS. Totalement inutilisable en pratique, mais amusant Smiley cligne

Notes:
- FF, Opera : OK
- IEWin : il reste à modifier les dimensions et le positionnement dans une CSS en commentaires conditionnels pour qu'il donne un résultat tout à fait correct.
- On peut aussi arriver au même résultat en passant par des float.
- ce serait aussi à explorer avec les display:table (plus original, ça)
- faisable aussi en em, sans doute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
      <title>Losange CSS</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <style type="text/css">
      <!-- 
      * {
      margin: 0;
      padding: 0;
			background-color: #fff;
      }
      #square {
      width: 500px;
      height: 500px;
      position: relative;
      }
      #top_left {
      width: 250px;
      border-left: 250px solid #fff;
      border-bottom: 250px solid #ffff00;
      position: absolute;
      top: 0;
      left: 0;
      }
      #top_right {
      width: 250px;
      border-right: 250px solid #fff;
      border-bottom: 250px solid #ffff00;
      position: absolute;
      top: 0;
      right: 0;
      clip: rect(auto auto auto 250px);
      clip: rect(auto, auto, auto, 250px);
      }
      #bottom_left {
      width: 250px;
      border-left: 250px solid #fff;
      border-top: 250px solid #ffff00;
      position: absolute;
      top: 250px;
      left: 0;
      }
      #bottom_right {
      width: 250px;
      border-right: 250px solid #fff;
      border-top: 250px solid #ffff00;
      position: absolute;
      top: 250px;
      right: 0;
      clip: rect(auto auto auto 250px);
      clip: rect(auto, auto, auto, 250px);
      }
      #content {
      text-align: center;
      position: absolute;
      top: 200px;
      right: 175px;
      font-size: 25px;
      line-height: 25px;
      width: 125px;
			background-color: transparent;
      }
      -->
      </style>
  </head>
  <body>
    <div id="square">
      <div id="top_left"></div>
      <div id="top_right"></div>
      <div id="bottom_left"></div>
      <div id="bottom_right"></div>
      <div id="content">Texte dans un losange CSS</div>
    </div>
  </body>
</html>

Modifié par Laurent Denis (02 Jul 2005 - 06:33)
Sujet clos
Aller à