Cikkajánló
Készítettem egy újabb .psd fejlécet, ami szabadon letölthető. A fejlécen Hilary Duff díszeleg :) A nagyon alap kinézetet ez a fejléc ihlette, csak én jobban ki díszítettem plusz inkább
Felkerültek a galériába a Portfólió albuma a nagyjából pár hónapja rendelt kinézetek. Nem tudom, hogy mi történt főleg most ősszel, mert magamhoz képest elég sok rendelés összegyűlt. Főleg azért
Sokszor feltűnik, hogy használtok egyedi betűtípust a Google Fonts-ról. Ami egy nagyon jó szokás igazából és mindenkinek ezt is ajánlom használatra, mert kevesebb macera és biztos, hogy mindenhol a
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
2015. május. 09.
G-Portálos CSS kódok részletezése: body
Egyéb

Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már készen vannak és az adott cikkhez tartozhatnak.
 
Elsőnek a body CSS kódrésszel kezdünk. Itt adható meg például az oldalatok háttérszíne vagy szín helyett háttérkép is beilleszthető. A fejléchátteret is itt kell megadni, ha olyan fejlécet szeretnétek, ami majdnem minden böngészőben végigér. Az alsó gögetősávot is a body-n belül lehet eltüntetni. Betűtípus és betűméret megadása is ajánlatos, mert az olyan betűket, ami netalántán egyik-másik CSS kódrészben sincsen benne a G-Portálon, akkor a body-ban megadott stílust fogja alkalmazni. Na, de nézzük a kódot és a részletes leírást hozzá:
 

body {
background: url(/images/fejlec-hatter.png), url(/images/hatter.png);
background-position: center top, center;
background-repeat: no-repeat, repeat;
background-attachment: fix;
cursor: default;
font-family: Arial;
font-size: 14px;
color: #585858;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
}

 
A háttérre vonatkozó rész:
 

  • background: url(/images/fejlec-hatter.png), url(/images/hatter.png); – így adjátok meg ha fejléchátteret és háttérképet szeretnétek az oldalon. A sorrend is fontos. A fejlécháttér megy előre, aztán a háttérkép URL címe. Ha csak háttérszínt szeretnétek például, akkor a sor így néz ki: background: #000000;
  • background-position: center top, center; – a háttérképek pozíciója. Ha fejlécháttér is van, akkor az minden esetben a center top, azaz középen és felül helyezkedik el. Ezért nem fog elcsúszni egy böngészőben sem a fejléc. A hátteret én center-re szoktam állítani. Persze attól is függ, hogy milyen háttér van. A background-position rész nem kell akkor, ha csak háttérszínt használsz.
  • background-repeat: no-repeat, repeat; – itt azt állítjátok be, hogy a háttér ismétlődjön-e valahogyan vagy sem. Jelen esetben ez megint úgy van most megírva, hogy az első rész (no-repeat) a fejlécháttérre vonatkozik. Azt ugye nem ismételjük, mert azt akarjuk, hogy csak felül a lap tetején jelenjen meg. A második érték a repeat- ez kellhet akkor, ha pl. csak háttérszínt adtok meg, de akkor is, ha háttérképet. Persze a repeat beállítás itt sem törvényszerű, mert a háttértől is függ, hogy mit fogtok oda írni.
  • A hátteres beállításokról még részletesebben itt olvashattok: Több háttér oldaladnakHáttér nem csúszik el Fejléc vagy mögötte a háttér beállítása
  • background-attachment: fix; – a háttér nem gördül, amikor lefelé böngésztek az oldalon. Ha a scroll-t használjátok a fix helyett, akkor a háttér is gördül böngészés közben.

 

 
Kurzor kinétete
 

  • A kurzor kinézete alapból egy nyilacska, de ha linkre viszitek az egeret, akkor átvált egy mutató ujjú kézre. Ebben a kódban ez most cursor: default; ami azt jelenti, hogy nyilacska. És ez megváltoztatható úgy, hogy a default helyett mást írtok oda. Példákat ezen az oldalon rengeteget találtok névvel és demóval együtt: CSS cursor
  • De a kurzort ti magatok teljesen egyedivé is alakíthatjátok. Erről bővebben itt találtok leírást:  Javascript kurzorok

 
Betűstílus
 
Alább látható, hogy egy szövegnek mi mindent lehet megadni. Azt hiszem a legtöbb mindent felsoroltam, bár lehet kimaradt néhány dolog, de a fontosak azok itt vannak. Kiemeltem a felsorolásban azokat, amiket a body-ban érdemes megadni. A többit a G-Portálon más CSS kódrészekben ajánlatos majd alkalmazni, de amikor majd azokról lesz szó, úgy is leírom, hogy mit hol ;)
 

  • font-family: Arial; – ezzel a betűtípussal fog látszódni a szöveg a G-Portálon
  • font-size: 14px; – a betűtípus nagysága.
  • color: #585858; – a szöveg színe
  • text-decoration: none; – ez azt jelenti, hogy az adott szövegrész nincs aláhúzva. A none helyett az underline is alkalmazható, (de nem a body részben), ami azt jelenti, hogy az adott rész alá lesz húzva. Használható pl. kiemeléseknél vagy linkeknél, stb.
  • text-align: justify; – a tartalom sorkizárt lesz. A body-ban nem annyira javasolt, inkább a szélső és középső modulokban. a justify helyére lehet még írni, hogy left, center vagy right, ami értelemszerűen a bal, közép vagy jobb oldalt jelenti. Vagy is a szöveg vagy modulcím balra, középre vagy jobbra rendezett lehet.
  • text-shadow: 1px 1px 1px #000000; – ezzel árnyékot lehet adni a szövegnek. De azért ne essünk vele túlzásba, mert a túl sötét és túl nagy árnyékok botrányosan elcsúnyítják az oldal kinézetét plusz a tartalom is nehezen olvasható tőle. Csak mértékkel használjátok.
  • font-weight: normal; – ez a betű olyan stílusa, amivel normálisan írsz. De ez helyett lehet a bold – ami megvastagítja a szöveget vagy lehet az italic, ami dőltté teszi a szöveget. A body-ban a normal javasolt. A bold és italic pl. mehet kiemelésekhez vagy linkekhez.
  • text-transform:; uppercase; – ez most úgy van beállítva, hogy minden szó nagy nyomtatott betű. A body-ban egyáltalán nem kell a text-transform-ot használni, inkább kiemelésekhez vagy linkekhez. Az uppercase helyett írható meg a lowercase, amitől minden betű kisbetű lesz, vagy a capitalize, amiben minden szónak az első betűje nagy betű. Példát itt találtok: text-transform
  • letter-spacing: 2px; – a betűk közötti távolság. Egyáltalán nem kötelező a használata a bodyban. Javasolt a modulfejlécekhez inkább.
  • line-height: 20px; – a sorok közötti távolság. Ennek a használata javasolt, de nem azért, hogy minél közelebb vigyétek a sorokat egymáshoz. Éppen ellenkezőleg. Arra használjátok, hogy kicsit távolítsátok el a sorokat egymástól a könnyebb olvashatóság érdekében.
  • word-spacing: 5px; – szavak közötti távolság. Egyáltalán nem kötelező a használata.
  • A szövegszerkesztéssel kapcsolatban kettő cikk is készült már, amiket itt olvashattok: Szövegszerkesztés weboldalonBetűtípus használata weboldalon

 
Görgetősávok eltüntetése
 
ez a két sor szolgál arra, hogy a lap alján ne legyen görgetősáv.  De ha valakit nem zavar alul, akkor nem kell használni ezt a kódrészt.
 
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;

Kapcsolódó bejegyzések

lindadesign
1 781 megtekintés

Előző, következő cikk

Leighton Meester egész sablon

Készítettem a napokban is egy teljes kinézetet, bár most ezt nem kódoltam be, mert ahhoz már nem volt kedvem, így simán Photoshop formátumban tölthető le és használható fel majdnem bármilyen oldalon ;) Akár G-Portálon vagy WordPress sablonak, de sima

G-Portálos CSS kódok részletezése: site

2. rész   Ebben a részben a .site kódrészről írok kicsit bővebben. Maga a kód így néz ki   .site { /* oldal szélessége */ width: 1018px; }   Általában mást nem is kell itt megadni, csak az oldal

 

Hozzászólások