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;
} |
Super Bild gemacht! Blog Post Image!
Super!!!!!
DANKE martin – es freut mich immer wenn meine Blogbeiträge oder eben css anleitungen bei den lesern ankommt 🙂