Ist dieses Design mit CSS möglich?

[blizzart88]

Hallo,
mir kam gerade eine Idee, die ich mit PS grafisch ausgearbeitet habe und ich frage mich, ob das mit CSS durchführbar ist. Hier mal die Grafik:


Wie ich die Schattierungen erstelle ist klar, aber ist die Navigation so machbar? Speziell beim Hovern (wie bei Home) würde mich das interessieren.
Eine weitere Frage wäre auch noch, ob sich der Content über die Ränder des runden Bereichs hinausschiebt, oder ob er sich am Rand orientiert?

Wenn da jemand den ein oder anderen Tipp, bzw. Link parat hätte, wäre das echt super.

Vielen Dank schonmal vorab.

 

[FlashZange]

Theoretisch - ja.
Schau mal hier, das 2. Demo:
http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Praktisch - nein.
Das ist ein tierischer Aufwand, der kaum zu rechtfertigen ist.
Dann lieber mit Bildern, auch wenn das veraltet erscheinen mag.

 

[dagdavincy]

Über css ist das mir noch nicht begegnet aber mit Flash hab ich das schon ähnlich gebaut.
Es kommen aber sicher noch bessere Vorschläge hier.

 

[blizzart88]

Danke schonmal für eure Antworten.
Ich habe die Seite mal kurz überflogen, Flashzange. Mal sehen, ob ich damit was anfangen kann.
Leider steht Flash für mich nicht zur Debatte, dagdavincy, aber trotzdem danke.

Gibt es eigentlich eine Möglichkeit, dass bspw. der Text im inneren Kreis sich an der Form orientiert und nicht, wie ich es jetzt hier habe, über das Element hinausragt?

 

[emet]

Also ich habe noch nicht gesehen, dass man Inhalt an einen kreisförmigen Inhalt anpassen kann. Da wirst du wohl den Inhalt auf einen bestimmten Bereich begrenzen müssen.

Ich kann mir nur vorstellen, dass man evtl mit JS sowas beeinflussen kann - von der Form her.

Zur Navi wäre aber noch eins zu sagen.

Wenn da z.B. 6,7,8 Menupunkte eingebaut werden müssen und die einzelnen NaviPunkte eine Klasse haben, dann geht das auch ganz einfach mit absoluter Positionierung.

Evtl mal ein bisschen probieren und anpassen - aber wenn das Menu fest steht, dann ist das damit sehr einfach.

 

[FlashZange]

Auch kreisförmiger Inhalt geht - guck mal da:
http://sarasoueidan.com/blog/css-shapes/

Habs aber selber noch nicht ausprobiert und Browser-Support ist schätzungsweise eher schlecht

Müsste dann irgendwas mit

shape-outside: circle();

sein.

 

[emet]

Problem ist, dass CSS3 noch nicht 100%ig ist und solange das nicht als Standard abgehakt ist, ist die Unterstützung recht neuer Funktionen auch teilweise abhängig vom Umfeld und den Browsern.

 

[sendi]

Du könntest es mit 2 Kreisen lösen, einen Dunkelgrauen außenrum, einen helleren in der Mitte und darüber dann die Schrift als Links positioniert. Kreise werden in vielen Browsern schon unterstützt.

 

[nierewa]

Wieso soll das nicht möglich sein?
Oder sind Grafiken verboten? Denn sonst ist da kéin Problem denk ich.

Man könnte ja theoretisch auch die Grafiken dann an die jeweilige Auflösung anpassen lassen. Prozentual arbeiten ;-)

css3 Bietet da sicher auch seine Möglichkeiten, aber da kenn ich mich nicht aus

 

[pascal.k]

Schau dir mal das hier an: http://fff.cmiscm.com/#!/main