Photoshop-Cafe.de :: Dein Photoshop-Forum

Zurück   Photoshop-Cafe.de :: Dein Photoshop-Forum > Fragen zu Adobe Photoshop (Elements), zur Creative Suite und anderen Kreativprogrammen > Hilfestellung, Tipps und Tricks

Hinweise
Aktuelles aus dem PSC
„Kreativ Hallo Du!

Das Thema für den P-S-C 02/2024 ist ⇒ verkehrte Welt. Bis einschließlich 30.04.2024 kannst du ein Bild einreichen.
Hier gehts zum Foto-Monatsthema für März 2024 : ⇒ Kultur.
... und hier findest du die C-C-C für März 2024: ⇒ Glas.
Unterstützung für das PSC

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 08.09.13, 16:15
dertobinator dertobinator ist offline
frisch dabei
 
Registriert seit: 09/2013
Ort: Hamburg
Beiträge: 2
OS: Windows 8
Kreativ-Software: CS6
dertobinator geht den richtigen Weg
Brauche Hilfe: Website-Hintergrund in Klavierlackoptik

Hallo,

Ich möchte für meine Seite den Hintergrund mit Klavierlackoptik haben. Oben dunkel und unten hell. Das ganze muss flexibel sein nach unten, da sich die Seitengröße immer ändert. Der Ausgangsfarbton ist #242221.

Weiß jemand, wie man sowas anstellt?

Danke schon mal und Gruß aus Hamburg

Tobi
Mit Zitat antworten
  #2  
Alt 08.09.13, 19:06
Benutzerbild von uwe367
uwe367 uwe367 ist offline
Affinity Mod
 
Registriert seit: 03/2006
Ort: Nähe Koblenz am Rhein
Beiträge: 3.616
OS: WIN 10 x64
Kreativ-Software: Affinity Photo, Designer & Publisher, PSE 2024, CC
uwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könner
Hallo dertobinator und willkommen im

Du willst also daß sich der Hintergrund dynamisch mit der Seite verändert?
Das wird nicht funktionieren da der Hintergrund ein statisches Element ist welches sich, günstigstenfalls, dem Bildschirm des Betrachters automatisch anpasst.

Der Hintergrund wird so definiert:
HTML-Code:
body {
background: #000000; /*Beispiel einer Hintergrundfarbe, hier schwarz*/
....
}
Man kann zwar eine fixe Höhe in Pixel oder Prozent angeben, aber daß sich der Hintergrund jeder Unterseite automatisch anpasst ist meines Wissens nach nicht möglich.

Hier würde ich einen Verlauf als Hintergrund nehmen. Mit web gradient kannst du dir CSS generierte Verläufe erstellen und diese in deine Seite einbauen, allerdings werden web gradients von älteren Browsern nicht unterstützt so daß du hier einen browserabhängien Fallback integrieren müßtest.

Der CSS Code für einen web farbverlauf sieht so aus:

Code:
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Und hier ist auch schon der Fallback für alte Browser integriert.

Kurz und kanpp.. so wie du dir das vorstellst wird das meiner Meinung nach nicht machbar sein es sei denn daß es mittlerweile Techniken gibt die mir noch unbekannt sind.
__________________
https://www.photoshop-cafe.de/bildupload/pics/sonst/1257414271_themen-bewerten.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Linkliste.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_tutorials.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Signaturleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Forenleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Stock-galerie.png

Du findest einen Beitrag gut oder dir konnte geholfen werden? Dann klicke auf dieses Symbol

uwe367@pixabay | My Homepage | Uwe367@Adobe Stock

Geändert von uwe367 (08.09.13 um 19:46 Uhr).
Mit Zitat antworten
  #3  
Alt 09.09.13, 00:00
dertobinator dertobinator ist offline
frisch dabei
 
Registriert seit: 09/2013
Ort: Hamburg
Beiträge: 2
OS: Windows 8
Kreativ-Software: CS6
dertobinator geht den richtigen Weg
Hallo, Uwe!

Danke für Deine Antwort.
Ich dachte, sowas könnte über ein gekacheltes Muster-gif in der stylesheet.css funzen. weiß aber nur, wie das mit Mustern ohne Verlauf funktioniert.

Gruß

Tobi
Mit Zitat antworten
  #4  
Alt 09.09.13, 07:02
Benutzerbild von uwe367
uwe367 uwe367 ist offline
Affinity Mod
 
Registriert seit: 03/2006
Ort: Nähe Koblenz am Rhein
Beiträge: 3.616
OS: WIN 10 x64
Kreativ-Software: Affinity Photo, Designer & Publisher, PSE 2024, CC
uwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könner
Ein gekacheltes gif mit einem Verlauf wird sich wiederholen, aber sich nicht dynamisch ausdehnen. Wenn du z.B. ein gif mit 300x300px Größe hast, so wird es sich über den gesamten Hintergrund immer wieder wiederholen und wie das im Endeffekt aussieht muß ich sicher nicht erläutern.

Ich habe nochmal über die Geschichte mit den web-gradients nachgedacht. Rein theoretisch könnte das funktionieren so wie du dir das vorstellst da es sich hierbei ja nicht um ein fest vorgegebenes Bild handelt. Allerdings werden inkompatibele Browser nur die Farbe aus dem Fallback darstellen. Aber wie gesagt.. mach dir mal noch keine allzugroßen Hoffnungen. Das ist graue Theorie.

Ich habe bisher, eben wegen dieser Inkompatiblität, noch nicht damit gearbeitet, aber ich werde es mal ausprobieren. Kann aber etwas dauern.
__________________
https://www.photoshop-cafe.de/bildupload/pics/sonst/1257414271_themen-bewerten.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Linkliste.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_tutorials.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Signaturleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Forenleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Stock-galerie.png

Du findest einen Beitrag gut oder dir konnte geholfen werden? Dann klicke auf dieses Symbol

uwe367@pixabay | My Homepage | Uwe367@Adobe Stock

Geändert von uwe367 (09.09.13 um 07:26 Uhr).
Mit Zitat antworten
  #5  
Alt 09.09.13, 14:41
Benutzerbild von Jenny
Jenny Jenny ist offline
PSC-Teufelchen
 
Registriert seit: 07/2008
Beiträge: 5.634
OS: Windows 11
Kreativ-Software: Creative Cloud
Jenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im ForumJenny wohnt hier im Forum
Hallo!

Per Script kann man auch in den älteren IEs CSS3 implementieren, z.B. mit dem Modernizr. Dort kannst du auch genau die Features angeben, die du benötigst, so dass das Script entsprechend schlank bleibt. Dann wird's nur noch problematisch bei deaktiviertem Javascript. Aber der Anteil der User, die weder Javascript noch einen halbwegs modernen Browser haben, dürfte verschwindend gering sein und somit vernachlässigbar.
__________________
Gruß Jenny
_____________________
Live long and prosper!
Mit Zitat antworten
  #6  
Alt 09.09.13, 18:27
Benutzerbild von uwe367
uwe367 uwe367 ist offline
Affinity Mod
 
Registriert seit: 03/2006
Ort: Nähe Koblenz am Rhein
Beiträge: 3.616
OS: WIN 10 x64
Kreativ-Software: Affinity Photo, Designer & Publisher, PSE 2024, CC
uwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könneruwe367 ist ein brillianter Kenner und Könner
Zitat:
Zitat von Jenny Beitrag anzeigen
Hallo!
Aber der Anteil der User, die weder Javascript noch einen halbwegs modernen Browser haben, dürfte verschwindend gering sein und somit vernachlässigbar.
Wenn du heutzutage Javascript deaktivierst kannst du auch gleich CSS und HTML deaktivieren denn moderne Websites haben meist jQuery, Mootools, Bootstrap oder ein anderes Javascript Framework integriert, wobei Bootstrap nicht nur Javascript ist.
__________________
https://www.photoshop-cafe.de/bildupload/pics/sonst/1257414271_themen-bewerten.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Linkliste.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_tutorials.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Signaturleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Forenleitfaden.pnghttps://www.photoshop-cafe.de/bildupload/pics/sonst/1257413726_Stock-galerie.png

Du findest einen Beitrag gut oder dir konnte geholfen werden? Dann klicke auf dieses Symbol

uwe367@pixabay | My Homepage | Uwe367@Adobe Stock
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe! Kaffetrinker96 Hilfestellung, Tipps und Tricks 9 05.10.10 01:12
Web-Design Website Darstellung fehlerhaft,bräuchte da mal hilfe. Newby Hilfestellung, Tipps und Tricks 11 12.06.10 13:02
Website Hilfe tuffenuff Hilfestellung, Tipps und Tricks 4 04.03.09 00:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:59 Uhr.

Impressum

Kontakt      Photoshop-Cafe      Archiv     Impressum     Nach oben

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
©2005-2020 photoshop-cafe.de

Seite wurde generiert in 0,05594 Sekunden mit 13 Queries