Sziasztok!
Ebben a topikban néhány posztban fogok segíteni azoknak, akik szeretnék némi kóddal feldobni a posztjukat, vagy adatlapjukat. Mivel az oldal nem támogatja a HTML alapú kódolást, viszont helyette a BBCode, és CSS keverékét igen, részletesen leírom, melyik kód mit is csinál, és miképpen lehet tovább gondolni őket.
Tehát nem kész kódokat fogok leírni, amit tudtok használni, hanem abban szeretnék segíteni, hogy mindenki képes legyen magának kódot készíteni.
(Az új kódolási metodika megértése után pl. egyes HTML kódok is átfordíthatóak lesznek, vagyis azokat is lehet valamilyen mértékben itt használni.)
(Lentebb a kód bemutatásoknál elhagytam az „i” betűket, hogy megjelenjenek a tag-ek, természetesen csak úgy működnek a kódok, ha azok helyesen vannak leírva! dv = div, lst = list, mg = img.)
Kezdjük is az elején!
A kódolást több helyen is megtehetjük. Vagy egy div ([dv][/dv] – szünet nélkül) közé tesszük a kódolandó szöveget, vagy a list taget ([lst][/lst]), vagy pedig a kép taget ([mg][/mg]) formázzuk, attól függően, hogy mit szeretnénk style-ozni.
A style=”” szöveget illesztjük majd a tag kezdete mögé, onnantól pedig jönnek a formázási kódok ([dv style=””] [/dv], [lst style=””] [/lst], [mg style=””] [/mg]).
A formázási elemek mindegyike a két
idézőjel közé jön,
pontosvesszővel elválasztva, és a végén
pontosvesszővel lezárva. Fontos, hogy el legyenek választva az elemek, mert amennyiben nem kerül közéjük pontosvessző, azt egy elemnek értelmezi a fórum, és úgy értelmetlen lesz a kód, ezért nem tudja alkalmazni, valamint a lezáratlan kódot sem képes értelmezni. ([dv style=”első elem;második elem;”] [/dv], [lst style=”első elem;második elem;”] [/lst], [mg style=”első elem;második elem;”] [/mg]).
Fontos, hogy szünet sem használható bárhol a kódban! Két elem között, a pontosvessző után lehet, ahogy az idézőjel előtt és után is, de az sem baj, ha valaki nem használja, úgy is működnek a kódok. Azonban az egyenlőségjel és az idézőjel között nem lehet, mert az megbontja a kódot, és nem lehet alkalmazni.
[dv style=" első elem; második elem; "] [/dv]--> Működik.
[dv style= "első elem;második elem;"] [/dv]--> Nem működik.
Fontos, hogy csak a style után használunk egyenlőség jelet, amikor a kódhoz stilizálunk, a kiválasztott parancs után kettőspontot teszünk, és a stílus azután jön. (Például a szöveg formázása így néz ki: text-align:justify; sosem text-align=justify;!)
Most pedig néhány könnyebb kódot magyarázok el részletesebben.
[div style="height:150px; width:400px; border: 3px solid white;text-align:justify; padding:10px; margin: 10px; background-color:#999; color:black;"]
Ezt a szöveget úgy formázom meg, hogy a lehető legtöbb elemet tartalmazza a kód, amit csinosításhoz lehet használni.
Természetesen minden elemét meg lehet változtatni, és rengeteg permutációját használni, éppen ez a jó benne, már egy szín,
vagy formaparancs átszerkesztésével teljesen új forma jön létre.[/div]Ezt a szöveget úgy formázom meg, hogy a lehető legtöbb elemet tartalmazza a kód, amit csinosításhoz lehet használni. Természetesen minden elemét meg lehet változtatni, és rengeteg permutációját használni, éppen ez a jó benne, már egy szín, vagy formaparancs átszerkesztésével teljesen új forma jön létre.
[div style="height:40%; width:70%; border: 8px dotted #882202; border-radius:20px; text-align:right; padding:10px; margin: 10px;
background-image:url("http://www.systhread.net/texts/200511gimp-img/plasma_ab_single.jpg"); color:magenta; font-family: Arial; font-size: 16px;
text-decoration:underline; text-shadow: 1px 2px #000; box-shadow: 2px 5px #fff;"]
Ezt a szöveget úgy formázom meg, hogy a lehető legtöbb elemet tartalmazza a kód, amit csinosításhoz lehet használni.
Természetesen minden elemét meg lehet változtatni, és rengeteg permutációját használni, éppen ez a jó benne, már egy szín,
vagy formaparancs átszerkesztésével teljesen új forma jön létre.[/div]Ezt a szöveget úgy formázom meg, hogy a lehető legtöbb elemet tartalmazza a kód, amit csinosításhoz lehet használni. Természetesen minden elemét meg lehet változtatni, és rengeteg permutációját használni, éppen ez a jó benne, már egy szín, vagy formaparancs átszerkesztésével teljesen új forma jön létre.
Most pedig lássuk az elemeket egyesével!
height: Magasság. (Angolosok előnyben. ^w^) Ezzel lehet beállítani, milyen méretű legyen függőlegesen a „div”, vagyis az a rész, ahova a formázandó szöveg kerül. Két féleképpen lehet ezt beállítani, vagy egy konkrét méretre, amit pixelben adunk meg (mint az első példában a 150px), vagy pedig a posztablakhoz arányosítva, százalékban (mint a második példában látszik). A különbség csupán annyi, hogy az arányos a különböző méretű monitorokon is ugyanúgy arányul, míg a pixelben megadott fix minden méretnél. (Vagyis lehetséges, hogy egy 18 colos képernyőn még bent van a posztablakban, az egy 12 coloson már kilóg.) Ha a beillesztett szöveg nagyobb, mint amekkora méret be van állítva, akkor görgetősáv jelenik meg oldalt.
Emellett lehet megadni maximumot, és minimumot is. (max-height:50px; min-height:70%;) A maximum azt jelenti, hogy annál nagyobb nem lesz a „div”, a minimum pedig azt, hogyha a szöveg nem is követel akkora helyet, minimum akkorára megnyitja a „div”-et, de ha több kell, ugyanúgy tovább „nyúlik”.
width: Szélesség. Ugyanaz vonatkozik rá, mint a magasságra, csak vízszintes méretbéli beállításokkal. Ugyanúgy lehet megadni maximumot, és minimumot is. (max-width:70px; min-width:80%;)
border: Keret. Mint a fenti kódokon is látszik, három változót lehet megadni, amiket csupán szünettel választunk el, véletlen sem pontosvesszővel! Az első a keret mérete, amit pixelben kell megadni (8px), az utolsó a szín, amit HTML (white), vagy RGB (#fff; #882202) színkóddal jelölünk. (A 3 és 6 jegyű kódokkal is működik!) A középső a keret stílusa (dotted), amit azért hagytam utoljára, mert sok fajtája van, nem csupán a fent használt kettő, és azokat lehet kombinálni is.
groove: 3D-s dupla keret, ahol jobb lentről vetül a fény.
ridge: 3D-s dupla keret, ahol bal fentről vetül a fény.
inset: 3D-s keret, ahol jobb lentről vetül a fény.
outset: 3D-s keret, ahol bal fentről vetül a fény.
A kombinálás a következő képen történik. Nem csak annak van sorrendje, hogy előbb a méret, aztán a stílus, végül pedig a szín, hanem annak is, hogy ezt milyen sorrendben alkalmazza a doboz oldalára. A sorrend: fent, jobb, lent, bal.
Mint ezen a mintán látszik, lehetséges mind a négy oldalt különböző mintájúra, méretűre, valamint színűre állítani. A mintát a border-style: solid double dashed dotted; kóddal, a méretet a border-width: 4px 6px 10px 8px; kóddal, míg a színt a border-color: red blue green purple; kóddal. (Ha mindent így állít be valaki, akkor a sima border kód nem szükséges, valamint a RGB kódok ugyanúgy használhatóak.) Persze nem kell mindet különbözőre állítani, lehet csak kettő félét felváltva használni.
border-radius: A keret lekerekítése. Mindig pixelben adjuk meg (20px), és ennél is lehetséges, hogy a négy sarok különböző méretű kerekítéssel rendelkezzen. (Ebben az esetben border-radius: 5px 10px 15px 20px; ahol az első a bal felső, jobb felső, jobb alsó, végül bal alsó.)
text-align: A szöveg elrendezése. (Ugyanazok a kódok használhatóak, mint a BBCode-ban! Center, left, right, justify.)
padding: Belső „szünet”. Mindig pixelben adjuk meg (10px), és arra vonatkozik, hogy a div-ben elhelyezett elemek milyen távolságban vannak a border-től, vagyis a kerettől.
margin: Margó. Mindig pixelben adjuk meg (10px), és arra vonatkozik, hogy a div milyen messze helyezkedik el a többi elemtől. (Pl. ha két 10-10 pixeles margin-nal ellátott div van egymás mellett, akkor a kettő között 20 pixelnyi hely lesz.)
background: Háttér. Lehet szín (background-color:#999; background-color:black;), vagy akár egy kép is (background-image:url("
http://www.systhread.net/texts/200511gimp-img/plasma_ab_single.jpg"); ). Képnél lehetséges pozícionálni, és ismétlődést beállítani.
Ha megvan a kiválasztott elhelyezés, akkor bele lehet illeszteni a háttér kódjába. background-image:url("
http://www.systhread.net/texts/200511gimp-img/plasma_ab_single.jpg"); no-repeat right top; (Vagyis ne ismételje a háttér képet, amit a jobb felső sarokba illesszen be.)
color: Szín. Ezzel a szöveg színét adjuk meg.
font-family: Betűcsalád. Ezzel a szöveg font-ját adjuk meg. (Arial)
font-size: Betűméret. Ezzel a szöveg betűinek méretét adjuk meg, mindig pixellel. (16px)
text-decoration: Ezzel a szöveg dekorációt adjuk meg. (overline; /Felső vonal/ line-through; /Áthúzás/ underline; /Aláhúzás/)
text-shadow: A szöveg árnyékolása. Három változója van, az első a jobbra tolás (1px), amit ha negatív előjellel látnak el a kódban, akkor ballra tolódik (-1px), a lefelé tolás (2px), amit ha negatív előjellel látnak el a kódban, akkor felfelé tolódik, valamint a színkód, hogy milyen színű legyen az árnyék.
box-shadow: A szövegdoboz (div) árnyékolása. Felépítése, és funkciói megegyeznek a text-shadow-éval.
Ez a fajta kódolás teljes mértékben megfér a fórumon használt BBCode-okkal, vagyis félkövérré, dőltté tenni, és átszínezni is lehet vele, ahogy más betűtípust megadni. A lényeg, a [dv][/dv] között helyezkedjen el a BBCode.
A következő posztban a képek formázásáról lesz szó bővebben.
Kérdéssel és kéréssel PÜben és chaten is megtaláltok.
