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

von | Mai 24, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS3 - HTML - Javascript - Webdesign

Inhaltsverzeichnis

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);

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

Translate:

Webinare

DIVI Theme

Hosting