"Buborékos" szövegdoboz
2012.06.24. 13:17
Egy nagyon egyszerű szövegdoboz féleség, Használjátok egészséggel! ;)
"Az utóbbi időben.. Volt minden. Voltam boldog, szomorú, kiégett, üres, hiperaktív, szerencsés, szerencsétlen, sajnálkozó, nagyképű, nemtörődöm, felelőtlen, gonosz, szívtelen, vak, embertelen, hazug, önző, követelőző, és még sok más. Nem bántam meg semmit. Boldog voltam, hiszen ismét minden úgy látszott, rendbe fog jönni..."
<style type="text/css">
.bubble
{
height: 200px;
width: 275px;
float:center; /*a szövegdoboz elhelyezkedése*/
margin-top: 41px;
margin-left:11px;
background-color: #f2f2f2; /*háttér*/
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #b2b2b2;
position:relative;
z-index:1;
}
.triangle
{
position:absolute;
top:12px;
width: 0; /*szélesség*/
height: 0; /*magasság*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 10px solid #f2f2f2;
margin-left:-9px;
z-index:3;
}
.border
{
position:absolute;
top:12px;
width: 0; /*szélesség*/
height: 0; /*magasság*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 10px solid #e0e0e0;
margin-left:-10px;
z-index:2;
}
.content{
padding:10px;
}
</style>
<div class="bubble">
<div class="triangle"></div>
<div class="border"></div>
<div class="content">SZÖVEGED HELYE!</div>
</div>
|
|