Hin und wieder will man eine Text Box optisch ein wenig verschönern und vielleicht sogar die Aufmerksamkeit der Leser auf diese Box lenken. Um dies zu erreichen kann mn so Schleifen auch Ribbons genannt verwenden.
Wie man so eine Schleife Ribbon über ein Bild legt habe ich ja schon mal gezeigt (DIVI: Ribbon / Bändchen über Bilder legen [DIVI Anleitung / WordPress / CSS]).
Es sollte keine Überraschung sein, aber so ein Ribbon über einen Text zu legen ist nicht viel komplizierter und dann legen wir gleich mal los
Video
HTML
1 2 3 4 5 | <div class="card"> <span></span> <h2>Hello</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium est quia, autem nesciunt nemo aut fugiat ad ipsam repellat quam!</p> </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 33 34 35 36 37 38 39 40 41 42 43 44 45 | .card { position: relative; width: 300px; height: 400px; background: #fff; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); } h2 { text-align: center; padding-top: 50px; } p{ padding: 30px; } .card span { position: absolute; /* background: red; */ top: -10px; left: -10px; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .card span::before{ content: "superduper Aktion"; position: absolute; width: 150%; height: 40px; background: red; transform: rotate(-45deg) translateY(-20px); display: flex; justify-content: center; align-items: center; font-size: 13px; text-transform: uppercase; color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } |
0 Kommentare