Den im Generator erzeugten CSS-Code könnt ihr entweder als Klasse oder als Inline-Style direkt am jeweiligen Element verwenden. Der Name einer CSS‑Klasse ist beliebig; hier habe ich sie im Generator "deine-box" genannt → class="deine-box"
Unten ein Screenshot vom Box-Shadow Generator.
Ihr könnt die Klasse natürlich umbenennen - achtet dabei darauf, dass diese nur Buchstaben, Ziffern und Bindestriche enthält. Eine CSS Klasse darf nicht mit einer Ziffer beginnen und die Groß-/Kleinschreibung muss beachtet werden.
Hier verwende ich die im Generator generierte CSS-Klasse: class="deine-box"
.deine-box {
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
}
Ich habe die CSS‑Klasse dem <img> Element zugewiesen und im untenstehenden Screenshot markiert.
Extra CSS - Bild
Im Screenshot unten seht ihr außerdem meine :hover‑Klasse mit der transform‑Eigenschaft zur Vergrößerung; sie steht hier jedoch nicht im Zusammenhang mit meinem Box-Shadow‑Generator.
Unten findet ihr die vollständige CSS‑Klasse inklusive der transform‑Eigenschaft zur Vergrößerung, falls jemand sie verwenden möchte:
.deine-box {
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
transition: all 0.5s linear;
}
.deine-box:hover {
box-shadow: 25px 25px 25px 0px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
cursor: pointer;
}
Extra CSS - Beschriftung
Unten findet ihr die vollständige CSS‑Klasse inklusive der keyframes‑Eigenschaft zum Pulsieren der Beschriftung "Box-Shadow":
Aufruf der CSS-Klasse über ein <span> Tag:
<span class="pulsierende-box"><b>Box-Shadow</b></span>
CSS-Klasse:
.pulsierende-box {
display: inline-block;
box-shadow: 5px 5px 20px 5px rgba(16, 72, 173, 0.3);
padding: 0px 20px;
border-radius: 20px;
transition: box-shadow 0.3s ease-in-out;
}
.pulsierende-box:hover {
animation: pulsieren 1s infinite;
cursor: pointer;
}
@keyframes pulsieren {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
