Hét Mondriani Festmény

1.1.
Mondrian festménye
Piet Mondrian holland festő egyik képe nemrég igen jó áron kelt
el egy amerikai árverésen.
Mi most a Kompozíció vörössel, sárgával és kékkel című Mondrian-

képet fogjuk megfesteni.
Ne aggódj, csak HTML-t és CSS-t fogunk használni, így garantáltan

nem leszel festékes.
Mit fogunk megtanulni?
Ha jobban megnézed a képet, akkor láthatod, hogy kis, színes

négyszögekből áll össze, amelyek a méretükben és a
pozíciójukban különböznek egymástól.
A weboldalak is hasonlóképpen épülnek fel. A weboldalak

tervezésekor gyakori, hogy először egy drótvázat (wireframe)
rajzolunk, amelyen a nagyobb egységeket és azok egymáshoz
viszonyított helyzetét vázoljuk.
Kis képzelőerővel ez a festmény lehetne akár egy weboldal terve

is, mondjuk egy híroldalé. A piros dobozba kerülhetnének a fő
hírek, a bal oldali kis dobozokba valamilyen navigációs elemek,
alulra a szerkesztőség elérhetősége, és így tovább.
Ebben a modulban a festmény lemásolásán keresztül megtanulod,

hogyan lehet HTML-elemek és CSS-szabályok segítségével ilyen
elrendezéseket létrehozni.
Rajzold le magadnak egy papírra a kép vázát, hogy ismerkedj vele.
2.1. Hozd létre a vásznat
A festmény alapja a vászon. A digitális festményünk alapja is egy

virtuális vászon lesz.
Nyiss egy JSBin-ablakot, és a HTML-panelbe másold be a

következő kódot a <body> tagek közé:
<div></div>
HTML
Copy
Látszólag még nem történt semmi, a színfalak mögött azonban
létrejött a vászon, amire festeni fogunk. Csak még nincs színe,
tartalma és mérete.
Ha beírod a <div> tagek közé, hogy "vászon", máris láthatod, ahogy

megjelenik az Output-panelben a szöveg. A <div> tag a HTML-ben
azt a célt szolgálja, hogy különböző tartalmi egységeket (division,
section) csomagolhass bele, csoportosítva. A weblapok
kialakításánál leggyakrabban a <div> tageket méretezzük és
pozicionáljuk CSS segítségével, hogy létrejöjjön a weboldal
alapvető váza.
Adj méretet és színt a vásznunknak.
Most a CSS segítségével méretet és színt fogsz adni a vászonnak.

A CSS-szabályhoz szükséges egy kiválasztó (selector). Ha a mostani
esetben magát a <div> elemet használnánk, akkor az az összes
további <div> tagre is érvényes lenne, és nem tudnánk azokat
külön-külön pozicionálni. Különböztesd meg a vásznat:
<div id="canvas"></div>
HTML
Copy
id attribútum bármelyik HTML-tagnek adható. Ez az azonosítója
(identifier), így tudsz majd rá hivatkozni a CSS-szabályoknál és a
JavaScript-kódban is.
A CSS-ben az id elé egy kettős keresztet (#) kell írnod, hogy a

program megértse, mire szeretnél szabályt létrehozni:
#canvas {
...
}
CSS
Copy
A festmény tulajdonképpen egy négyzet. Adj ennek megfelelően a
CSS-panelbe írt kód segítségével méretet a vászonnak, és egy
háttérszínt, hogy látsszon is az eredmény:
#canvas {
width: 300px;
height: 300px;
background-color: ivory;
}
CSS
Copy
A width szabályozza a szélességet, a height a magasságot. Most
képpontokban (pixel, px) adtuk meg a méretet, így az ablak
méretétől függetlenül mindig fixen ekkora lesz.
A háttérszínt pedig nem hex-kóddal (pl. #fff4db) vagy rgba kóddal

(pl. rgba(255,0,0,0.1)) adtuk meg, hanem az angol nevével. Teljes
listát a név segítségével elérhető színekről itt találhatsz.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+1 tipp: Fontos: egy adott id attribútumot csak egy elemnek

adhatunk meg, ettől lesz egyedi, ezért tudjuk azonosításra
használni. Ehhez kapcsolódóan, egy elemnek egy id-t adjunk,
többet teljesen felesleges.
2.2. Akaszd fel a falra a képet
Kerüljön középre
A festmény jobban mutat a falra akasztva. Helyezd el a festményt

az oldal horizontális közepére igazítva:
#canvas {
width: 300px;
height: 300px;
margin: 0 auto;
}
CSS
Copy
+1 tipp: Emlékeztető: a margót rövidítésben (shorthand) is

megadhatod. A margin: 0 auto; esetén az első érték a felső és alsó, a
második érték a két oldalsó margó értéke lesz. Az automatikus két
oldalsó margó azt mondja a böngészőnek, hogy még nem tudjuk
mennyi legyen a pontos érték, de legyen a kettő egyenlő. Így a
tartalom középre kerül.
Világítsd meg
Már csak a megfelelő megvilágítás hiányzik, ezt árnyékkal fogjuk

érzékeltetni:
#canvas {
width: 300px;
height: 300px;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
CSS
Copy
A box-shadow (doboz-árnyék) több paraméterrel működik:
box-shadow: h-shadow v-shadow [blur] [spread] color;

CSS
Copy
A h-shadow az árnyék vízszintes irányú (horizontal) pozíciója, a v-
shadow pedig a függőleges (vertical). Ez a két paraméter (és egyes
böngészők esetén a szín) kötelező, a szögletes zárójelben
lévő blur (elmosódottság, homályosság) és a spread (kiterjedés) nem.
Az opcionális paramétereket sorrendben kell megadni (tehát
spread nem adható meg anélkül, hogy a blur értéke ne lenne
definiálva).
Próbáld módosítani az árnyékot. Írd át a számokat, törölj ki

néhány értéket, és adj meg plusz paramétert a szín előtt.
+1 tipp: Negatív értékeket is megadhatsz.
Mit határoz meg a margin: 0 auto; CSS-tulajdonság?
Az első érték (0) a felső margót határozza meg. A második érték

(auto) egy automatikus alsó margót határoz meg, ami azt jelenti a
böngésző számára, hogy nem tudjuk, mi lesz a pontos értéke.
Az első érték (0) a bal oldali margót határozza meg. A második
érték (auto) egy automatikus jobb oldali margót határoz meg, ami
azt jelenti a böngésző számára, hogy nem tudjuk, mi lesz a pontos
értéke.
Az első érték (0) a felső és alsó margót határozza meg. A
második érték (auto) a bal és jobb oldali margót határozza meg,
jelezve a böngésző számára, hogy az értékük legyen azonos.
Az első érték (0) a bal és jobb oldali margót határozza meg. A
második érték (auto) a felső és alsó margót határozza meg, jelezve
a böngésző számára, hogy az értékük legyen azonos.
3.1. A kép szerkezete

Ha a képet lerajzoltad, vagy megpróbáltad elképzelni kivágott kis
színes négyszögekből, akkor már kialakult egy struktúra a
fejedben.
A projekt példakódjában a festményt három sorra osztjuk:
 a piros négyszög sora,

 a vékony fekete csík sora és
 a kék négyszög sora.
+1 tipp: Általában nincs "egyetlen helyes út" a programozásban,

így ebben a feladatban is lehet, hogy a te fejedben is más
struktúra alakult ki, mint amit a példában használni fogunk. Ez
egyáltalán nem jelenti azt, hogy a te megoldási elképzelésed nem
lehet jó.
Hozd létre az első sort
Lépésről lépésre fogjuk elhelyezni a négyzeteket, elsőként a jobb

felső sarokban lévő pirosat.
Ehhez virtuálisan meg kell rajzolnod az első sort, ez fogja

tartalmazni a piros négyszöget:
div id="canvas">
<div id="first-row"></div>
</div>
HTML
Copy
A HTML-kódban az új div elemet beleágyaztuk a már korábban
elhelyezett másik div elembe (a már elkészített vásznunkra
festünk). Így a <div id="canvas"> elem lett a szülő (parent element), és
a <div id="first-row"> lett a gyermek elem (child element).
+1 tipp: A gyermek elem "örökli" (inherit) a szülő elem egyes
tulajdonságait (például ha már megadtad a szülő elemnek a
betűtípusát, nem kell újra megadnod a gyermek elemnél is, csak
ha ettől eltérőt szeretnél használni).
Ennek az új div elemnek is adtunk egy azonosítót: id="first-row".

Ennek segítségével tudsz majd rá külön hivatkozni.
+1 tipp: Érdemes már a kezdetektől fogva olyan azonosító neveket

használni, amelyek könnyen megfejthetően utalnak az azonosított
elemre.
+1 tipp: Ha egy id több szó összetételéből áll, válaszd el azokat

kötőjellel (-, angolul dash).
Adj méretet az első sornak
A piros négyzetet is tartalmazó első sor körülbelül a kép felső

háromnegyedét tölti ki. CSS-szabályként megadhatsz méreteket
százalékban kifejezve is, ilyenkor a tartalmazó elem méretei
lesznek a mérvadóak. Adj méretet az első sornak:
#first-row {
height: 75%;
width: 100%;
}
CSS
Copy
+1 tipp: Mivel a #first-row elemnek nincs külön definiált háttérszíne,

egyelőre nem látszik az oldalon. Adj neki ideiglenesen háttérszínt
(pl.: background-color: brown;), és akkor könnyebben figyelemmel
kísérheted, mi történik.
A #first-row tehát a #canvas gyermek eleme, annak pedig megadtad a

fix méretét. Ha a #canvas szélessége 500px, akkor a #first-row is
pontosan ilyen széles lesz. Ha a #canvas 500px magas, akkor a #first-
row elem ennek 75%-a, azaz 375px magas.
A szülő elem (<div id="first-square">) szélessége 100 pixel, a gyermek elem

(<div id="second-square">) szélessége 50%, a gyermek elem gyermek
elemének (<div id="third-square">) szélessége pedig 100%. Hány pixel
a #third-square elem szélessége?
25
50
100
200
Ellenőrzöm a válaszom
Ez igazán szép megoldás volt. Büszke lehetsz magadra!
3.2. A piros négyzet
Itt az idő, hogy az első igazi négyzetet is felvidd a vászonra.
Egy nagy négyzet jobb oldalt
Add hozzá a HTML-kódhoz a négyzetet (az első sorba "ágyazzuk

bele"):
<div id="canvas">
<div id="first-row">
<div id="big-rectangle"></div>
</div>
</div>
HTML
Copy
És add meg a méreteit:
#big-rectangle {
height: 100%;
width: 75%;
}
CSS
Copy
Látsz valamit? Még nem, pedig valószínűleg mindent jól csináltál.
Mivel a #big-rectangle elemnek nincs külön definiált háttérszíne,
egyelőre nem látszik az oldalon.
Színesen izgalmasabb
Előkészítjük a színeket. Ezúttal nem az egyedi

azonosító id attribútumot fogjuk használni, hanem
az osztályokat (class). A class="osztaly-neve" attribútum ugyanúgy
adható a HTML-elemeknek, mint az id. A különbség az, hogy
ugyanazt a class-t több elemnek is megadhatjuk, míg egy
adott id csak egy adott elemhez tartozhat. A többször előforduló,
több elemre is felhasználható dolgokat szoktuk jelölni azonos
osztállyal.
Adj "red" osztályt a nagy négyzetnek:
<div id="big-rectangle" class="red"></div>
HTML
Copy
A CSS-kódban az osztályokra a .osztaly-neve kiválasztóval
hivatkozhatsz. Írj egy szabályt a frissen létrehozott osztályra:
.red {
background-color: red;
}
CSS
Copy
Ha minden sikerült, akkor a nagy négyzeted pirosra színeződött.
Milyen CSS-szabályt használnál ahhoz, hogy egy <div class="brown"> elem
háttérszínét barnára állítsd?
brown {background-color: brown;}

#brown {background-color: brown;}
.brown {background-color: brown;}
class="brown" {background-color: brown;}
Úgy bizony!
3.3. A piros négyzet a helyére kerül
A négyzet már piros, de még egyelőre a bal oldalon van. Több

módszer is létezik arra, hogy áthelyezzük a jobb oldalra, mi a
"float" ("lebegtetés") módszert fogjuk használni. Tanuljuk meg,
hogyan lehet azt "jobbról belebegtetni".
A HTML-elemeket a böngésző a leggyakrabban sorban olvassa be,

és ebben a sorrendben is jeleníti meg, egymás után. Ebből a
sorrendből tudunk kiragadni egyes elemeket (képzelj el például
egy újságcikket, ahol a bekezdések egymás után jelennek meg, és
a szöveggel szeretnénk egy képet "körbefolyatni"). Erre jó a
CSS float.
Az alábbi videó szemléletesen megmutatja, hogyan is

működik float parancs. Kérlek, nézd meg (3 perc):
Hozz létre egy új osztályra vonatkozó szabályt a CSS-kódban:
.right {
float: right;
}
CSS
Copy
A float tehát kiemeli az elemet a megjelenítés normális folyamából,
a float:right; jobb oldalra "lebegteti", a float:left; pedig balra.
Adj a piros négyzetnek egy új, right osztályt:
<div id="big-rectangle" class="red right"></div>
HTML
Copy
+1 tipp: Ahogy látod, nemcsak hogy több elemnek lehet ugyanazt

az osztályt megadni, de egy elemnek akár több class-t is adhatsz
egyszerre. Ehhez az attribútum értékeit szóközzel kell
elválasztanod. Ezért fontos az is, hogy kötőjellel válaszd el a
szavakat, ha szóösszetételt akarsz használni a class elnevezésében.
Hogyan adnál három különböző osztályt egy <div> elemnek?

<div class="grey, left, lesson-content">
<div class="grey left lesson-content">
<div class="grey, left, lesson content">
<div class="grey left lesson content">
Helyes válasz. Piros pont jár érte!

3.4. Az első fekete elválasztó
Most "megfestjük" a fekete elválasztó négyszöget. Két dologra

lesz ehhez szükségünk, a fekete színre, újra felhasználható
osztályként:
.black {
background-color: black;
}
CSS
Copy
És egy következő elemre a HTML struktúrában, a megfelelő helyre
beágyazva:
<div id="canvas">
<div id="first-divider"></div>
</div>
</div>
HTML
Copy
Az új elem is az első sorba (#first-row) került, de az eddigiekkel
ellentétben nem a legbelső elembe ágyazva, hanem azzal egy
szintre. A #big-rectangle és a #first-divider így nem szülő-gyermek,
hanem testvér elemek (sibling elements).
+1 tipp: Ezen a példán jól látszik, mennyire megkönnyíti a kód

értelmezését a helyesen alkalmazott behúzás (indentation). Az új
elemet új sorban kezdve az azonos szinten lévő, testvér (sibling)
elemeket azonos behúzással kezdjük, az egymásba ágyazott
elemek esetén a gyermek elemet (child element) a szülő elemhez
(parent element) képest egy behúzással beljebb kezdjük.
Méretezd be a fekete elválasztó négyszöget:
#first-divider {
height: 100%;
width: 3%;
}
CSS
Copy
Színezd és rendezd jobbra
Fesd feketére (adj neki black classt) és "lebegtesd" ezt is jobbról (adj
neki right classt).
Sikerült? (Emlékeztető: több osztályt szóközzel elválasztva tudsz

megadni.)
Cseréld meg ideiglenesen a HTML-kódban a két négyszögre

vonatkozó kód sorát. Mi történt?
A float a HTML-elemek előfordulásának sorrendjében érvényesül,

tehát – amíg kiférnek egy sorba – a legelső sorban szereplő elem
lesz a legszélső.
Három elemed van, mindegyik jobbra floatolva (lebegtetve): <div id="first-
element" class="right red"></div><div id="second-element" class="right
black"></div><div id="third-element" class="right yellow"></div> . Milyen
sorrendben fognak az elemek megjelenni balról jobbra?
#third-element, #second-element, #first-element

#first-element, #second-element, #third-element
#first-element, #third-element, #second-element
#third-element, #first-element, #second-element
Nagyon vágod a témát! Igen, ez a jó válasz.
3.5. A felső oszlop
A legfelső sor bal szélén tulajdonképpen egy oszlopot láthatsz,

három négyszöggel egymás alatt; két körülbelül azonos méretű
világos téglalapot, és közöttük egy fektetett fekete téglalapot.
Ezt az egész oszlopot érdemes becsomagolnunk egy HTML

egységbe, mert így egyszerre tudjuk majd pozicionálni a
tartalmát.
Hozd létre a HTML struktúrát a megfelelő azonosítókkal és

osztályokkal:
<div id="first-column" class="right">

<div id="first-medium-rectangle"></div>
<div id="second-divider" class="black"></div>
<div id="second-medium-rectangle"></div>
</div>
HTML
Copy
A .right classt elég csak a három négyszöget tartalmazó #first-
column elemnek megadni, automatikusan érvényesül az összes
benne foglalt elemre.
Adj méretet az egyes elemeknek
Az első oszlop az első sor maradék helyét foglalja el. Az első

sorban van eddig a #big-rectangle (75%) és a #first-divider (3%). A
fennmaradó hely 22% (100-75-3).
#first-column {
height: 100%;
width: 22%;
}
CSS
Copy
Próbáld ki, mi történik, ha ennél nagyobb százalékot adsz meg az
első oszlop szélességének.
+1 tipp: Adj ideiglenesen egy színező osztályt a #first-column-nak,

hogy lásd, mi történik.
Az elválasztó fekete téglalapnak:
#second-divider {
height: 3%;
width: 100%;
}
CSS
Copy
Az első oszlop összes magasságából (100%), eddig a fekete
téglalap foglal csak el helyet (3%). A két világos téglalap nagyjából
egyenlő arányban osztozik a maradék helyen: 97 / 2 = 48.5% lesz a
méretük:
#first-medium-rectangle {
height: 48.5%;
width: 100%;
}
CSS
Copy
#second-medium-rectangle {
height: 48.5%;
width: 100%;
}
Mi lenne a #first-medium-rectangle és a #second-medium-rectangle magassága, ha

a #second-divider magassága 6% lenne, és a három téglalap kitöltené az első
oszlop teljes magasságát?
42.5%
45.5%
46.5%
47%
Abszolút így van. Gratulálunk!
magassága egyaránt 3%-ra van beállítva. A tényleges

#second-row
magasságuk azonos a képen?
Igen, ha a magasságuk azonos százalékértékre van állítva,

akkor mindig ugyanolyan magasak lesznek.
Nem, a tényleges magasságuk nem azonos, pedig annak
kellene lennie. Ez valamilyen CSS bug lehet!
Nem, a tényleges magasságuk nem azonos, mert a #second-
divider magassága a #first-column magasságának 3%-a, a #second-
row magassága pedig a teljes #canvas magasságának 3%-a.
Nem, a tényleges magasságuk nem azonos, mert a #second-
divider magassága a #first-medium-rectangle magasságának 3%-a,
a #second-row magassága pedig a teljes #canvas magasságának 3%-a.
Helyes válasz. Piros pont jár érte!
Hozd létre a festmény harmadik sorát önállóan, és másold be a

JSBin-linkedet a szövegdobozba. Ne aggódj, ha nem sikerül elsőre,
kísérletezz nyugodtan. Ha pedig úgy érzed, hogy teljesen
elakadtál, akkor csak másold be a linkedet, és menj tovább – a
következő oldalon vár a segítség.
A megoldásod:
https://codepen.io/SziRom/pen/JjpObdN
4.3. Az alsó sor egy lehetséges megoldása
Mutatok egy lehetséges megoldást az előző feladatokra.
A feladatok:
1. készítsd el a harmadik sort tartalmazó virtuális sort (#third-row)

2. add meg a harmadik sor méreteit (teljes szélesség,
magasságban az első két sor után fönnmaradó hely)
3. készítsd el a harmadik sor jobb szélén lévő oszlopocskát
virtuálisan (#last-column, a harmadik sor gyermek eleme), a
szélessége legyen 5%
4. rendezd az oszlopocskát jobbra a .right osztály használatával
5. csomagolj három különböző téglalapot (#first-tiny-
rectangle, #third-divider, #second-tiny-rectangle) az oszlopocskába
(a #last-column-on belüli gyermek elemek egymás testvérei
[siblings])
6. színezd a #third-divider elemet feketére a .black osztály
alkalmazásával, és állítsd a magasságát 10%-ra
7. fesd az alsó négyszöget (#second-tiny-rectangle) sárgára egy új
osztály (.yellow) létrehozásával, és állítsd a magasságát 45%-ra
8. hozz létre egy új elemet a fekete téglalapnak (#fourth-divider),
add meg a szélességét (3%), és fesd feketére
a .black osztállyal (ne felejtsd el jobbra rendezni a .right class
használatával)
9. hozd létre a széles, világos téglalapot (#wide-rectangle), állítsd a
szélességét 67%-ra, és rendezd jobbra a .right osztállyal
10. adj hozzá egy újabb fekete elválasztó téglalapot (#fifth-
divider), add meg a szélességét (3%), és fesd feketére
a .black osztállyal (ne felejtsd el jobbra rendezni a .right class
használatával)
11. végül add hozzá a kék négyzetet (#small-rectangle), állítsd a
szélességét 22%-ra, és fesd kékre a .blue class létrehozásával
(ne felejtsd el jobbra rendezni a .right osztállyal).
HTML
<div id="third-row">
<div id="last-column" class="right">
<div id="first-tiny-rectangle"></div>
<div id="third-divider" class="black"></div>
<div id="second-tiny-rectangle"
class="yellow"></div>
</div>
<div id="fourth-divider" class="black right"></div>
<div id="wide-rectangle" class="right"></div>
<div id="fifth-divider" class="black right"></div>
<div id="small-rectangle" class="blue right"></div>
</div>
HTML
Copy
CSS-pozíciók és méretek
#third-row {
height: 22%;
width: 100%;
}
#last-column {
height: 100%;
width: 5%;
}
#first-tiny-rectangle {
height: 45%;
width: 100%;
}
#second-tiny-rectangle {
height: 45%;
width: 100%;
}
#third-divider {
height: 10%;
width: 100%;
}
#fourth-divider {
height: 100%;
width: 3%;
}
#fifth-divider {
height: 100%;
width: 3%;
}
#wide-rectangle {
height: 100%;
width: 67%;
}
#small-rectangle {
height: 100%;
width: 22%;
}
CSS
Copy
CSS szín-osztályok
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
CSS
Copy
Ha nagyon elakadtál, itt egy CodePen link, nézz körül, hátha segít.
Feladat:
Ha szükséges, javítsd ki a saját kódod. Másold ide a kicsinosított
festményed JSBin-linkjét.
A megoldásod:
https://codepen.io/SziRom/pen/JjpObdN
5.1 Fess szabadon

Játssz egy kicsit!
1. Méretezd át a vásznat, és nézd meg mi történik.

2. Helyezd át a színező osztályokat más elemekre, hogy "átfesd"
a képet.
3. Mondrian képén nem pont ezeket a színeket használta.
Keresd meg a legjobban hasonlító színeket itt.
Mi mindent tanultál ebben a projektben?
HTML
<div id="canvas">
<div id="first-divider" class="black right"></div>
</div>
</div>
HTML
Copy
CSS
#first-row { /* id, mint

kiválasztó */
width: 300px; /* szélesség fix
képpontokban */
height: 75%; /* magasság
relatívan megadva */
box-shadow: 15px 15px 10px gray; /* árnyék -- h-
shadow v-shadow [blur] [spread] color */
}
.right { /* class, mint

kiválasztó */
float: right; /* belebegtetés
jobbról */
}
CSS
Copy
+1 tipp: Kommentek a kódban: A fenti kódsorokban látsz a sorok

végén magyarázatokat, amelyeket egy /* */ jelzés választ el a többi
résztől. Ezek CSS-kommentek. Ami a két jel (/* */) közé kerül, azt a
böngésző figyelmen kívül hagyja a kód beolvasásakor, így tudsz
közvetlenül a munkádba kommentelni. Ezek a kommentek több
szempontból is hasznosak: egyrészt tudod velük rendszerezni a
saját kódodat, másrészt hagyhatsz magyarázatokat, utasításokat
saját magad vagy más fejlesztők számára. HTML-kommenteket a
 jelek közé zárva tudsz írni.
Feladat:
Másold ide a legjobban sikerült festményed JSBin-linkjét.
A megoldásod:
https://codepen.io/SziRom/full/JjppWJq

Hét Mondriani Festmény

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hét Mondriani Festmény

Uploaded by

Copyright:

Available Formats

1.1.

Mi most a Kompozíció vörössel, sárgával és kékkel című Mondrian-

Ne aggódj, csak HTML-t és CSS-t fogunk használni, így garantáltan

Mit fogunk megtanulni?

Ha jobban megnézed a képet, akkor láthatod, hogy kis, színes

A weboldalak is hasonlóképpen épülnek fel. A weboldalak

Kis képzelőerővel ez a festmény lehetne akár egy weboldal terve

Ebben a modulban a festmény lemásolásán keresztül megtanulod,

2.1. Hozd létre a vásznat

A festmény alapja a vászon. A digitális festményünk alapja is egy

Nyiss egy JSBin-ablakot, és a HTML-panelbe másold be a

Ha beírod a <div> tagek közé, hogy "vászon", máris láthatod, ahogy

Adj méretet és színt a vásznunknak.

Most a CSS segítségével méretet és színt fogsz adni a vászonnak.

A CSS-ben az id elé egy kettős keresztet (#) kell írnod, hogy a

A háttérszínt pedig nem hex-kóddal (pl. #fff4db) vagy rgba kóddal

+1 tipp: Fontos: egy adott id attribútumot csak egy elemnek

2.2. Akaszd fel a falra a képet

A festmény jobban mutat a falra akasztva. Helyezd el a festményt

+1 tipp: Emlékeztető: a margót rövidítésben (shorthand) is

Már csak a megfelelő megvilágítás hiányzik, ezt árnyékkal fogjuk

box-shadow: h-shadow v-shadow [blur] [spread] color;

Próbáld módosítani az árnyékot. Írd át a számokat, törölj ki

+1 tipp: Negatív értékeket is megadhatsz.

Mit határoz meg a margin: 0 auto; CSS-tulajdonság?

Az első érték (0) a felső margót határozza meg. A második érték

3.1. A kép szerkezete

A projekt példakódjában a festményt három sorra osztjuk:

 a piros négyszög sora,

+1 tipp: Általában nincs "egyetlen helyes út" a programozásban,

Hozd létre az első sort

Lépésről lépésre fogjuk elhelyezni a négyzeteket, elsőként a jobb

Ehhez virtuálisan meg kell rajzolnod az első sort, ez fogja

Ennek az új div elemnek is adtunk egy azonosítót: id="first-row".

+1 tipp: Érdemes már a kezdetektől fogva olyan azonosító neveket

+1 tipp: Ha egy id több szó összetételéből áll, válaszd el azokat

Adj méretet az első sornak

A piros négyzetet is tartalmazó első sor körülbelül a kép felső

+1 tipp: Mivel a #first-row elemnek nincs külön definiált háttérszíne,

A #first-row tehát a #canvas gyermek eleme, annak pedig megadtad a

A szülő elem (<div id="first-square">) szélessége 100 pixel, a gyermek elem

Ez igazán szép megoldás volt. Büszke lehetsz magadra!

3.2. A piros négyzet

Itt az idő, hogy az első igazi négyzetet is felvidd a vászonra.

Egy nagy négyzet jobb oldalt

Add hozzá a HTML-kódhoz a négyzetet (az első sorba "ágyazzuk

Előkészítjük a színeket. Ezúttal nem az egyedi

Adj "red" osztályt a nagy négyzetnek:

<div id="big-rectangle" class="red"></div>

brown {background-color: brown;}

3.3. A piros négyzet a helyére kerül

A négyzet már piros, de még egyelőre a bal oldalon van. Több

A HTML-elemeket a böngésző a leggyakrabban sorban olvassa be,

Az alábbi videó szemléletesen megmutatja, hogyan is

Adj a piros négyzetnek egy új, right osztályt:

<div id="big-rectangle" class="red right"></div>

+1 tipp: Ahogy látod, nemcsak hogy több elemnek lehet ugyanazt

Hogyan adnál három különböző osztályt egy <div> elemnek?

Helyes válasz. Piros pont jár érte!

Most "megfestjük" a fekete elválasztó négyszöget. Két dologra

+1 tipp: Ezen a példán jól látszik, mennyire megkönnyíti a kód

Méretezd be a fekete elválasztó négyszöget:

Színezd és rendezd jobbra