Inhaltsverzeichnis

Heute habe ich mal wieder ein CSS Tutorial für euch aufgenommen und zwar möchte ich euch zeigen, wie man auf eine sehr einfache Weise bis zu 3 Rahmen um ein Bild legen kann und so so positionieren kann, dass es sehr kreativ aussieht und auffällt.

Es ist gar nicht mal so schwer, wir arbeiten heute mal mit :before und :after Befehle.

Video

HTML

1
2
3
4
<div class="container">
    <div class="about-img">
        <img src="generated-photos-child.jpg"></div>
</div>

CSS

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
body {
        background: black;
        margin: 50px;
        padding: 0px;
    }
     .about-img {
        position: absolute;
        border: red 3px solid;
 
    }
 
      .about-img:before {
 
        position: absolute;
        content: '';
        right: -50px;
        top: 20px;
        border: 10px solid rgba(255,255,255,0.6);
        width: 100%;
        height: 100%
    }
 
          .about-img:after {
 
        position: absolute;
        content: '';
        right: -90px;
        top: 40px;
        border: 10px solid rgba(255,0,255,0.6);
        width: 100%;
        height: 100%
    }