Webseiten¶

Einleitung¶

Diese Seite soll Anregungen für mögliche Webseitenideen geben.

Animierter Text¶

Folgendes Beispiel verwendet CSS und HTML, um einen Text zu animieren.

phlpps.de

Erläuterung

In einem div-Container wird ein weiterer als Wrapper eingesetzt, um über drei span Elemente die Animation vorzugeben, welche in CSS definiert wird.

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <!--<div class="navbar"><span>Neon Text Effekt</span></div>-->
        <div class="wrapper">
            <div class="neon-wrapper">
                <span class="txt">animation</span>
                <span class="gradient"></span>
                <span class="dodge"></span>
            </div>
        </div>
    </body>
</html>

Über die unten stehenden Eigenschaften wird das Verhalten des Textvisualisierung gesteuert. Insbesondere .gradient und .dodge sind hier wichtig. Über @keyframes wird die Animation gesteuert.

CSS

.wrapper {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.neon-wrapper {
    display: inline-flex;
    filter: brightness(200%);
    overflow: hidden;
}

.txt {
    color: #ffffff;
    background: #000000;
    font-size: 80px;
    font-weight: bold;
    font-family: Arial;
    text-transform: uppercase;
}

.txt::before{
    content: 'phlpps.de';
    position: absolute;
    mix-blend-mode: difference;
    filter: blur(3px);
}

.gradient{
    background: linear-gradient(85.98486251415875deg, 
                rgb(56, 3, 13) 25.520833333333336%,
                rgb(56, 3, 13) 25.520833333333336%,
                rgb(1, 46, 11) 79.68749999999999%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}

.dodge{
    background: radial-gradient(circle, white, black) center / 25% 25%;
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    mix-blend-mode: color-dodge;
    animation: dodge-area 3s linear infinite;
}

@keyframes dodge-area {
    to{
        transform: translate(50%, 50%);
    }
}

Eingebundenes Video¶

Unter dem aufgeführten Link wird beispielhaft gezeigt, wie man mit HTML und CSS einen coolen Effekt erzielen kann, indem man bei einer transparenten Schrift im Hintergrund ein Video laufen lässt.

Neben der Videoquelle wird in der html Datei noch ein svg Element definiert.

Eingebundenes Video

Hinweis

Das Beispiel funktioniert nicht mit dem Firefox!

HTML

<head>
    ...
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <video autoplay playsinline muted loop preload>
        <source src="vid.mp4">

    </video>
    <svg height="20%" width="100%">
        <defs>
            <mask id="mask" x="0" y="0" height="100%" width="100%">
                <rect x="0" y="0" height="100%" width="100%" />
                <text x="50%" y="50%" fill="red" text-anchor="middle">phlpps.de</text>
            </mask>
        </defs>
        <rect x="0" y="0" height="100%" width="100%" />
    </svg>
</body>

CSS

body {
    height: 100vh;
    margin: 0;
}

svg {
    font-family: 'Montserrat';
    font-size: 8em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 1s font-size;

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

video {
    width: 100%;
    height: 100%;
}

svg rect {
    fill: white;
    mask: url(#mask);
}

svg > rect {
    fill: black;
}

@media screen and (max-width: 1200px){
    svg{
        font-size: 4em;
    }
}