Code n' Social

Miről szól ez a lecke?

A CSS segítségével tudunk reagálni, stílust váltani, ha kurzort helyezünk az elemek fölé. Ha egérkattintásra, gomblenyomásra szeretnénk reagálni stb. JavaScriptre van szükségünk – erről a következő fejezetben fogunk tanulni.
Ebben a leckében megnézzük, hogy milyen „varázslatot” végezhetünk kizárólag az elemek és a kurzor pozicionálásával és néhány kép effektus használatával. (Pl: homályosítás meg fekete-fehér színezés)

Új CSS tulajdonságok ebben a leckében:
opacity: ezt a tulajdonságot használjuk egy HTML elem áttetszőségi szintjének az állításához. A tulajdonság értéke egy szám lehet 0 és 1 között, ahol az 1 az áttetszőség teljes hiányát jelenti, 0-ra pedig teljesen eltűnik az elem.
filter: ezt a tulajdonságot arra használjuk, hogy módosítsunk a beszúrt képeket, effektusokat rendeljünk hozzá. Lehetséges értékek: grayscale(100%), blur(5px) stb.
box-shadow: ezt a tulajdonságot használjuk arra, hogy árnyékhatást adjunk egy HTML elemhez. Három értéket mellékelhetünk vízszintes, függőleges árnyék mérethez, a harmadik a homályosítás mértéke. A végére egy színt is mellékelhetünk, amit az árnyékra akarunk alkalmazni.
grid-template-columns: rács megjelenítést használva több oszlopba oszthatjuk egy tároló HTML elem tartalmát/elemeit. Az értékeket megadhatjuk pixelben, százalékban vagy adhatjuk az auto szavat értéknek, hogy egyenletesen osszuk el a tartalmat.
clear: ez a tulajdonság alkalmas az elemek sorának megtörésére, ha „lebegtetve” vannak (a float tulajdonságot alkalmaztuk rájuk). A lehetséges értékek: left, right és both – attól függően az elem, melyik oldalán akarjuk megszakítani a lebegő elemek sorát.

Kiegészített CSS tulajdonságok:
display: grid – ezt a beállítást használva egy tároló elemre (olyan elem, amely más HTML elemeket tartalmaz) könnyen és elegánsan elhelyezhetünk elemeket. Ez a beállítás szükséges a grid-template-columns használatához.

Kiegészítések:
● Az opacity (áttetszőség) állítást főként képekre és hátterekre szoktuk alkalmazni.
● Egyben adhatjuk meg az opacity és background-color tulajdonságok értékeit, használva az rgba tulajdonságok, amelynek negyedik értéke az áttetszőség. Példa: rgba(100,100,100,0.7);

Példa grid(rács) elrendezésre:

A fenti képen négy gombunk van egy szakaszban, amelyeket egy kétszer kettes rácsban jelenítünk meg. Figyeld meg az elemek megjelenési sorrendjét.

A display: grid; beállítást kell alkalmazni a szakaszra (a <div> részre), majd meghatározni az oszlopok számát és méretét. Egyéb beállításokat is lehet végezni a rácsokkal kapcsolatban, érdekes lehet utánaolvasni.

Példák képbeállításokra és elemek lebegtetésére:

A fenti példában minden elem balra van „lebegtetve”. A rácsos elrendezéssel ellentétben, a lebegő elemek kitöltik a teljes sort. A böngésző ablakot átméretezve az elemek helyzete újraértékelődik. Hasonló eredményt érhetünk el a display:inline-block; beállítással.
A két kép közötti különbség az, hogy az első képre blur effektus van állítva.
A képek a lebegtetés miatt, a bekezdések után folytonosan kellene következzenek, de a clear tulajdonság állítása left (bal) értékre, új sorra térítést eredményez.
Az árnyék 3 pixel jobbra és lent. A harmadik 3 pixel érték homályosítást eredményez (blur) az árnyékra. Az árnyék színe zöld (green).

Feladatok

1. A HTML dokumentumokban található egy galéria mappa. Helyezze be a képeket a mappából a index.html fájl, mielőtt a tartalomosztály befejező címkehez a következő lépések követésével:

adjon hozzá div-t , a class-al együtt;
a galéria div belsejében helyezze be az img címkékbe, a galéria mappában lévő összes képet;
4. képre van szükségünk egy sorban, és mivel a tartalom szélessége 1000 pixel, így az egyik kép szélessége 250 képpontos és inline-block megjelenítés, hogy egymás után állítsák be őket. Itt látni fogjuk, hogy a képek még mindig nem lesznek 4-es sorban, és ezt az inline-block kijelző okozza. Ennek megszüntetéséhez a 0-as betűméretet és a 0-as magasságot kell beállítanunk a galériában. Ezenkívül állítson be 20 képpontos alsó margót a galéria osztályba.
ha az egeret a képek fölé helyezzük, szürkeárnyalatos hatást kell kapniuk.

Tekintsd meg az eredményt

2. A aspect.html fájlban található a kód kódja (a page_image , amelynek van néhány stílusa a CSS fájlban egy régebbi kurzusból). Fokozza a kép hozzáadását az árnyékot és a következő szöveget egy átlátszó, fekete színű mezőben a kép felett:
- Először, oldja meg a problémát.
Ezután írja be a kódot

A szükséges lépések a következők:
A HTML dokumentumban adja hozzá a szöveget egy <div>; és egy osztálynév: img_text . Az osztályoldalas kép és a szöveg képét egy másik < div > A szöveget abszolút helyzetben kell elhelyezni, de az abszolút pozícionáláshoz egy magasabb pozíciójú tárolóra van szükség. Adjon hozzá egy osztályt az újonnan hozzáadott tartályhoz, az úgynevezett img_box . A img_box CSS beállításainak a következőknek kell lenniük: relatív pozicionálás anélkül, hogy hatékonyan mozgatná a dobozt (a szöveg referenciaként használható) Pozícionálása), a soros blokk megjelenítése és a z-index értékének -1-ig való meghatározása (különben a kép görgetés közben csúszik a menü fölé).
A img_tex mező CSS beállításainak a következőknek kell lenniük: abszolút pozicionálás 20 képpont távolságot az alsó és a bal oldaltól , adjunk hozzá fekete háttér átláthatósággal, adjunk hozzá párnát, szövegméretet, színt és nagybetűket.

Tekintsd meg az eredményt

3. Hozzon létre egy új HTML-fájlt a gallery.html nevével. Másolja vagy írja be a HTML-dokumentumhoz szükséges struktúrát, hozzon létre egy külön CSS-fájlt ( style2.css ), amely szintén a html fejben. Hozzon létre egy egyszerű galériát a fenti lépések szerint:

<div>címke, az <img>; címkék a galéria mappában található képekre vonatkoznak. Minden alkalommal két képet tartalmazzon: egy kis és egy nagy példányt használunk. Használjon azonosítót a szakasz (a galéria2) és a két osztály megkülönböztetéséhez a kis és nagy képek között. Az elsőnek a kicsinek, a másodiknak a nagynak kell lennie.

A szakasz a 60% -ot foglalja el. Böngészőablakban. A képeket három rácsos automatikus rácsban kell megjeleníteni.

A kis képek a sarkok lekerekítettek (szegélysugár), megadják a szélességüket százalékban (a rácsoszlop méretéhez viszonyítva) és egy 5% -os alsó margót.

A nagy képeket nem szabad alapértelmezettként megjeleníteni, helyüknek abszolútnak kell lennie, és a felső és jobb tulajdonságokat 0-ra kell állítania. 40%).

A kurzor áthelyezése a képek fölé ( : hover ) alacsonyabb opacitásérték.

A legördülő menüben az előző lecke technikájának használatával oldja meg, hogy amikor az egeret egy kis képre mozgatja, a jobb oldali kép megjelenik a jobb oldalon.

Továbbá hozzáadjuk a tartalomhoz a style2.css relatív pozícióját, így a nagy kép nem kerül a tartalomon kívülre nd a style.css-ben állítsa be a z-indexet 10-re a #menu esetén.

A galéria hozzáadása a navigációs sávhoz az összes HTML-fájlban.

Tekintsd meg az eredményt