WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Mit einem Dropdown Menu den Hintergrund wechseln

von | Mai 11, 2022 | Design | 0 Kommentare

Schlagwörter: CSS - fff - HTML - Javascript

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

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