Lasst uns einen Farbverlaufs Generator programmieren (HTML, CSS & Javascript Tutorial)

von | Mai 24, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS3 - HTML - Javascript - Webdesign

Wer regelmässig Webseiten macht der weiss ziemlich gut, dass grosse einfache Farbflächen sehr schnell langweilig wirken und aus diesem Grund verwendet man gerne einen Farbverlauf. Leider kann man sich so einen Farbverlauf nur schwer vorstellen – ich mag sowas am liebsten direkt visuell. Aus diesem Grund bauen wir heute gemeinsam einen Farbverlaufs-Generator. Mit dieser kleinen Übung lernen wir nämlich nicht nur neue HTML und CSS Skills sondern vergrössern unser Javascript Wissen ebenfalls.

Video

HTML

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
<div class="container">
        <div class="box"></div>
            <div class="row options">
                <div class="column direction">
                    <p>Verlauf:</p>
                    <div class="select-box">
                        <select>
                            <option value="to top">Top</option>
                            <option value="to right top">Right top</option>
                            <option value="to right">Right</option>
                            <option value="to right bottom">Right Bottom</option>
                            <option value="to bottom">Bottom</option>
                            <option value="to left bottom">Left Bottom</option>
                            <option value="to left">Left</option>
                            <option value="to left top" selected >Left Top</option>
                        </select>
                    </div>
                </div>
                <div class="column colors">
                    <p>Farben:</p>
                        <div class="inputs">
                            <input type="color" name="" id="" value="#fa2929">
                            <input type="color" name="" id="" value="#4d58f9">
                        </div>
                </div>
            </div>
            <textarea class="row" disabled></textarea>
            <div class="row buttons">
                <button class="copy">Kopieren</button>
            </div>
 
        </div>
 
    </div>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #00509d;
}
 
.container {
  width: 450px;
  padding: 25px;
  border-radius: 7px;
  background: #fff;
}
 
.container .box {
  width: 100%;
  height: 220px;
  background: linear-gradient(to left top, #fa2929, #4d58f9);
  border-radius: 7px;
}
 
.container .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}
 
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
 
.options p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
 
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}
 
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8rem;
}
 
.options .colors {
  margin-left: 60px;
}
 
.colors input {
  height: 40px;
  width: calc(100% / 2 - 20px);
}
 
.colors input:last-child {
  margin-left: 10px;
}
 
.container textarea {
  width: 100%;
  resize: none;
  font-size: 1rem;
  color: #333;
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #ccc;
}
 
.buttons button {
  padding: 15px 0;
  font-size: 1rem;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 5px;
  background: #fff;
  color: #000;
  width: 100%;
}
 
.buttons button:hover {
  background: #6c757d;
  color: #fff;
  border: 1px solid #ccc;
}

Javascript

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
const box = document.querySelector(".box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const copyButton = document.querySelector(".copy");
 
const generateGradient = () => {
  const gradient = `linear-gradient( ${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
  box.style.background = gradient;
  textarea.value = `background: ${gradient}`;
};
 
const copyCode = () => {
  navigator.clipboard.writeText(textarea.value);
  copyButton.innerText = "Kopiert";
  setTimeout(() => (copyButton.innerText = "Kopieren"), 1600);
};
 
colorInputs.forEach((input) => {
  input.addEventListener("input", generateGradient);
});
 
selectMenu.addEventListener("change", generateGradient);
 
copyButton.addEventListener("click", copyCode);

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





0 Kommentare

Einen Kommentar abschicken

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