2018. május 5., szombat

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

Nincsenek megjegyzések:

Megjegyzés küldése