Szövegdoboz #1

Sziasztok! A mai nap jöttem nektek egy szövegdobozzal, és pár kód magyarázattal. Mielőtt elvinnétek, kérlek írjátok meg valamilyen formában. 

Szövegdoboz:

IDE ÍRHATSZ SZÖVEGET

IDE IS JÖHET SZÖVEG

IDE ÍRHATSZ HOSSZABB SZÖVEGET!

Kód:

<center>

<style type="text/css">

@font-face { font-family: "oaxaquena tall"; src: url('http://static.tumblr.com/uf9vjvr/V5Fmo7tbg/oaxaquena_tall.ttf'); }

@font-face { font-family: "simple snails"; src: url('http://static.tumblr.com/uf9vjvr/o3Wmntdkj/simplesnails_ver_4.0.ttf'); }

.plsenot {width: 230px; background-image: url(); shadow: 2px 5px 8px black border: none;}

.dudoncarme {padding: 10px; width: 180px; }

.lthertofth {padding: 10px; width: 220px; margin-left: -30px; background-color: #fff; opacity: .8; border-top: 10px solid pink; box-shadow: 2px 5px 8px black

; border-bottom: 10px solid pink; border-radius: 20px;}

.wlontie {width: 220px; font-family: calibri; font-size: 25px; color: #000; margin-top: 10px; text-transform: lowercase; text-shadow: 2px 5px 8px black;}

.syohewai{width: 190px; font-family: times new roman; font-size: 15px; color: #000; margin-top: 8px; text-transform: lowercase; text-shadow: 2px 5px 8px black; }

.mekweyu {width: 150px; border-top: 10px solid #A7D2D1; border-bottom: 10px solid #A7D2D1; border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; padding: 10px; font-family: calibri; font-size: 14px; line-height: 90%; text-align: justify; text-transform: lowercase; font-family: arial;width: 200px;}

</style>

<div class="plsenot">

<div class="dudoncarme">

<div class="lthertofth">

<img src="IDE JÖN A KÉP LINKJE" width="220" />

<br />

<div class="wlontie">

IDE ÍRHATSZ SZÖVEGET</div>

<div class="syohewai">

IDE IS JÖHET SZÖVEG</div>

<div class="mekweyu">

IDE ÍRHATSZ HOSSZABB SZÖVEGET!

</div>

</div>

</div>

</div>

<div style="color: black; font-family: CALIBRI; font-size: 10PX; text-align: RIGHT; text-transform: UPPERCASE; width: 250PX;">

</div>

</center>

Magyarázat:

font-family: a betűtípust jelenti (pl: arial, calibri, times new roman, calibri light stb.)

font-size: a betűméretet jelenti, itt pixelenként tudjátok őket csökkenteni, illetve növelni.

width, height: a szélességet és a magasságot jelölik (szélesség=width, magasság=height). Ebben az esetben itt most csak a szélességgel találkozhattok, mert a magasság akkora, amekkora hosszúságú szöveget szeretnétek.
text-align: a szöveg elhelyezkedését jelöli (jelen esetben most jobb oldalra van igazítva a szöveg, de tudjátok ezt középre - center -, balra - left -, illetve sorkizártra - justify - is állítani.

color: a színek

Én egyenlőre nem is írnék több magyarázatot, mert a következő bejegyzésem egy sokkal kibővítettebb kód magyarázat lesz, illetve ha bármi segítségre lenne szükségetek, e-mail-ban elértek bármikor. :)

Csók, 

Nadin