Szabályzat és egyéb dolgok > Fórum élet

KódszörnySzelídítő ~ Formázás egyszerűen

(1/1)

Neliel Tu Oderschvank:
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. ^-^


--- Kód: ---[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]
--- Kód vége ---

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.

--- Kód: ---[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]
--- Kód vége ---

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.

dotted: Pöttyözött
dashed: Vonalazott
solid: Sima
double: Dupla vonal
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.
* Ismétlődés: background-repeat: repeat-x; (Ismétlés az x tengely mentén.) background-repeat: repeat-y; (Ismétlés az y tengely mentén.) background-repeat: no-repeat; (Nincs ismétlés.)

* Pozíció: background-position: right top; (Jobbra fent.) background-position: right bottom; (Jobbra lent.) background-position: left top; (Balra fent.) background-position: left bottom; (Balra lent.) /A pozíció azt adja meg, honnan kezdődjön maga a kép./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. :mami:

Shihouin Yoruichi:
Uffantás!

Következik a 2. rész.

Hime nagyon jól összegyűjtötte a formázással kapcsolatos dolgokat, hogy hogyan is működik, mit hogy kell, én pedig jöttem kicsit kiegészíteni, és javaslatokat irkálni. :3

~ Mivel a fórum profiljában, illetve úgy alapjában véve a beállításoknál két féle megjelenítési mód van (az egyiknél felül, a másiknál oldalt van a menü) ezért ha fix szélességet adunk meg, nem biztos, hogy jól járunk vele, főleg ha épp a felső menüs változatot használjuk. Ha szeretnétek, hogy a felbontáshoz igazodjon a div szélessége, akkor javasolt a százalékos érték megadása a szélességnél:

(click to show/hide)
--- Kód: (Szélesség) ---[div style="width: 100%; border: 1px solid white;"]
[div style="width: 70%; border: 1px solid orange;"]
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
[/div]
[/div]

--- Kód vége ---

szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

Ennél a doboz szélessége éppen az azt tartalmazó másik doboz 70%-át teszi ki, így nincs az, hogy míg nálad tökéletes a megjelenítés, másnál a felbontás miatt kilóg az előtörténet/adatlap fele a fórumból.

~ Ha a marginnak auto értéket adunk, akkor jobbra és balra ugyan akkora távolságot fog beállítani magának, vagyis az adott div-et, táblázatot, vagy képet középre helyezi:

(click to show/hide)
--- Kód: (Margin) ---[div style="width: 50%; border: 1px solid white; margin: auto;"]
[div style="width: 30%; border: 1px solid orange; margin: auto;"]
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
[/div]
[/div]

--- Kód vége ---

szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg

Lista formázása
A listákat lényegében ugyan úgy formázhatjuk, mint mondjuk a div-eket, bekezdéseket.

~ Lehetőség van menüvé alakítani egy listát. Ehhez nincs másra szükség, mint a display nevű parancsra. Ennek többféle tulajdonságot is adhatsz:
[*]block: blokkokba rendezi a lista elemeit, ám ugyan úgy egymás alatt maradnak.
[*]inline: a lista elemeit egymás mellé helyezi, ezzel menü szerűvé alakítva azt.
[*]inline-block: lényegében az előző kettő összeolvasztása.
[*]none: a none értékkel rendelkező elem nem fog megjelenni.
[/list]

(click to show/hide)
--- Kód: (Display) ---[list style="text-align: right;"]
[li style="display: inline-block; padding-right: 5px; font-size: 15px; font-weight: 400;"]
[iurl=#jellemzok][span style="color: white;"]Jellemzők[/span][/iurl] |[/li]
[li style="display: inline-block; padding-right: 5px; font-size: 15px; font-weight: 400;"]
[iurl=#post_kepessek][span style="color: white;"]Zanpakutou[/span][/iurl] |[/li]
[li style="display: inline-block; padding-right: 30px; font-size: 15px; font-weight: 400;"]
[iurl=#post_jatekok][span style="color: white;"]Játékok[/span][/iurl][/li][/list]

--- Kód vége ---

Jellemzők |Zanpakutou |Játékok
Persze ez nem csak listával működik. Ugyan úgy alkalmazható divre, vagy akár egy képre. :) Viszont ahhoz, hogy a mini menü tényleg menüként funkcionáljon, ahogy egy-egy horgonyt kell beállítanotok. Azt, hogy egy horgonyt hogy tudtok beállítani itt nézhetitek meg: Fontos tudnivalók a fórumhoz

Képek formázása
A képek formázása nem sokban különbözik a divek formázásától. Ugyan úgy lehet náluk használni a margint, bordert, border-radiust, illetve a box-shadow...stb. parancsokat. De hogy tiszta legyen mindenkinek, természetesen mutatok rá példát:

(click to show/hide)
--- Kód: (Kép formázás) ---[img style="width: 70%; margin: 20px 100px; border-radius: 20px 10px; border: 1px solid #D20000; box-shadow: 10px 15px #d3d3d3;"]http://i61.tinypic.com/206eb6c.jpg[/img]

--- Kód vége ---



~ Az opacity is hasznos lehet, főleg ha egy képet illesztesz be, amit átlátszóként szeretnél megjeleníteni. Nem szükséges photoshopban szöszölni vele, ráadásul egy sima JPG kiterjesztésű fájlra is lehet használni:

(click to show/hide)
--- Kód: (Opacity) ---[div style="background-color: orange; width: 100%;"]
[img style="opacity: 0.5; width: 70%; margin: 20px 100px;"]http://i61.tinypic.com/206eb6c.jpg[/img]
[/div]

--- Kód vége ---



Az opacity értékét 0 és 1 között adhatjuk meg, ahol a tizedesjel-et ponttal adjuk meg. Fontos, hogy vesszővel nem működik!

Illetve még egy javaslat a képekkel kapcsolatban. A Photoshop, illetve más képszerkesztők hajlamosak felelseges adatokat elmenteni a képfájlokba, ezzel növelve a fájlok méretét. Ahhoz, hogy minél kisebb fájlméretet kapjatok, használjátok a Mentés webre funkciót, ami a Fájl menüben található. (Photoshop CC-ben ez a Fájl -> Exportálás menüpontban van.) Ezzel tudjátok webes használatra optimalizálni a képeket, így kisebb méretűek lesznek, gyorsabban betölti a weblap, és még a minőség se romlik, legfeljebb minimálisan, ami emberi szem számára nem észre vehető. Ezen kívül van egy másik lehetőség is, mely a tinypng.com weboldal. Itt ha feltöltitek a képet, képes 60-70%-kal csökkenteni annak fájlméretét úgy, hogy közben a minősége nem romlik. Törekedjünk arra, hogy a képfájlok méretei ne legyenek 3-400 kB-nál nagyobbak.

Navigáció

[0] Üzenetek főoldala

Teljes verzió megtekintése