Im Webdesign gibt es Elemente die man immer wieder brauchen kann, dazu gehört zum Beispiel auch die Schattenfunktion. Mit einem gut platzierten Schatteneffekt kann man das Auge des Besuchers an eine bestimmte Stelle fesseln und seine Aufmerksamkeit so gezielt steuern.
Leider ist so ein Schatteneffekt nicht leicht sich vorzustellen und aus diesem Grund werde ich heute mit euch gemeinsam so einen Schattengenerator programmieren. Damit kann man sehr schnell einen Schatteneffekt sich ausdenken und sieht direkt Live auf einer Webseite wie sowas am Schluss aussehen würde.
Wie immer versuche ich im Video euch über die einzelnen Elemente und Klassen aufzuklären und aus diesem Grund wird dieses Video ein wenig länger.
Übrigens ich werde hier im Blog einen Bereich erstellen, wo ihr alle Generatoren die ich in nächster Zeit mit euch zusammen programmiere, direkt auch austesten könnt.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="container">
<h2>Schatten-Generator</h2>
<div class="box">
<label>Offset X</label>
<input type="range" class="offset-x" min="0" max="100" value="2" />
<label>Offset Y</label>
<input type="range" class="offset-y" min="0" max="100" value="2" />
<label>Blur Radius</label>
<input type="range" class="blur-radius" min="0" max="100" value="2" />
<label>Grösse</label>
<input type="range" class="blur-spread" min="0" max="100" value="2" />
<label>Color</label>
<input type="color" class="color" value="#000000" />
<label>Seitenhintergrund</label>
<input type="color" class="bgcolor" value="#d4a373" />
<input type="text" class="css-wert" onclick="this.select()" readonly />
</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 | * {
margin: 0;
padding: 0;
}
body {
background-color: #d4a373;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
text-align: center;
color: #fefae0;
}
.box {
width: 300px;
text-align: center;
padding: 10px;
margin: 30px;
border: 1px #000 solid;
background-color: #faedcd;
}
.box input {
display: block;
margin: 10px 0;
width: 100%;
} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | const box = document.querySelector(".box");
const x = document.querySelector(".offset-x");
const y = document.querySelector(".offset-y");
const radius = document.querySelector(".blur-radius");
const spread = document.querySelector(".blur-spread");
const color = document.querySelector(".color");
const csswert = document.querySelector(".css-wert");
const bgcolor = document.querySelector(".bgcolor");
function updateBoxSchatten() {
const resultat = `${x.value}px ${y.value}px ${radius.value}px ${spread.value}px ${color.value}`;
csswert.value = resultat;
box.style.boxShadow = resultat;
document.body.style.backgroundColor = bgcolor.value;
}
[x, y, radius, spread, color, bgcolor].forEach((element) => {
element.oninput = updateBoxSchatten;
});
updateBoxSchatten(); |
0 Kommentare