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 Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<ruby> Ruby Anmerkung

CSS - Tabellenzeilen bei :hover hervorheben

PHP - Zeitgesteuerte Wechselbilder im Monatsrythmus

JavaScript - Schieberegler für Bilder

MySQL - Eintrag in der Tabelle löschen