Antworten auf deine Fragen:
Neues Thema erstellen

Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite

Ombra

Nicht mehr ganz neu hier

Hallo zusammen,

Ich habe auf meiner Webseite ein Hintergrundbild. Ich möchte einzelne selbst-gezeichnete Ornamente in transparent/weiß über dem Hintergrundbild zufällig verteilen (wenn es geht sogar immer wieder neu-zufällig).

Weiß jemand wie das geht?

Danke im Voraus
 

Jormungand

VonAllemEtwas

Eine zufällige Verteilung geht da nicht. Das müsste schon in z.B. JavaScript umgesetzt werden.
Wenn du die aber selbst platzierst, kannst du z.B. einige absolute Container erstellen und hinter den Text legen.
 

Myhar

Hat es drauf

Nein, aufgeräumter ist es, wenn man nicht unnötige HTML-Elemente verwendet.
Man kann ohne Probleme mehrere Hintergrundbilder für ein Element definieren, die überlagern sich dann natürlich auch dementsprechend. Damit kann man das angesprochene Problem lösen, abgesehen vom Zufallselement, das muss, wie schon angesprochen, mit Javascript umgesetzt werden. Mehrere (leere) Elemente sind hier nicht zu empfehlen.
 

pixelmaker

jeden Tag neu hier

abgesehen vom Zufallselement,

Ich bin etwas raus aus dem Thema, weil ich schon lange nichts mehr mit css gemacht habe. Zu dem Thema fällt mir ein das man mehrere Bilder mit Transparenzen übereinander positionieren kann, das wären die Ornamente (z-index: xxx).
Man kann diese Bilder mit css verschieben, transform: translate(X-Wert, Y-Wert);
Bei Transformationen gibt es den Wert random (Zufall)
img:hover {
-webkit-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
-moz-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
}


Man müsste also mit random Zufallswerte für die Koordinaten erzeugen können die die übereinander geschichteten Bilder bei jedem pageload neu anordnen. Das geht also nur mit CSS ohne ein Javascript.
Mal abgesehen davon ob es sinnvoll ist oder nicht.


grüße
 

Aelfry

Web Developer

Bei Transformationen gibt es den Wert random (Zufall)
img:hover {
-webkit-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
-moz-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
}


Man müsste also mit random Zufallswerte für die Koordinaten erzeugen können die die übereinander geschichteten Bilder bei jedem pageload neu anordnen. Das geht also nur mit CSS ohne ein Javascript.

Wie kommst du denn auf den Unsinn?! Hast du deinen code vorher ausprobiert?

Zufallswerte nur über CSS sind nicht möglich. Funktioniert nur über etwas wie JavaScript oder PHP.
(alternativ sei noch ein präprozessor wie sass erwähnt, wobei man damit nicht beim jedem pagereload neue Werte hat)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben