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 {
 
height100%;
 
displayFlex;
 
align-itemsCenter;
 
justify-contentCenter;
 
background-colorPink;
}

.
box {
 
width300px;
 
height300px;
 
box-sizingBorder-Box;
 
padding15px;
 
positionRelative;
 
overflowHidden;
}

.
box::before {
 
content'';
 
positionAbsolute;
 
width150%;
 
height150%;
 
backgroundrepeating-linear-gradient(White 0%, White 7.5px#00BFFF 7.5px#00BFFF 15px,
 
White 15pxWhite 22.5px#00BFFF 22.5px#00BFFF 30px);
 
transformtranslateX(-20%) translateY(-20%) rotate(-135deg);
 
animationanimate 20s linear infinite;
}

.
box .content {
 
positionRelative;
 
background-colorWhite;
 
flex-directionColumn;
 
box-sizingBorder-Box;
 
padding30px;
 
text-alignCenter;
 
font-familySans-Serif;
 
z-index2;
}

.
box,
.
box .content {
 
box-shadow0 0 2px #00BFFF0 0 5px rgba(0001), inset 0 0 5px rgba(0001);
 
border-radius10px;
}

.
box .content div {
 
color#00BFFF;
}

.
box .content p {
 
colorDimgray;
}

@
keyframes animate {
 
from {
  
background-position0;
 }
 
to {
  
background-position0 450px;
 }
}
</
style>

<
div class="box">
 <
div class="content">
 <
div>Was ist Lorem Ipsum?</div>
 <
p>Mauris volutpat risus quis nisi tempus hendreritNullam nisi urnasuscipit quis risus sedcongue congue quam
 
Morbi sit amet suscipit exVivamus 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.

<link> Logische Beziehung

CSS - Text mit gestreiftem Hintergrund

PHP - Ein Wort in einem Text markieren

JavaScript - Geolocation API - Bei Knopfdruck Koordianten ausgeben

MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben