Szövegdobozok

Üdv néktek!

Ez a szövegdoboz már elég rég a birtokomban van, amire még anno sok idő keresés közben bukkantam rá. Mivel itt még ezen a blogon nem használtam és kértetek már amúgy is szövegdobozokat , így arra gondoltam hogy megosztom veletek ezt, talán valaki hasznát veszi. Azt pedig nem értem, hogy miért lett ilyen nagy mikor beállítottam. Na mindegy lényegtelen ti majd beállítjátok akkorára amekkorára akarjátok, valamint a színét is megtudjátok változtatni, ha esetleg nem ilyet akartok :) Remélem hasznát tudjátok venni! :)
Forrás: M.Mircsi

Kód:
<fieldset class="keret">
<legend align="center">
  <table>
    <tbody>
<tr>
     <td class="cim">IDE JÖN A CÍM
     </td>
   </tr>
</tbody></table>
</legend>
  <br />
<div class="tartalom">
SZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEG</div>
</fieldset>
<style type="text/css">

  ::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
  border-radius: 80px;
}
::-webkit-scrollbar-thumb { /*görgetősáv*/
  background-color: #0c343d; /*háttérszín*/
  background-size: 400% auto;
  box-shadow: -2px 0px 30px ; /*árnyék*/
  border-radius: 10px; /*lekerekítés*/
  padding: 5px;
}
.cim { /*cím beállításai*/
  background-color: #0c343d; /*háttérszín*/
  border-radius: 150%; /*lekerekítés*/
  box-shadow: 0px 0px 20px 0px ; /*árnyék*/
  margin-right: 10px;
  padding: 20px;
  font-family: 'Times New Roman'; /*betűtípus*/
  color: #ffeece; /*betűszíne*/
  text-shadow: 1px 1px 10px #ffeece; /*betűárnyéka*/
  font-weight: bold;
  font-size: 12px; /*betűméret*/
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  -moz-transform: rotate(-10deg); /*a cím megbillentése (Mozzila Firefox)*/
  -webkit-transform: rotate(-10deg); /*a cím megbillentése (Chrome, Opera)*/
}
.tartalom { /*tartalom beállításai*/
  height: 150px; /*tartalom magassága*/
  text-align: justify;
  overflow: auto;
  color: #ffeece;
  text-shadow: 1px 1px 3px #ffeece; /*árnyék*/
  padding-right: 5px;
}
.keret { /*A modul keretének beállításai*/
  background-color: #0c343d; /*háttérszín*/
  width: 90%; /*szélessége*/
  border: 4px solid #0c343d; /*keret*/
  box-shadow: 3px 3px 8px #0c343d; /*árnyék*/
  border-radius: 30px 60px 60px 30px; /*lekerekítés*/
  padding: 5px 15px 15px 15px;
}
</style>


<br />
<div style="text-align: center;">
<br />
Kód:&nbsp;</div>
<style type="text/css">
a.cssmenu {
    color: #fff2cc;
    padding: 10px;
    margin: 6px;
    font-size: 15px;
    font-family: georgia;
    background-color: #091724;}
a.cssmenu:hover {
    color: #091724;
    background-color: #fff2cc;
    -webkit-transition-duration: 0.5s;
    box-shadow: 10px 10px , -10px -10px ;
}</style>

Ez egy nagyon egyszerű, de egyben nagyon jó szövegdoboz, amit szintén felhasználhattok. Nekem személy szerint tetszik ez, remélem nektek is hasznotokra fog válni! :) Forrás: FuckinWay Gportál

Kód:

<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>

<br />
<div class="bubble">
<div class="triangle">
</div>
<div class="border">
</div>
<div class="content">
SZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEGSZÖVEG</div>
</div>


Remélem hasznos volt ez a kis bejegyzés, ha akartok még ilyet akkor jelezzétek! :)
ROXANA