unregelmäßige Polygone per CSS3?

Post non-phpwcms related topics here - but I don't want to see "hey check this or that other cms". Post if you have a point or worthwhile comment, don't post just to increase you post count!
Post Reply
User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

unregelmäßige Polygone per CSS3?

Post by kukki » Sun 5. Oct 2014, 13:42

Ich habe nun den gesamten Sonntagvormittags damit verbracht, nach einer Lösung zu suchen, die es gestattet ein UNregelmäßiges Polygon mit CSS zu zaubern. Alles habe ich gefunden - regelmäßige Polygone in allen Ausführungen, wie Sterne, Quadrate und Rechtecke, Herzen und solchen Schnodder, aber ein einfaches Viereck mit ungleichlangen Seiten und beliebigen Winkeln .... dafür gibt es zwar eine JS-bibliothek, die will ich aber nicht benutzen, denn in diesem Polygon soll SEO-fähiger Text stehen, der ebenso noch per CSS gestaltet werden kann.

Hat jemand dafür schon mal eine Lösung gefunden oder gelesen?

So soll das fertige Teil in etwa aussehen:
Image

Zur Zeit scheint es einfacher zu sein eine Grafik zu erzeugen und den Text darin zu platzieren - mag für eine einzige Anwendung gehen :| , aber bei mehreren und verschiedenen Farben etc. und wegen der Änderungsmöglichkeiten, finde ich dass dann doch etwas aufwendiger.
Last edited by kukki on Mon 6. Oct 2014, 10:01, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: unregelmäßige Polygone per CSS3?

Post by Oliver Georgi » Sun 5. Oct 2014, 17:17

Benutze SVG

Code: Select all

<!DOCTYPE html>
<html>
<body>
<svg width="600" height="850">
	<polygon fill="#E53425" stroke="#F4D915" stroke-width="7" stroke-miterlimit="10" points="365.956,214.647 102.164,279.016 61.041,257.272 391.5,122.835"/>
	<polygon fill="none" points="106.035,239.96 340.633,167.476 366.339,199.646 131.742,272.129 "/>
	<text transform="matrix(1.1939 -0.3689 0.6243 0.7812 125.8293 264.7303)">
		<tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="37.8827">Text verzerrt</tspan>
	</text>
</svg>
</body>
</html>
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: unregelmäßige Polygone per CSS3?

Post by kukki » Mon 6. Oct 2014, 10:25

Danke für die Mühe.
Das sieht als Standalone-Lösung gut aus, ist aber für den Fractionslider so leider nicht anwendbar, da ich nur über data-Parameter, und jetzt auch mit
class/ style=%%par1 par2...%% die Gestaltung/Transmission von Texten und fertigen Grafiken vornehmen kann. Daher meine intensive Suche nach einer CSS-Lösung, die wäre perfekt gewesen :|
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
phpspace
Posts: 2
Joined: Thu 9. Oct 2014, 05:52
Contact:

Re: unregelmäßige Polygone per CSS3?

Post by phpspace » Thu 9. Oct 2014, 20:22

Es wird schwierig eine ordentliche Lösung für dein Problem zu finden. Genauso belastest du dann ganz schön den Client. Sollte der Client ein wenig schwach auf der Brust sein, dann bekommt er eventuell Geschwindigkeitsverluste beim Rändern der Seite. Wieso erstellst du nicht einfach immer eine Grafik? Was hast du denn eigentlich genau vor? Wie häufig möchtest du dein Polygone dann verwenden?
<?php
echo 'PHP Programmierer mit Spaß und Freude daran';
?>

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: unregelmäßige Polygone per CSS3?

Post by kukki » Mon 13. Oct 2014, 10:00

Oh ha, ein Neuer hier im Board :D

Gegenstand meiner Anfrage war die Nutzung in diesem Slider, den ich bereits seit Dezember letzten Jahres als kostenlose Pluginerweiterung für unser CMS in Arbeit und step by step miitels nur von Boardmittelns des phpWCMS erweitert habe. Es gibt viele solcher Slider - Schrott als auch brauchbare Plugins (wie dieser hier). Dieser Fractionslider war relativ einfach einzubauen, ist aber nicht ganz so simpel bedienbar, mit ein wenig HTML-Kenntnis und CSS ist das aber schnell erledigt. Das Teil habe ich erweitert um einen Import aus anderen Websites und um multi-Klassen-Notationen bzw. von hand hinzugefügten style-Notationen und durch Erweiterung mit einem Hardwarezusatz (RaspbberryPi) und anderen Unix-Scripten kann ich diese Bildausgaben als onlineWerbung beliebig regionl auf irgendwelche erweiterte/ angeschlossenen TVs mit CEC-Stuerung aus Basis von Debian ausgeben - kein Flash, keine Videos, aktuell änderbar mit 15' refresh, SEO-freundlich, asynchron und synchron abspielbar.

Und dafür sollte halt ein CSS3 Polygon her, halt aber ein unrgelmäiges Viereck. Wenn's nicht geht, dann eben per Grafik, wollte ich aber vermeiden - siehe Slider-Demo :mrgreen:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1110
Joined: Fri 23. Nov 2012, 13:52

Re: unregelmäßige Polygone per CSS3?

Post by Old Boy » Mon 13. Oct 2014, 17:20

Bei solchen Sachen frag ich mich immer ernsthaft: Verkaufe ich damit einen Kasten Bier mehr?

Meist komme ich schnell zu dem Schluss: NEIN... der Aufwand ist weit höher als der Nutzen!

Meine Entscheidung wird dadurch unterstützt, wenn ich mir Internetsites aus USA ansehe... fürchterliche "Optik", aber de machen damit trotzdem richtig Umsatz!

Also habe ich mich entschlossen, grundsätzlich den "einfacheren" Weg zu gehen und lasse möglichst solche "Spielereien" raus... macht nur Arbeit und der "Kunde, der Alles will" zahlt sowieso nix :D

Nach meiner bescheidenen Erfahrung bringt nur "vernünftiger Inhalt" wirklich was, da investiere ich lieber meine Zeit!
Und das bei einer möglichst idiotensicheren Navigation.


PS
Ich habe noch nie den Kunden gefragt: "Wie soll deine Site denn aussehen? "
Sondern immer: "Was willst du mit deiner Site erreichen?"

Dann hab ich das komplette Layout gemacht und voll funktionsfertig - per localhost auf dem laptop - vorgestellt.
95% aller Interessenten sagen spontan "JA!"
Die restlichen 5% übernehme ich nicht! Die "vergeblichen Arbeiten" kann ich später mal verwenden. :lol:

Mag vielleicht verrückt klingen, hat aber bisher wunderbar funktioniert.
Ich habe zwar vorher mehr Arbeit, aber anschliessend geht alles total easy, weil ich nicht an solchen "Problemen" rumknabbern muss!

Nein, das muss man nicht so machen... kann man aber mal versuchen, zumindest drüber nachdenken!

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: unregelmäßige Polygone per CSS3?

Post by kukki » Mon 13. Oct 2014, 19:25

Du liegts glaube ich etwas daneben, das hat nichts mit (m)einer Website zu tun, auch wenn man den Slider UNTER ANDEREM ZU DEMOZWECKEN sich dort ansehen kann! :mrgreen: Dafür ist meine Erweiterung überhaupt gar nicht gemacht!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1110
Joined: Fri 23. Nov 2012, 13:52

Re: unregelmäßige Polygone per CSS3?

Post by Old Boy » Mon 13. Oct 2014, 22:20

Ich will damit ja auch nur sagen: Warum polygonal und kompliziert wenn es auch rechteckig und einfach geht!

Aber natürlich sollst du das so machen, wie DU meinst, ist ja eh klar :D

Post Reply