Wer erstellt mir einen neuen Header?

[Kohlrausch]

Hallo und einen guten Abend!

Ich benötige eure / deine Hilfe, denn mein Header zu meiner Webseite sollte etwas aufgepeppt werden.

Vielleicht ist das für jemanden von euch eine willkommene Aufgabe.
Der Header sollte in der Größe so beibehalten werden. Das "Camel" evtl. erneuert werden, da ich dies gerne als 3D
Object (um die Vertikalachse drehend) hätte. Vielleicht koennte dieser bereich mit einer vertikalen Linie vom Rest des Headers optisch getrennt werden oder dieser "trennende Bereich" (vertikal) könnte auch transparent sein, so dass der Hintergrund der Webseite zu sehen ist

Sorry, ich drücke mich wahrscheinlich sehr umständlich aus. Ginge auch einfacher (oder).
Wenn Du auch noch andere Vorschläge hast, bin ich gerne dafür offen.

Nun weiß ich nicht ob es auch möglich ist, diesen so überarbeiteten Header auch als gif abzuspeichern und bei mir einzubauen. Leider bin ich bei Homepage-Baukasten.de mit meiner Webseite (ist für mich, wegen mangelnder Kenntnisse im html etc. die beste Lösung).

Hier ein Link und das bild des Header.

Wenn Du ein Honorar möchtest, so teile mir Deine Vorstellung mit. Da ich aber ALG2 Bezieher bin, sollte diese bitte im Rahmen dessen sein.

Danke im Voraus und bleibt bitte alle gesund. Und noch ein schönes Wochenende...

https://www.pink-camel.de/

 

[draupnir]

Unter "3D" kann man sich vieles vorstellen. Die einfachste Lösung ist das Drehen um 360°.

Hier mal eine Quick-n-Dirty-Lösung:


Es gibt folgendes zu bedenken:
1. Für eine bessere Qualität bräuchte es die Originaldatei vom Camel. Am besten ne Vektorgrafik.
2. Um die Animation einzubinden muss die Headergrafik in einen statischen und animierten Teil geteilt werden, da das Dateiformat JPG keine Animationen unterstützt. Und in einem Dateiformat, das Animation kann, sollte man nicht die ganze große Grafik speichern, weil dann die Ladezeiten viel zu groß werden.
3. Wenn das Camel-Logo um 90° gedreht ist, ist es viel höher, daher muss es insgesammt kleiner sein als das jetzige (statische) Logo.
4. Soll die Animation unendlich laufen oder nur eine bestimmte Anzahl von Läufen, zum Beispiel zweimal?

Als Alternative zum Drehen könnte ich mir Lichteffekte auf dem Logo vorstellen, wie man es von Showbühnen kennt. Dann könnte das Logo auch in der gleichen Größe stehen bleiben. Die anderen Punkt 1, 2 und 4 gilt es auch dann zu bedenken.

– j.

 

[Kohlrausch]

Man, das sieht ja jetzt schon super aus...

Ich habe davon Null Ahnung. Leider habe ich keine vektorisierten Dateien.
In der unten genannten Datei, habe ich mal 4 verschiedenene Logos des Camel vorliegen.
Eins ist etwas zu lang geraten, deshalb sieht das Camel eher aus wie Michael Schumacher zu seinen besten Zeiten.

https://www.homepage-baukasten-dateien.de/pink-camel/Camel-Logo.rar

Ginge es nicht, wenn man den Header komplett als gif-Datei macht? Dann müsste das drehende Logo nicht vom Rest des Headers "getrennt" werden. Ach, jetzt hab ich verstanden, Gif ist ja immer transparent und deshalb erwähnst Du den statischen und den animierten Teil.

Nur der Hintergrund des animierten Teils und das Gesicht des Camels müssen die gleiche Farbe haben, wie der Header. Aber das wird wohl automatisch gehen, weil ja das Camelgesicht transparent ist und sich dem Hintergrund anpasst.

Leider kann ich Dir nichts vektorisiertes zur Verfügung stellen. Irgendwie bin ich zu doof dafür...

Vielleicht lässt sich was damit anfangen?

Ich denke, es würde reichen, wenn es sich 20 Sekunden lang dreht.

Hm. ich weiß nicht, was Du mit "Lichteffekte auf dem Logo" meinst. Vielleicht hast Du ein Beispiel einer anderen webseite?

So, ich muss nun ins Bett. Ich danke Dir recht herzlich für Deine Mühe. Kostenlos sollte es nicht sein.

Hab noch einen schönen Sonntag. Bis dahin

Michael (Kohlrausch)

 

[Andre_S]

Schwer genug das "Logo" als Camel zu erkennen, wenn es sich jetzt noch dreht wird es richtig schlimm.
Ich würde den Schriftzug Camel vom Cover der Moonmadness nehmen, das hat wenigstens ein Bezug zur Gruppe.
Und danke für die Erinnerung an Camel ich hatte ganz vergessen das ich mal ein Fan der Gruppe war.
Gerade höre ich Camel und werde werde von nostalgischen Gefühlen überschüttet.
Scheiße bin ich alt.

 

[draupnir]

Hallo Michael
in Deiner Nachrichten-Box hier im System findest Du alles, was Du brauchst. Hier schon mal die Vorschau:

Drehen:


Bewegung:


Gruß – j.

P.S. hier im System werden keine aPNG dargestellt, also oben nur GIF. Alternativ habe ich auch webP erstellt, beste Qualität und nur halb so groß wie aPNG. Allerdings spielen das ältere Webbrowser nicht ab.

 

[Kohlrausch]

Danke draupnir, recht herzlich. Ich melde mich heute am späteren Nachmittag nochmals, da ich noch Fragen dazu habe. Aber wirklich toll gemacht.

 

[Kohlrausch]

Schwer genug das "Logo" als Camel zu erkennen, wenn es sich jetzt noch dreht wird es richtig schlimm.
Ich würde den Schriftzug Camel vom Cover der Moonmadness nehmen, das hat wenigstens ein Bezug zur Gruppe.
Und danke für die Erinnerung an Camel ich hatte ganz vergessen das ich mal ein Fan der Gruppe war.
Gerade höre ich Camel und werde werde von nostalgischen Gefühlen überschüttet.
Scheiße bin ich alt.

 

[Kohlrausch]

Schwer genug das "Logo" als Camel zu erkennen, wenn es sich jetzt noch dreht wird es richtig schlimm.
Ich würde den Schriftzug Camel vom Cover der Moonmadness nehmen, das hat wenigstens ein Bezug zur Gruppe.
Und danke für die Erinnerung an Camel ich hatte ganz vergessen das ich mal ein Fan der Gruppe war.
Gerade höre ich Camel und werde werde von nostalgischen Gefühlen überschüttet.
Scheiße bin ich alt.

Ich verstehe Deinen Gedanke mit der Verknüpfung zum Moonmadness Schriftzug schon, doch das waere die Wiederholung. Ich habe dieses pinke Camel schon immer im Header. Meine Webseite heisst ja auch "Pink-Camel“. Und ja, ich weiss, das das Logo minimalistisch ist, es befindet sich aus diesem Grund auch auf Bootleg Artworks. Danke fuer Deine Antwort....

 

[liselotte]

Ich würde Überlegen den Header mit einer .webm zu füttern (braucht evtl ein Fallback) aber die Dateigröße nimmt sich nicht viel mit einem .jpg.
Viel Erfolg
MfG

 

[Kohlrausch]

Irgendwie ist meine Antwort auf Deinen Kommentar verschwunden... Nein, diesen Camel-Schriftzug moechte ich absichtlich nicht übernehmen. Denn das hat keinen Bezug zu meiner Webseite namens Pink-Camel. Dieses Logo ist minimalistisch, ging leider nicht anders. Es befindet sich ja auch auf Bootleg-Cover etc. Uebrigens: CAMELtourt 2023 wieder....

 

[guifoc]

Schwer genug das "Logo" als Camel zu erkennen

Dem kann man ohne Zögern zustimmen. Weder Drehen noch die Bewegung sehe ich als genauere Klärung hinsichtlich des Motivs camel (Kamel) an. Sehr unsauber und davon ausgegangen, dass die files symmetrisch wären, kam mir etwas "typischeres" in den Sinn, was @draupnir sicher sauber und korrekt hinbekommen würde, ohne den seitlichen Versatz. Darüber hinaus scheint mir die Geschwindigkeit der Bilder zu schnell bei den beiden Vorschlägen. Die Kritik soll @draupnir s Arbeit aber nicht schmälern, just saying...

 

[Kohlrausch]

Dem kann man ohne Zögern zustimmen. Weder Drehen noch die Bewegung sehe ich als genauere Klärung hinsichtlich des Motivs camel (Kamel) an. Sehr unsauber und davon ausgegangen, dass die files symmetrisch wären, kam mir etwas "typischeres" in den Sinn, was @draupnir sicher sauber und korrekt hinbekommen würde, ohne den seitlichen Versatz. Darüber hinaus scheint mir die Geschwindigkeit der Bilder zu schnell bei den beiden Vorschlägen. Die Kritik soll @draupnir s Arbeit aber nicht schmälern, just saying...

Ne, das ist jetzt aber total albern. Das sieht ja fast so aus, als ob ich mich, bzw. meine eigene Webseite nicht ganz ernst nehmen...

 

[liselotte]

So mal mein Entwurf


MfG

 

[Kohlrausch]

So mal mein Entwurf


MfG

OH, danke, doch das wirkt zu düster und deprimierend. Und eine Animation fehlt leider ganz. Draupnir hat da schon was ganz feines gemacht. Nut die Frage ist, wie diese Grafik in den Header integriert werden kann....

 

[TPHeinz]

Moin,

das Äußere ist wie immer Geschmackssache, mir wäre der Ist-Zustand zu bunt.
Wichtig ist ein valides Html-Gerüst
https://validator.w3.org/
Und bei der Vielzahl der verwendeten Geräte, responsive Webdesign.

 

[Kohlrausch]

Moin,

das Äußere ist wie immer Geschmackssache, mir wäre der Ist-Zustand zu bunt.
Wichtig ist ein valides Html-Gerüst
https://validator.w3.org/
Und bei der Vielzahl der verwendeten Geräte, responsive Webdesign.

Das mit der Validierung und dem responsive Webdesign weiss ich (leider). Doch das scheitert an einem Mangel von Kenntnissen. Ich hab mehr mit den redaktionellen Inhalten zu tun, da diese immer wieder bearbeitet und erweitert werden. Fuer das Ueber arbeiten und anpassen des Codes und der Webseite habe ich immer wieder Jemanden gesucht, aber das verlief immer im Sand. Leider gibt es ja keine Software zum automatisierten Validieren. Und wenn ja, dann kostet das wohl ne Stange Geld.

 

[draupnir]

Das mit dem Validieren ist erst mal Nebensache. Wie ich schon an anderer Stelle bemerkt habe, gibt es heute kaum (noch) Websites, die Syntaxfehlerfrei sind.

Das Nächste, was gelöst werden muss, ist, wie bekommst Du die Animation (.png oder .webp) in den Kopf Deiner Website. Aktuell ist das Standbild ein Hintergrundbild.

Dein System erlaubt , laut forum https://www.homepage-baukasten.de/forum/viewtopic.php?t=46904, das Einfügen von HTML-Code. Das ist doch schon die halbe Miete. Das andere ist dann eine Ergänzung des CSS, damit die div-Boxen die richtigen Größen haben und dort bleiben, wo sie hingehören.

 

[Kohlrausch]

Das mit dem Validieren ist erst mal Nebensache. Wie ich schon an anderer Stelle bemerkt habe, gibt es heute kaum (noch) Websites, die Syntaxfehlerfrei sind.

Das Nächste, was gelöst werden muss, ist, wie bekommst Du die Animation (.png oder .webp) in den Kopf Deiner Website. Aktuell ist das Standbild ein Hintergrundbild.

Dein System erlaubt , laut forum https://www.homepage-baukasten.de/forum/viewtopic.php?t=46904, das Einfügen von HTML-Code. Das ist doch schon die halbe Miete. Das andere ist dann eine Ergänzung des CSS, damit die div-Boxen die richtigen Größen haben und dort bleiben, wo sie hingehören.

Sorry, ich kann es leider nicht...
Was hälst Du davon, wenn ich meine Seite auf eine gratis-Homepage von homepagebaukasten kopiere? Evtl. kannst Du dann mal dort, wenn möglich, den html-code für den header und das Css ergänzen? Das wäre super...

 

[TPHeinz]

@draupnir,
naja, bspw. zwei Body- und Html-Tags auf der Seite, sehe ich nicht als einfache Syntaxfehler.

 

[draupnir]

naja, bspw. zwei Body- und Html-Tags auf der Seite, sehe ich nicht als einfache Syntaxfehler.

Auf der gleichen Ebene darf kein weiteres 'html' oder 'body' geben.
siehe https://stackoverflow.com/questions/2035462/multiple-htmlbody-html-body-in-same-file

Für mich gilt das, was https://validator.w3.org/unicorn/ mir so an Fehler anzeigt. Das W3 definiert HTML/CSS und mehr. Was dann die Browser-Programmierer (damit) machen, das war schon immer eine ganz andere Sache.