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% } |
0 Kommentare