Anzeige

Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite

Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite | PSD-Tutorials.de

Erstellt von Ombra, 16.10.2016.

  1. Ombra

    Ombra Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    22.12.2012
    Beiträge:
    193
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, Inkscape
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    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
     
    #1      
  2. lachender_engel

    lachender_engel Aktives Mitglied

    Dabei seit:
    23.03.2009
    Beiträge:
    1.280
    Geschlecht:
    männlich
    Ort:
    Die Welt
    Software:
    Adobe Creative Suite CS6 Design & Web, Notepad++, IrfanView, Jetbrains PhpStorm
    Kameratyp:
    Nikon D7200
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    Bestimmt!
     
    #2      
    gutedel09 gefällt das.
  3. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    737
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    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.
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    Und wozu braucht man dafür container?
     
    #4      
  5. Jormungand

    Jormungand VonAllemEtwas

    Dabei seit:
    23.09.2008
    Beiträge:
    737
    Geschlecht:
    männlich
    Software:
    Adobe Creative Cloud, C4D R 11.5
    Kameratyp:
    Nikon D5000
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    Braucht man nicht. Aber es ist aufgeräumter.
     
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    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.
     
    #6      
  7. pixelmaker

    pixelmaker jeden Tag neu hier

    Dabei seit:
    20.03.2009
    Beiträge:
    843
    Geschlecht:
    männlich
    Ort:
    Callenberg, bei Hohenstein-Er
    Software:
    CC2017, C4D, Blender, diverse CAD, CamBam, mac OS X 10.11.6
    Kameratyp:
    DSLR Nikon
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    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
     
    #7      
    Enigmon gefällt das.
  8. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite
    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)
     
    #8      
x
×
×