Informationen zum Aufbau der Seite
Mediathek Bilder komplett anzeigen
realisiert mit Plugin Code Snippets
Individuelles CSS
- Weicher Rand Bilder
- Unterstreichung Links
- Typoeffekt Schreibmaschine
Kopie CSS
/* Bider mit transparenten rand */
.weicherrand,
.wp-block-post-featured-image {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
/* Kombiniert die beiden Masken, damit nur die Überschneidung sichtbar bleibt */
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* Typoanimation Schreibmaschine /
.schreibmaschine {
/ display: inline-block; */
overflow: hidden;
border-right: 3px solid #00ff00;
white-space: nowrap;
/* Kombinierte Animationen mit fester Anzahl an Durchläufen /
animation:
typing 5s steps(30, end) forwards, / Läuft 1x ab und bleibt bei 100% stehen /
blink-caret 0.75s step-end 5 forwards; / Blimkt genau 5 Mal und hört dann auf */
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #00ff00; }
}
/* Link Unterstreichung /
a {
text-decoration: none;
border-bottom: 0.05em dotted ;
padding-bottom: 0.17em;
}
a:hover {
text-decoration: none;
border-bottom: 0.2em dotted ;
padding-bottom: 0.08em;
}
Sicherheitsmaßnahmen
Upload-Ordner mit htaccess vor Skripten geschützt:
<FilesMatch „.(php|php3|php4|phtml)$“>
Deny from all