Heute habe ich mal wieder eine CSS Anleitung für euch und zwar möchte ich euch zeigen, wie man in CSS eine Art Info-Box aka Dialogbox erstellen kann. Ihr kennt dieses Design aus den Comics, da kommen diese Sprechblasen ja eigentlich her.
So ein Info-Box Effekt ist eigentlich gar nicht mal so schwer, das einzige was man verstehen muss ist die Funktion der Ränder und wie man die manipulieren kann.
Dieser CSS Sprechblasen Effekte sieht nicht nur schön aus er ist also auch leicht einbaubar – ich wünsche viel Spass damit.
Video / Anleitung
HTML / CSS
1 2 3 | <div class="container"> lorem ipsum text lorem ipsum text lorem ipsum text </div> |
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 | body{
background: #008E15
}
.container{
position: relative;
max-width: 600px;
height: auto;
border: 2px solid #ffffff;
margin: 100px auto;
padding: 30px;
box-sizing: border-box;
}
.container:after{
position: absolute;
width: 50px;
height: 50px;
border-top: 0px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-left: 0px solid #ffffff;
top:100%;
left: 10%;
margin-left: -25px;
content: '';
transform: rotate(45deg);
margin-top: -25px;
background: #008E15;
} |
0 Kommentare