Im heutigen Video zeige ich euch, wie man einen coolen Rand machen kann. Normalerweise ist ein Rand nur einfarbig und sehr einfach mit border-color zu erstellen, heute aber zeige ich euch wie man einen Rand macht der ein Farbverlauf hat und das ist ein wenig komplizierter.

Video Anleitung

Quellcode

Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂

Der HTML Code

1
2
3
4
5
6
<div class="box">
    <div class="content">
        <h1>Titel Text</h1>
        <p>Lorem ipsum dolor sit amet, ....aliquyam erat.</p>
    </div>
</div>

Der CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    .box {
        position: relative;
        width: 300px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #060c21;
    }
    .box:before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: #fff;
        z-index: -1;
    }
    .box:after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: #fff;
        z-index: -2;
        filter:blur(40px);
    }
    .box:before,
    .box:after
    {
        background: linear-gradient(120deg,#89ff00,#ed13d6,#00bcd4);
    }
    .content {
        padding: 20px;
        box-sizing: border-box;
        color: #fff;
    }