28172 sujets

CSS et mise en forme, CSS3

[Résolu] Shape polygon [pure css]

Salut tout le monde,

Je viens vers vous parce que là.. Smiley fache
Ca doit être plutôt facile en plus Smiley biggol

Y a t'il moyen d'avoir des shape polygone en pure css - cf image jointe ?

Besoin
Il y a les .svg (image) qui d'ailleurs sont très léger (-1ko) et possiblement flexible en width (encore que ya comem un pseudo blur en border right si étiré), mais je preferrerais une soluce en pure css pour gagner en puissance et souplesse pour le nombre de Hn (capitaliser le code), les variantes (couleurs, longeur variable des Hn, etc), et d'avoir enfin un truc optimal sur le long terme...

Solutions ?
Pour ce que j'ai vu, il y a:
Les clip: j'ai du mal Smiley tronconne
Truc comme ça: http://www.useragentman.com/matrix/ Smiley smash
Svg en code, rien pigé pour son integration Smiley plante
(suis un peu Smiley rale en prog/coding)

Bref, n'y a t'il pas une approche simple, genre:


<div id="conteneur-avec-le-polyg-en-bg-X">
    <Hn>Lorem</Hn> *
</div>




#conteneur-avec-le-polyg-en-bg-X {
    padding: 2em;
    ...[yay]...
}


Une idée ?
Ou si quelqu'un a un fragment de code approchant.. serait top Smiley pop .

Merci

upload/1502525772-55228-alsa1.jpg
Modifié par Snoopeez (12 Aug 2017 - 10:41)
Bon apparement, la meilleure option est d'avoir du texte dans un svg codé, svg étant fortement recommandé par le W3C, et par ailleurs flexible (dans mon cas si un Hn est loooong):
https://stackoverflow.com/questions/6725288/svg-text-inside-rect


<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>


Ce qui suppose d'apprivoiser la logique coding svg.
Mieux, bon à savoir pour ceux qui ont des formes complexes - facile à dessiner avec un aff designer /ex.., il y existe des transformateur d'images .svg en code sgv (xml etc) en ligne - vu.

[Par contre, je ne sais pas pourquoi, mais le simple copié-collé du code du lien stack ci-dessus, dans un zone de texte de mon template (cms Wp) ne donne rien du tout.]

M'enfin voilà, ça le fait sur stack..
Par contre, plus rien à avoir avec le css, mais laisser parce que peut-être d'autres comme moi penseront en 1er lieu au css ..?
A+
Modifié par Snoopeez (12 Aug 2017 - 12:54)
Meilleure solution
Impressionnant.
C'en est presque à se demander pourquoi il n'y a pas d'app d'animation svg genre "Hype"..
Gravit a l'ai pas mal..
Sinon pour chopper les codes svg, il y a aussi Illustrator pour ceux qui l'"ont", avec "voir le code" en 2ème boite de dialogue d'export .svg; et probablement bientôt l'excellent Affinity Designer au vu des requêtes, et qu'en tout bon sens, le code svg ("gcode")prendra de plus en plus d'importance..
Par contre attention à Illustrator (et même les autres logiciels d'ailleurs). Je ne l'utilise pas mais un... "graphiste" qui m'avait passé ses icônes SVG dans le but de personnaliser un site m'avait vraiment filé des fichiers dégeux...

Il faut toujours contrôler le code de sortie, au moins le nettoyer de ses metas inutiles avec des algorithmes tels que svgomg (ex svgo-gui).
Je confirme Smiley smile En train de tester un peu tout ça et effectivement Illustrator génère des métas + bazar qui semble inutile..
Pas testé encore ton lien pour nettoyer tout ça, ceci dit la Démo est intéressante: elle démontre la "puissance" du svg en terme de params et d'integration.
Quand en plus le W3C semble pusher le svg.. Résolument ça semble être une "techno" d'avenir..
.. 3.5 kos la voiture, avec l'effet d'ombre (propre et joli en plus, comme quoi pas que du rendu "flat" vectorisé), qui peut monter en 1600px/1600px sans un gramme de plus..
Un .png 32 avec bg transparent et l'effet d'ombre, en 1600/1600px, ç a doit monter à 2OOkos min..
W-O-W Smiley thumpup
Sujet clos
Aller à