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.

<q> Logische Auszeichnung

CSS - Datum als Kalenderblatt darstellen

PHP - Einfache Bannerrotation

JavaScript - Datum und Uhrzeit als Zeichenkette anzeigen

MySQL - Flexible Insert-Funktion

Alternativen Text bei Grafiken vergessen
Geben Sie bei jeder Grafik einen alternativen Text an. Dies können Sie mit dem Zusatz alt="IhrText". Dieser Text wird immer dann angezeigt, wenn die Grafik noch nicht geladen wurde oder der Besucher Grafiken deaktiviert hat. Angezeigt wird er auch, wenn der Besucher mit dem Mauszeiger über die Grafik fährt.Vor allem behinderte Menschen sind auf den alternativen Text angewiesen und auch Suchmaschinen durchsuchen den Text nach Stichworten. Grafiken ohne wirklichen Nutzwert sollten Sie mit alt="" versehen. Vorsicht ist bei manchen Webseite-Editoren geboten, die automatisch völlig sinnlose Alternativtexte einfügen.