Cooler CSS Rand mit einem Farbverlauf

von | Nov 25, 2019 | Mein Youtube Kanal | 2 Kommentare

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;
    }

2 Kommentare

  1. Martin Steiner

    Super Bild gemacht! Blog Post Image!
    Super!!!!!

    Antworten
    • Eric-Oliver Mächler

      DANKE martin – es freut mich immer wenn meine Blogbeiträge oder eben css anleitungen bei den lesern ankommt 🙂

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.