Mit einem Dropdown Menu den Hintergrund wechseln

von | Mai 11, 2022 | Design | 0 Kommentare

Schlagwörter: CSS - fff - HTML - Javascript

Inhaltsverzeichnis

Hin und wieder liebe ich verrückte Ideen und heute möchte ich euch mal etwas ganz cooles zeigen. Ihr habt in Apps und Programme sicher den sogenannten DarkMode schon gesehen. Da kann man mit einem Knopfdruck das Design verdunkeln.

Wie wäre es wenn ihr sowas – oder ähnliche – auch mit eurer Webseite machen könntet? Ja sowas kann man wirklich machen.

Hier zeige ich euch wie ihr mit einem Dropdown Button den Hintergrund durch eure Webseitenbesucher verändern lassen könnt. Klingt das nicht cool. Jeder Besucher kann also seine Farbe aussuchen und so ein klein wenig ein inneres Kind rauslassen.

Ich finde das eine spannende Idee – diese Idee lässt sich dann auch mit anderen Effekten anpassen bis hin zu einem echten grossen Darkmode / Stylewechsel.

Video

HTML

1
2
3
4
5
6
7
8
9
10
    <section>
        <div class="bg"></div>
        <select class="auswahl" onChange="farbenwechsel(this)">
            <option value="#A42400">Rot</option>
            <option value="#A4F400">Grün</option>
            <option value="#07008F">Blau</option>
            <option value="#D8FF20">Gelb</option>
            <option value="#000000">Schwarz</option>
        </select>
    </section>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    * {
        margin: 0;
        padding: 0;
        box-sizing:  border-box;
    }
 
    section {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #A42400;
    }
 
    .auswahl {
        position: relative;
        padding: 10px;
        border: none;
        outline: none;
        width: 200px;
        border-radius: 4px;
        border-right: 20px solid #fff;
        box-shadow: 0 15px 25px rgba(0,0,0,0.1);
    }

Javascript

1
2
3
4
5
    function farbenwechsel(gesuchteFarben) {
        let bg = document.querySelector('.bg');
        let auswahl = gesuchteFarben.value;
        bg.style.background = auswahl;
    }

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert