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.

<col> Tabellenspalten vordefinieren

CSS - Mit ::selection markierten Text hervorheben

PHP - Komma separierte Werte zusammenzählen

JavaScript - Externe Datei per AJAX zeitabhängig aktualisieren

MySQL - Datensatz Wert erhöhen

Seriöses Design
Durch das Design entscheidet der Besucher über die Seriosität und Qualität der Seite. Mit einem guten Design haben Sie schnell Pluspunkte bei den Besuchern erzielt, ebenso können Sie damit Ihre Besucher verärgern, und sie somit zu keinem weiteren Besuch bewegen können.