Szövegdoboz(ok)

Konnicsi!

Teljesen elment a kedvem a városok után keresgéléstől, ezért tőlem egy ideig ne nagyon várjatok sok keresést igénylő bejegyzéseket. Ezért elnézést kérek tőletek és a szerkesztőtársaimtól is, akiket néhány napra, vagy csak holnapig, magukra hagyom eme bejegyzések megírásában. Viszont, hogy én se töltsem hasztalanul ezt a rövidke időt, összedobtam nektek egy egyszerű kis szövegdobozt. Semmi nagy durranás, ennek ellenére nekem tetszik, mert mindenki kedve szerint állíthatja rajta a színeket, a hátteret, vagy akármit, amivel egyedibbé teheti és a saját ízlése szerint változtathatja. Nekem is volt néhány ötletem, hogy mit lehetne rajta változtatni, ezeket le is írom, hátha valaki fel tudja használni közületek. Igyekszem elmagyarázni, hogy mit hogyan, mivel csináltam, hogyha saját ötletetek van, meg tudjátok valósítani. Ha esetleg valaki még sem értene valamit, az bárhol bármikor felkereshet.

Az alap szövegdoboz:

a cím helye

a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye a szöveg helye

A kód:
<div class="cim">a cím helye</div>
<div class="tartalom">a szöveg helye</div>

<style type="text/css">
.cim {
width: 100%; /* doboz szélessége */
text-shadow: #b51042 1px 1px 3px; /* szöveg árnyéka */
font-family: Times New Roman; /* betűtípus */
font-size: 13px; /* betű mérte */
font-weight: bolder; /* félkövér betű */
text-transform: uppercase; /* nagybetűk */
color: #b51042; /* betűszín */
text-align: center; /* középre igazítás */
border: 2px solid #b51042; /* keret kinézete */
border-radius: 70px 70px / 10px 10px; /* keret lekerekítése */
padding: 3px;
}


.tartalom { /* tartalom kinézete */
font-family: Times New Roman; /* betűtípus */
font-size: 12px; /* Betű mértere*/
font-weight: bold; /* Félkövér betű*/
color: #999999; /* betű színe */
text-align: justify;
overflow: auto; /*görgetősáv */
height: 150px; /* doboz magassága */
width: 100%; /* doboz szélessége */
border-left: 2px solid #b51042; /* baloldali keret kinézete */
border-right: 2px solid #b51042; /* jobboldali keret kinézete */
padding: 5px;
}
</style>

A szövegdoboz önmagában nagyon egyszerű, nem az a figyelemfelkeltő, ilyen csicsás, olyan cuki fajta, nem forog, ugrál, tekereg, csak egy szimpla dobozka, amiben a tartalom mégis kitűnik a modulból. Az ilyen szövegdobozokról mindig eszembe jut az egyik táncos film, amiben azt mondták, hogy a társastáncban a férfi azért van, hogy segítse ragyogni a nőt. Ez a doboz is kiemeli a szöveget a modulok közül, mégsem vonja el a látogató figyelmét a többi tartalomról. Szabadon alakítható, egy kis kreativitással szebb dobozt lehet készíteni, mint a forgósok, amiken csak a képet tudod a saját stílusodra alakítani.
Fentebb említettem, hogy kicsit alakítgattam a szövegdobozt, aminek a végeredményét a továbbra kattintva tekinthetitek meg.


Játék a képekkel:

Az alábbi szövegdoboznak csak a címe kapott egy képes hátteret. Ha megtetszett és ti is szeretnétek hátteret beállítani, ezt a kódot kell beillesztenetek a fenti kód cim nevű osztályába (.cim /*tartalom kinézete*/):

background: url(a kép URL címe);  /* háttérkép */

Az alábbi szövegdoboznak csak a tartalma kapott egy képes hátteret. Ha megtetszett és ti is szeretnétek hátteret beállítani, ezt a kódot kell beillesztenetek a fenti kód tartalom nevű osztályába (.tartalom /*tartalom kinézete*/):
background: url(a kép URL címe);  /* háttérkép */

Ennél a szövegdoboznál mind a két osztályba be kell illesztenetek a fentebb említett kódot.

Játék a kerettel:

Ahhoz, hogy be tudd állítani, hogy a keret pontozott legyen a mind a két osztályban át kell állítanotok az alábbi kódokat:
cim osztályban:
border: 2px solid #b51042; /* keret kinézete */
Írjátok át dotted-re és a keret már is így fog kinézni a címnél.

tartalom osztályban:
border-left: 2px solid #b51042; /* baloldali keret kinézete */
border-right: 2px solid #b51042; /* jobboldali keret kinézete */

Írjátok át dotted-re és a keret már is így fog kinézni a tartalomnál. Ahhoz, hogy mind a kettő így nézzen ki, mindkettőt át kell írnotok, különben felemás lesz.

Ahhoz, hogy be tudd állítani, hogy a keret szaggatott legyen a mind a két osztályban át kell állítanotok az alábbi kódokat:
cim osztályban:
border: 2px solid #b51042; /* keret kinézete */
Írd át dashed-re és a kereted már is így fog kinézni a címnél.

tartalom osztályban:
border-left: 2px solid #b51042; /* baloldali keret kinézete */
border-right: 2px solid #b51042; /* jobboldali keret kinézete */

Írd át dashed-re és a kereted már is így fog kinézni a tartalomnál. Ahhoz, hogy mind a kettő így nézzen ki, mindkettőt át kell írnotok, különben felemás lesz. 

Én ezt a szövegdobozt úgy terveztem, hogy nincsen alja, de jogosan bele lehet kötni, hogyha nincs alja, nem is lehet doboznak nevezni. Akinek jobban tetszik, hogy a keret be van zárva, annak az alábbi kódot kell hozzáadnia a tartalom osztályához:

tartalom osztályban:

border-bottom: 2px dashed #b51042; /* alsó keret kinézete */

Játék a lekerekítéssel:

Ennél a szövegdoboznál meghagytam az alsó keretet, majd lekerekítettem a sarkokat. Ehhez ezt kell hozzáírnotok a tartalom nevű osztályhoz:

tartalom osztályban:

border-radius: 10px;

Az alábbi számot kedvetek szerint átírhatjátok, illetve külön megadhatjátok, hogy melyik sarkot hány px-el kerekítse le. Ehhez egymás után le kell írnotok négy számot, vessző nélkül, az alábbi módon:

border-radius: 10px 20px 40px 30px;

Ha nincs alja a szövegdobozodnak, akkor is használhatod a kódot, működni fog.

Én hozzáírtam még egy kódot, amivel egy kicsit lentebb tette a címet, így nincs rés a két doboz között. Ehhez pedig ezt kell beírnod a cim osztályba:

cim osztályban:

margin: -5px;

Ezen ne nagyon variáljatok, mert nem fog működni, jó így, ahogy van.

Itt is meghagytam az alsó keretet, de más módon kerekítettem le a sarkokat, és nem csak a tartalomban, de  a címben is. Ehhez ezt kell hozzáírnotok az osztályokhoz:

tartalom osztályban:
border-radius: 20px 20px / 30px 30px ;
Az alábbi számot kedvetek szerint átírhatjátok, akár különböző számokra is.

cim osztályban:
border-radius: 70px 70px / 10px 10px; /* keret lekerekítése */
Ahhoz, hogy a cím így nézzen ki, ezeket a számokat kell átírnotok a kódban egyetlen 10px-re.

Ha valamit nem magyaráztam volna elég érthetően, vagy gondotok van a kódokkal, nyugodtan keressetek meg és segítek, ahogy tudok. Ha pedig felhasználjátok a szövegdoboz bármely változatát, tiszteljetek meg annyival, hogy kiírjátok a forrást. Köszönöm. Ne feledjétek, megköszönni sem szégyen!

További jó olvasgatást és blogolást kívánok!

M. Mircsi