CSS - Diagonaler Streifen-Effekt
Was ist Lorem Ipsum?
Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.
<style>
/* Diagonaler Streifen-Effekt */
.box .content {
height: 100%;
display: Flex;
align-items: Center;
justify-content: Center;
background-color: Pink;
}
.box {
width: 300px;
height: 300px;
box-sizing: Border-Box;
padding: 15px;
position: Relative;
overflow: Hidden;
}
.box::before {
content: '';
position: Absolute;
width: 150%;
height: 150%;
background: repeating-linear-gradient(White 0%, White 7.5px, #00BFFF 7.5px, #00BFFF 15px,
White 15px, White 22.5px, #00BFFF 22.5px, #00BFFF 30px);
transform: translateX(-20%) translateY(-20%) rotate(-135deg);
animation: animate 20s linear infinite;
}
.box .content {
position: Relative;
background-color: White;
flex-direction: Column;
box-sizing: Border-Box;
padding: 30px;
text-align: Center;
font-family: Sans-Serif;
z-index: 2;
}
.box,
.box .content {
box-shadow: 0 0 2px #00BFFF, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
border-radius: 10px;
}
.box .content div {
color: #00BFFF;
}
.box .content p {
color: Dimgray;
}
@keyframes animate {
from {
background-position: 0;
}
to {
background-position: 0 450px;
}
}
</style>
<div class="box">
<div class="content">
<div>Was ist Lorem Ipsum?</div>
<p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam.
Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.</p>
</div>
</div>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<label> Etikett
PHP - CSRF-Token für Formulare erstellen