Szerző Téma: KódszörnySzelídítő ~ Formázás egyszerűen  (Megtekintve 1609 alkalommal)

Description:

0 Felhasználó és 1 vendég van a témában

Karakterlap

Neliel Tu Oderschvank

Moderátor

*

Hozzászólások: 160

Hírnév: 7

Infó

Tárcában: 1 741 700 ryou

Technikatár
Ajándék küldése


Hovatartozás:
Független

Egyéb hovatartozás:
Nincs

Egyéb hovatartozás:
Nincs

Kapcsolat cimke:
Plátói

Kivel áll kapcsolatban?:
Staff *3*

Mottó:
"Omlik az ég, egy mesére zuhan... Na és akkor most mi van?"

Post szín:
2BCCFC


  • Profil megtekintése

Nem elérhető Nem elérhető

KódszörnySzelídítő ~ Formázás egyszerűen
« Dátum: 2015. Febr. 10, 19:13:43 »
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.

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:
« Utoljára szerkesztve: 2015. Dec. 09, 13:33:11 írta Ootoribashi Roujuurou »

Karakterlap

Shihouin Yoruichi

Főadmin

Developer :x

Adminisztrátor

*

Hozzászólások: 148

Hírnév: 12

Infó

Tárcában: 4 573 900 ryou

Technikatár
Ajándék küldése


Hovatartozás:
Független

Egyéb hovatartozás:
Nincs

Egyéb hovatartozás:
Nincs

Kapcsolat cimke:
Egyedülálló


  • Profil megtekintése
  • Bleach szerepjáték

Nem elérhető Nem elérhető

Re:KódszörnySzelidítő ~ Formázás egyszerűen
« Válasz #1 Dátum: 2015. Dec. 08, 14:18:52 »
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)

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)

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.
(click to show/hide)

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)

~ 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)

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.
« Utoljára szerkesztve: 2015. Dec. 08, 15:24:26 írta Shihouin Yoruichi »