Simple Glow-Box

<- Zurück

In diesem Artikel habe ich dir 2 einfache Div-Container mit Glow-Effekt zusammengestellt.
Hierbei handelt es sich rein um HTML und CSS Container.
Achte darauf, dass sich die Div-Weite an dein Div-Gerüst anpasst (display:inline-block;). Wenn du die Div-Weite manuell festlegen möchtest, musst du „display:inline-block;“ gegen „width: [pixel]px;“ ersetzen.

Überschrift

Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.

Zum Code

Überschrift

Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.

Zum Code

Glow-Box 1:

HTML:

<div class="div-1">
    <b><u>Überschrift</u></b>
    <p>
    Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.
    </p>
    <p>
    <a href="#div-1">
        <div class="div-1-button">
        Zum Code
        </div>
    </a>
    </p>
</div>

CSS:

.div-1 {
    display:inline-block;
    padding: 10px;
    -webkit-box-shadow:0px 0px 75px 0px rgba(45,255,196,0.9);
    -moz-box-shadow: 0px 0px 75px 0px rgba(45,255,196,0.9);
    box-shadow: 0px 0px 75px 0px rgba(45,255,196,0.9);
}
.div-1-button {
    background-color: #171818;
    display:inline-block;
    padding: 5px;
    transition: background-color .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
}
.div-1-button:hover {
    background-color: rgba(45,255,196,0.9);
    -webkit-box-shadow:0px 0px 20px 0px rgba(45,255,196,0.9);
    -moz-box-shadow: 0px 0px 20px 0px rgba(45,255,196,0.9);
    box-shadow: 0px 0px 20px 0px rgba(45,255,196,0.9);
}

Glow-Box 2:

HTML:

<div class="div-2">
        <img class="img-2" src="https://ju-development.de/wp-content/uploads/2025/01/Berg-7.png">
    <p>
    <b><u>Überschrift</u></b></p>
    <p>
    Hier könnte der Inhalt deines Div-Containers stehen. Versuch es doch gerne aus. Zum Code gelangst du über die nachfolgende Schaltfläche.
    </p>
    <p>
    <a href="#div-2">
        <div class="div-2-button">
        Zum Code
        </div>
    </a>
    </p>
</div>

CSS:

.div-2 {
    display:inline-block;
    padding: 10px;
    -webkit-box-shadow:0px 0px 75px 0px rgba(45,100,196,0.9);
    -moz-box-shadow: 0px 0px 75px 0px rgba(45,100,196,0.9);
    box-shadow: 0px 0px 75px 0px rgba(45,100,196,0.9);
}
.div-2-button {
    background-color: #171818;
    display:inline-block;
    padding: 5px;
    transition: background-color .3s ease-in-out;
    transition: box-shadow .3s ease-in-out
}
.div-2-button:hover {
    background-color: rgba(45,100,196,0.9);
    -webkit-box-shadow:0px 0px 20px 0px rgba(45,100,196,0.9);
    -moz-box-shadow: 0px 0px 20px 0px rgba(45,100,196,0.9);
    box-shadow: 0px 0px 20px 0px rgba(45,100,196,0.9);
}
.img-2 {
   width: 100%;
   height: auto;
}

<- Zurück