Kategória: HTML / CSS

Teljes méretű, rögzített háttérkép

Gyakran alkalmazott dizájn elem a böngésző ablakot teljesen kitöltő, annak méretéhez mindig alkalmazkodó, rögzített háttérkép. Valahogy így: See the Pen WzQbOw by zeon (@zeon) on CodePen. Első lépésként keressünk egy megfelelő felbontású képet (ajánlott legalább fullHD, 1920×1080). Készítsük elő az…

HTML5 képek

Az <img> elem Egy HTML dokumentumban az <img>  elemmel tudunk képet megjeleníteni. Az <img>  elemnek két kötelező attribútuma van: a src=””  és az alt=”” . Ezen kívül használhatók még a height  és a width  attribútumok, de inkább célszerűbb CSS segítségével megadni…

Responsive Web Design (RWD) 2.

Az előző bejegyzésben létrehoztunk egy egyszerű reszponzív grid rendszert, amelynek melynek segítségével könnyen lehet az oldal tartalmát elrendezni. A mintapélda jól nézett ki desktop méretű kijelzőn, mobilon kevésbé. Media Query A media query-ket (média lekérdezés) CSS3-ban vezették be. A media…

Responsive Web Design (RWD) 1.

Mi az a Responsive Web Design? A responsive web desing lehetővé teszi, hogy a weboldal minden eszközön jól nézzen ki. A responsive web design csak HTML és CSS technikát használ, nem program (pl. JavaScript). Legjobb felhasználói élmény elérése A weboldalakat különböző…

Tipográfia, betűkép, betűtípus, ikonok…

Egy esztétikus oldal megtervezésekor az elrendezés mellett szintén fontos a különböző szövegrészekben alkalmazott betűk kinézete. Néhány alapfogalom a betűkkel kapcsolatban melyek gyakran keverednek: tipográfia: “A tipográfia nyomtatott betűkkel foglalkozó szakma és művészeti ág…” betűkép (typeface): az amit látunk, a betűk…

CSS3 mértékegységek

Számos CSS tulajdonságnál (width,  margin , border , padding , stb…) lehet (hossz)méretet megadni. Egy méret egy értékből (value) és egy mértékegységből (unit) áll. Az érték és a mértékegység egybe írandó, tehát nem lehet közöttük szóköz, ennek az az oka, hogy sok tulajdonságnál van…

Egyszerű navigációs sáv

Az előző példában csak az oldal elrendezésével foglalkoztunk, így a navigációs sáv helyén is csak egy egyszerű szöveg volt. Most ennek elkészítéséről lesz szó, az előző példa kiegészítésével. Valahogy így: A navigáció jellemzői: zöld hátterű elem: azt jelzi, hogy melyik oldal van…

HTML és CSS kódok ellenőrzése

Az oldalaink készítésekor használt HTML és CSS kódok szabályait szabványok rögzítik, amelyek betartására mindenképpen törekedni kell, ha szabályos oldalakat akarunk készíteni. Mindkét szabvány leginkább csak angolul érhető el és igen terjedelmesek (HTML5, CSS3). Mit tehetünk ha mégis szeretnénk szabványkövető oldalakat…

Egyszerű oldal elrendezés kialakítása

A képen egy szokásos oldal elrendezés (layout) látható: Oldal elrendezés kialakítása <div> tag-ekkel A zölddel jelölt body elemünk a legkülső, ami a kijelzőn megjelenik, és kitölti azt. Ezen belül minden téglalapnak egy-egy <div> elem felel meg. A pirossal jelölt #wrapper  azonosítójú…