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.

<label> Etikett

CSS - Pflichtfeld hervorheben

PHP - CSRF-Token für Formulare erstellen

JavaScript - Element ein- und ausblenden

MySQL - Daten aus zwei DB-Tabellen auslesen

Schlechte Navigation
Eine gute Navigation ist sehr wichtig. Die Links sollten verständlich und übersichtlich angeordnet sein. Verwendet man Bilder als Navigationslinks, sollte man auf keinen Fall den alternativen Text vergessen, der angezeigt wird, wenn die Grafiken noch nicht geladen sind, oder der Besucher Grafiken deaktiviert hat. Der beste Inhalt nützt nichts, wenn sich die Besucher nicht zurechtfinden.
Verwenden Sie deutliche Kennzeichen, damit man die Seiten voneinander unterscheiden kann. Benutzen Sie einfache und leicht merkende Namen, zur Verbesserung der Navigation.
Der Besucher sollte nicht nach 15minütigem stöbern auf der Homepage das Gefühl haben, sich im Kreis zu bewegen.