Webseite/Homepage in 3D
lima-city → Forum → Die eigene Homepage → Grafikdesign
animation
bild
bildbearbeitung
boxen
code
designer
effekt
erstellen
foto
geld
grafik
http
idee
inhalt
jemand
machen
software
url
wandel
webseite
-
Ich hab hier heute durch Zufall ein Video über Tilt oder DOM gesehen ein Firefox Addon.
So wie ich das verstehe mach das einfach zu jeder xbelibigen Seite ein 3D Darstellung.
http://www.youtube.com/watch?v=KB568SzSmLw&feature=endscreen&NR=1
Die Idee eine Webseite als 3 Dimensionalen Raum auf zubauen finde ich toll.
Gibt es eine Möglichkeit den Content von Vornherein in 3D abzubilden über eine Engine , aber nicht so was wie Flash, schon eher ähnlich wie bei CSS das man einem Element eine Winkel und ein Position im Raum gibt.
So das man den Inhalt auch einfach aus wechseln kann ohne eine Animation zu für alles neu zu erstellen.
Kennt jemand eine Seite wo sowas umgesetzt ist oder ein gutes Tutorial für sowas?
Beitrag zuletzt geändert: 17.12.2012 23:14:36 von wandel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
wandel schrieb:
Gibt es eine Möglichkeit den Content von Vornherein in 3D abzubilden über eine Engine , aber nicht so was wie Flash, schon eher ähnlich wie bei CSS das man einem Element eine Winkel und ein Position im Raum gibt.
Wenn, dann muß man auch mit Flash mit xyz-Achsen Arbeiten (und den sich daraus ergebenden Winkeln von einem Fluchtpunkt aus gesehen). Das ist kein Flash-Prinzip, sondern ein vorgehen zur dreidimensionalen Darstellung. Bewegt man sich beim Flash weg vom Klickibunti hin zur Scriptsprache hat man nur mit xy(z)-Angaben usw usf. zu tun.
wandel schrieb:
So das man den Inhalt auch einfach aus wechseln kann ohne eine Animation zu für alles neu zu erstellen.
Kennt jemand eine Seite wo sowas umgesetzt ist oder ein gutes Tutorial für sowas?
Anwenderfreundliches habe ich da noch nix gehört. Insgesamt scheint mir das auch sinnfrei, da die Nutzbarkeit der Seite da eher leidet und zudem die Rechnenlast unsinnig steigen würde.
Beitrag zuletzt geändert: 18.12.2012 0:02:43 von sonok -
wandel schrieb:
...
Die Idee eine Webseite als 3 Dimensionalen Raum auf zubauen finde ich toll.
...
Kennt jemand eine Seite wo sowas umgesetzt ist oder ein gutes Tutorial für sowas?
Du hast verstanden, was Du in dem Video gesehen hast? Anscheinend nicht!
Es geht dabei nicht darum, dem User eine Website in 3D zu zeigen, sondern die Struktur der Website in 3D zu visualisieren. Für den Nutzer ist das ganze sinnlos. Interessant ist es, wenn überhaupt, für Entwickler/Webdesigner, um Gestaltungsideen der Mitbewerber besser/schneller zu verstehen.
-
So wie ich das verstehe mach das einfach zu jeder xbelibigen Seite ein 3D Darstellung.
Das habe ich genauso verstanden und das es ein nettes Tool ist um sich den Aufbau einer WebSeite anzusehen.
Jedoch kam mir dadurch die Idee mich an eine Webseite zu versuchen die 3 dimensional ist. Also wenn ich ein Textfeld habe das schräg in die Tiefe des Raumes geht, soll der Inhalt (Bilder, Text, Video) an die Perspektive angepasst werden. -
Es gab damals eine witzige Scriptsprache, nannte sich VRML. ich hatte mih damit versucht, ist gar ncht mal so schwer... allerdings auch nicht all zu verbreitet, weil man den Cosmo-Player oder einen von 2-3 anderne Playern installieren muss, die das darstellen können...
http://de.wikipedia.org/wiki/Virtual_Reality_Modeling_Language
EDIT: es gibt seit 2001 den nachfolger X3D...
Beitrag zuletzt geändert: 18.12.2012 11:15:46 von sebulon -
Ich halte es für eine sinnlose Spielerei.
Flash wäre wohl die beste Möglichkeit dafür.
Bzw. ActionScript
-
Hallo Wandel!
Man kann seine Webseite ein bisschen 3D-like aussehen lassen, wie du es auf diversen Webseiten sicher schon gesehen hast. Das macht man mit CSS und ein paar neuerungen, wie zum Beispiel dem Box-Shadow Attribut. Das erlaubt es einen Schatten außen/innen einer Box (zB. <div></div>) zu legen. Ist ganz nett, wenn man Buttons oder Bilder betonen möchte.
Nachzulesen unter http://www.css3.info/preview/box-shadow/
Liebe Grüße! -
limabone schrieb:
Hallo Wandel!
Man kann seine Webseite ein bisschen 3D-like aussehen lassen, wie du es auf diversen Webseiten sicher schon gesehen hast. Das macht man mit CSS und ein paar neuerungen, wie zum Beispiel dem Box-Shadow Attribut. Das erlaubt es einen Schatten außen/innen einer Box (zB. <div></div>) zu legen. Ist ganz nett, wenn man Buttons oder Bilder betonen möchte.
Nachzulesen unter http://www.css3.info/preview/box-shadow/
Liebe Grüße!
http://www.3dcsstext.com/ wird nur von Moderenen Browsern unterstützt
(Nicht bei IE)
Hier setzt ich auch einen 3D Text ein
http://pc-wunder.de/
oder du benutzt kostenplichtigen Designer
http://www.chip.de/downloads/Magix-Foto-Grafik-Designer-2013_30214237.html
Ich habe selbst den Magix-Foto-Grafik-Designer-2013 nicht, aber den Magix-Foto-Grafik-Designer-6 und bin zu Frieden eine Homepage kann man damit sehr einfach machen man kann sehr viele 3D Effekte ein fügen!
Beitrag zuletzt geändert: 31.12.2012 10:26:22 von hpage -
hpage schrieb:
http://www.3dcsstext.com/ wird nur von Moderenen Browsern unterstützt
(Nicht bei IE)
Hier setzt ich auch einen 3D Text ein
http://pc-wunder.de/
oder du benutzt kostenplichtigen Designer
http://www.chip.de/downloads/Magix-Foto-Grafik-Designer-2013_30214237.html
Ich habe selbst den Magix-Foto-Grafik-Designer-2013 nicht, aber den Magix-Foto-Grafik-Designer-6 und bin zu Frieden eine Homepage kann man damit sehr einfach machen man kann sehr viele 3D Effekte ein fügen!
Haha, du glaubst doch nicht ernsthaft, dass das was du da treibst als "Webdesign" zu bezeichnen ist. Sorry aber diese 3d-schrift ist letzlich nur ein Schatten, der einen kleinen Raum effekt erzeugt. Auch Box-Shadow wirkt in die gleiche Richtung.
Was der TE sucht sind CSS-3D-transforms: Damit wird in Zukunft 3D Webdesign möglich sein. Obs wirklich gut ist und die Usability einer Webseite steigert steht freilich auf nem anderen Blatt. (In meinen Augen ist das ganze nur Spielerei) Wird bisher aber hauptsächlich von der Webkit-Fraktion unterstützt. Demos siehe hier http://desandro.github.com/3dtransforms/ , Code Snippets beispielsweise hier: http://tympanus.net/codrops/
und @ hpage: Dieser Magix Foto Grafik "Designer" ist doch rausgeschmissenes Geld. GIMP in Kombo mit Inkscape kann mehr und kostet keinen Cent. Und diese blöden 3D-Logos überall sind sowieso unnötig. -
...
und @ hpage: Dieser Magix Foto Grafik "Designer" ist doch rausgeschmissenes Geld. GIMP in Kombo mit Inkscape kann mehr und kostet keinen Cent. Und diese blöden 3D-Logos überall sind sowieso unnötig.
Mit Magix Foto und Grafik Designer kann man Logos erstellen, aber auch eine Ganze Webseite und das sehr einfach!
für ein Logo würde ich mir natürlich auch keine Software kaufen.
Du kannst damit eine Komplette Webseite erstellen. das einzige was du selbst schreiben musst.
Gimp ist für Bildbearbeitung sehr gut da hast du recht!
In Thema Bildbearbeitung ist Gimp sogar besser als der Magix Foto und Grafik Designer -
hpage schrieb:
...
und @ hpage: Dieser Magix Foto Grafik "Designer" ist doch rausgeschmissenes Geld. GIMP in Kombo mit Inkscape kann mehr und kostet keinen Cent. Und diese blöden 3D-Logos überall sind sowieso unnötig.
Mit Magix Foto und Grafik Designer kann man Logos erstellen, aber auch eine Ganze Webseite und das sehr einfach!
für ein Logo würde ich mir natürlich auch keine Software kaufen.
Du kannst damit eine Komplette Webseite erstellen. das einzige was du selbst schreiben musst.
Gimp ist für Bildbearbeitung sehr gut da hast du recht!
In Thema Bildbearbeitung ist Gimp sogar besser als der Magix Foto und Grafik Designer
Klasse, so ein Designer mag für einen Anfänger hilfreich sein, aber jeder der sich mit der Materie beschäftigt hat wird bestätigen, dass von Hand coden einfach besser ist. Du hast die komplette Kontrolle über den Code und weißt was du da geschrieben hast. Mit einem Designer wirst du nur so gut bzw. eher so schlecht wie der Designer es eben kann eine Webseite erstellen. Da ists nix mit Html 5 solange die Software das nicht kann. Validiere deine eigene Seite: Da ist nichtmal ein DocType angegeben. Tolle Software !
Außerdem: Das kann doch nicht dein ernst sein:<font style="font-family: Arial, sans-serif;line-height: 1em;color: blue;font- weight:bold;font-size: 32px;text-shadow:0px 0px 0 rgb(126,126,126),-1px -1px 0 rgb(109,109,109),-2px -2px 0 rgb(92,92,92),-3px -3px 0 rgb(75,75,75),-4px -4px 0 rgb(58,58,58),-5px -5px 0 rgb(41,41,41),-6px -6px 0 rgb(24,24,24),-7px -7px 0 rgb(7,7,7),-8px -8px 0 rgb (-10,-10,-10),-9px -9px 0 rgb(-27,-27,-27),-10px -10px 0 rgb(-44,-44,-44),-11px -11px 0 rgb(-61,-61,-61),-12px -12px 0 rgb(-78,-78,-78),-13px -13px 0 rgb(-95,-95,-95),-14px -14px 0 rgb(-112,-112,-112), -15px -15px 0 rgb(-129,-129,-129),-16px -16px 15px rgba(0,0,0,0.55),-16px -16px 1px rgba(0,0,0,0.5),0px 0px 15px rgba(0,0,0,.2);}">PC-TIPPS<br><br>FORUM<br><br>Anleitungen<br><br>und vieles mehr!</ font><br><br><br><br><br><br><br><br><br><br><br><br><br>
Sauberer Code sähe so aus:
Inline styles und veraltete Tags !<p> <span class="3dtext">PC-Tipps</span> ......</p>
Beitrag zuletzt geändert: 31.12.2012 15:29:36 von imho -
Alertnativ hätte man auch folgende Möglichkeiten eine 3D Seite zu erstellen:
falls nicht animiert gewünscht langt es einfache 3D Grafiken in einem 3D Programm seiner Wahl zu erstellen und in einem Bildbearbeitungsprogramm, z.B. Photoshop, etwas zu bearbeiten, so dass man einfach Bilder von 3D Objekten nutzt und so die Seite 3D wirken lässt.
Eine andere Möglichkeit biete mittlerweile die Unity3D Engine. Man kann dort in der Engine mit 3D Modellen und Javascript oder C# (oder weiteren Programmiersprachen) relativ einfach und ohne viel Mühe eine coole 3D Landschaft erstellen und das ganze dann entweder als Flashplayer Version oder dem Unity Webplayer publizieren. Die Dateigröße variiert dabei nach Inhalt, nutzt man kaum eigene Modelle kann die Dateigröße auch bei 50kb oder ähnlich kleinen Werten bleiben. Je nach Menge und Inhalt kann die Dateigröße natürlich variieren, funktioniert aber im Grunde echt super und macht Spaß damit zu arbeiten. So kann man auch einfach eine 3D Seite mit Animationen erstellen, z.B. dass ein Buch von einem Tisch in die Bildmitte schwebt (vllt auch mit Effekten) und dann sich aufschlägt um zb ein Gästebuch anzuzeigen. Es ist fast alles Möglich! www.unity3d.com schauts euch an :) -
und wer richtiges 3D bruacht, kann sich immer noch richtung:
http://www.computerbase.de/news/2013-03/unreal-engine-3-als-native-browser-version-portiert/
orientieren -
Unity 3D ist ja richtiges 3D ist auch eine Engine die auf Browser und Mobile Geräte ausgerichtet ist. Man kann auch Sandalone Games mit entwickeln wenn man möchte. Eignet sich aber auch super zum erstellen von Websiten, oder ne Model Vorschau die man selbst bewegen und drehen kann.
Die Unreal Engine macht das seit neustem auch, ist nur die Frage ob die das gut umgesetzt bekommen haben, oder ob der Player nicht zu speziell ist oder auch zuviel leistung zieht da die Unreal Engine ja wie die CryEngine zum HighEnd Bereich gehört und AAA Spiele mit erstellt werden können.
In jedem Fall ist beides sicherlich einen Blick wert ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
