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

7 megjegyzés:

  1. Kedves Roxana!

    Az első szövegdoboz az én kezem munkája, ezért örülnék, ha tennél ki forrást. Köszönöm. :)
    De nem is ezért akartam írni, hanem mert írtad, hogy nem érted miért lett ilyen nagy. Ennek az az oka, hogy a szélességnél nem pontos adat van megadva, hanem hogy 90% széles legyen, ami annyit jelent, hogy a bejegyzés teljes szélességének 90%-át foglalja el. Ha kevesebb százalékot adsz meg, akkor kisebb lesz, illetve megadhatod a méreteket px-ben is. Már leteszteltem és ha szélességnek 90%-ot adsz meg, akkor lesz pont megfelelő méretű a modulsávban, így nem kell kikeresni hozzá a pontos méreteket és bármekkora oldalmodulban testhezálló lesz.
    És még ajánlom, hogy amikor kitetted a bejegyzésbe magát a szövegdobozt, abból a kódból szedd ki a scrollbar-t, mert belepiszkál a blogotokba.

    Ölel,
    M. Mircsi

    VálaszTörlés
  2. Kedves M.Mircsi!

    Ne haragudj amiért nincs kint, de nem azért mert nem akartam kiírni, hiszen a másiknál is kivan írva a forrás hanem azért, mert fogalmam sem volt már hogy honnan szettem ezt le, nem hogy ki csinálta. De köszönöm, hogy szóltál és mindjárt kiszedem a scrollbar-t! :)

    Roxana

    VálaszTörlés
    Válaszok
    1. Kedves Roxana!

      Egyáltalán nem haragszom, sőt, megtiszteltetés, hogy érdemesnek tartottad a munkámat, hogy megoszd a blogon. :)

      Ölel,
      M. Mircsi

      Törlés
  3. Kedves Roxana!
    Lehet, hogy én vagyok béna, de nem tudom összerakni a kódot. Vörös hátlap kéne neki és fekete betű, ezt hol tudom beállítani?

    VálaszTörlés
  4. Sziasztok! Az első kódot, vittem, nagyon szépen köszönöm :)

    VálaszTörlés
  5. Sziasztok, vittem az első szövegdobozt, köszi! :)x

    VálaszTörlés