Amikor az első oldalaimat csináltam, minden kis apró helyet be akartam tölteni, mert azok elvesztegetettnek tűntek. Na azt nem szabad. Pont az ellentettje az igaz. A térközök letisztultabbá teszik a dolgokat. A webdizájnban három nézőpont van, amit érdemes figyelembe venni.
Sorközök
Egy nagyobb szövegben a sorok közötti hely igen meghatározza a szöveg olvashatóságát. Ha túl kicsi a köz, akkor a szemünk a sorugrásoknál véletlenül nem a következőre ugrik, hanem kihagy egy-egy sort. Ha túl nagy a köz, akkor a két sor között elveszhet a tekintet. Természetesen itt is az arany középutat kell megtalálni. A CSS-ben a “line-height” opcióval tudjuk szabályozni a sorok közötti távolságot. Az én oldalamon eu 16px, a betűk pedig 11px nagyságúak. Én egy kicsit kevésnek találom az alap sorközt, így megemelem azt egy kicsit.
Példák:
Szűk sorköz, line-height:10px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.
Default sorköz, line-height:14px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.
Tág sorköz, line-height:26px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.
Padding, azaz távolságadás
Ezt a távolságadás dolgot most én találtam ki, ugorjunk is tovább róla. Nem olyan szép szó, aki tud jobbat, szóljon. De hogy mi is ez? A szöveget nem szabad más elemhez hozzáérinteni. Pl.: ne érjen hozzá a képekhez, a táblázat keretéhez, vagy bármi máshoz. A padding erre használatos, térközöket teremtünk vele elemek között. A padding használata szinte kötelező (igen, lehetnek kivételek, de ezt inkább hagyjuk most). A szöveg és többi elem közé mindig tegyünk közt, mert így szépen, egyszerűen lesz olvasható az írás.
Példák:
Padding nélkül
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.
Padding térközzel, kicist kellemesebben
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.
White space, azaz fehér tér
Első és legfontosabb: a white space nem feltétlenül kell, hogy fehér legyen. A kifejezést az üres helyek megnevezésére használják az informatikában, így a szövegszerkesztésben és a programozásban is. A white space-t használjuk, hogy egyensúlyt adjon, arányos és kontrasztos legyen az oldalunk. Ha sokat használunk belőle, akkor az eleganciát sugall.
A white space egyik legjobb tanulásának módja, ha megfogunk egy magazint. Van benne egy pár reklám. Figyeljük meg ezeket. A drága órák és autók gyártóinak reklámjaiban igen sok a fehér tér…
Megosztás
CSS itt is… Jelezzem méshol is, ha találok?
-é+á
Küldd csak :) A segítség mindig jól jön :)