Hogyan készítsünk egy láblécet a CSS-ben

8 technikák a CSS-vel való munkavégzéshez: Pararallax, “Lipy” Futher és mások

A fordítótól: Lefordítva az Ön számára a cikk BRITA CAMERON A CSS-vel való együttműködés trükkökről. Sok pont hasznos, nem csak a kezdőknek, hanem tapasztalt fejlesztőknek is hasznos.

Ez a cikk a CSS-ben való munkáról, tanulásról, amelyről felkiáltottam: “Agaaaa!”. Remélem, hogy egy pár felfedezést is készítesz.

CSS-specifikus technológia. Első pillantásra nagyon egyszerűnek tűnik. De az elméletileg egyszerűnek tűnik, nem a gyakorlatban.

Számos technikát fogok mutatni, és elmondom a CSS-ben való használatuk elveiről. Maga a cikk nem a nehézségekről szól. Éppen ellenkezőleg, úgy tervezték, hogy kényelmesebbé tegye a munkáját.

SkillBox ajánlja: Praktikus két hónapos tanfolyam „Foglalkozás Frontend fejlesztő”.

Felhívjuk figyelmét,:Minden Habra olvasók – 10 rubel kedvezmény, ha a felvétel bármely Skillbox természetesen a „Habr” promóció.

1. “Lipky” footer

Annak ellenére, hogy az egyszerűség a végrehajtás, akkor lesz egy akadályt a kezdő fejlesztők.

A legtöbb projektben a képernyő alján marad, függetlenül a tartalom mennyiségétől és a különböző megtekintési feltételekhez igazítva.

E hatás CSS3 megjelenése előtt nehéz volt elérni, nem ismeri a lábléc pontos magasságát. De most nem probléma, hogy hozzon létre egy “ragadós” lábat, a legjobb a flexbox használatához. Nevezetesen -, hogy a Flex-Shrink ingatlan, így lesz biztos, hogy a lábléc megmenti a méreteit.

A 0 mennyiségével egyáltalán nem csökken.

2. A lebegés növelése

Az ilyen hatás nagyszerű módja annak, hogy felhívja a felhasználó figyelmét a klikable képre. Amikor átmegy a kurzorra a képre, kissé “felemelkedik” az előző méretek megőrzésével.

Annak érdekében, hogy ilyen hatás legyen, szükségünk van egy DIV körre, szükségük van egy címke képre a html-ben.

Ezenkívül a megszerzett hatás, telepítenie kell a szélességet és a magasság elemet, és győződjön meg róla, hogy a túlcsordulás rejtve van. Ezután alkalmazhat bármilyen típusú transzformációt.

3. Állandó éjszakai üzemmód

Ha gyors módra van szüksége az éjszakai üzemmód telepítéséhez, akkor használja az invert és a hue-forgatott szűrőket.

Szűrő: invert () értéke 0-tól 1-ig. 1 egy inverzió, a fehér fekete lesz.

Szűrő: HUE-ROTATE () Az elemek színtartalmát oly módon változtatja meg, hogy többé-kevésbé ugyanazt az elválasztási szintet tartsák meg egymástól. Az értékek 0-tól fokig terjednek.

Ha kombinálja ezeket a hatásokat a testcímke belsejében, gyorsan megkaphatja az éjszakai bőrt a webhelyen (ebben az esetben a hátteret kell beállítani).

Itt van egy példa:

Ezen beállítások segítségével a Google Start oldalt itt lehet kapcsolni.

4. Pastomous bullys

Egyedülálló épületek létrehozásához a Pseudo-Elemen keresztül a tartalmat használhatja :: korábban

Az alábbiakban bemutatott CSS-ben két osztályt használok .Comlete I .Hiányos, hogy kétféle bullitákat megkülönböztesse.

Bónusz: kenyér morzsák a navigációban

Sokféleképpen lehet érdekes hatások elérni a tartalom tulajdonát, de nem tudtam ellenállni és hozzáadni egy másikat.

Mivel a kenyér morzsák elválasztására használt csipke és más karakterek stilisztikák, értelme meghatározni őket CSS-ben. Mint sok más példa ebben a cikkben, a hatás a pszeudo-osztály – utolsó gyermeken alapul. Csak a CSS3-ban érhető el:

5. Pararallax Képek

Ez a népszerű hatás vonzza a felhasználói figyelmet. Érdemes használni, ha a görgetés közben szeretne egy oldalt újraéleszteni.

Míg a rendes képek megváltoztatják a helyet, amikor görgetés, parallaxis képek maradnak a helyén.

CSS példa (csak CSS)

Itt az elidegeníthetetlen eleme Háttér-attachment: fixed, megköti a helyzet a háttérképet egy adott helyzetben. A kép a helyszínen marad, míg az ablak, amelyből látható, tekercsek. Úgy tűnik, hogy a kép az egész webhely mögött van. Annak érdekében, hogy ezt a hatást az ellenkezőjére cserélje, adja meg a háttérképet: Görgetés.

CSS + JavaScript

6. Animáció vágott képekkel

Mint a “ragadós” lábszár esetében, a CSS3 megjelenése előtt nehéz volt animációt vágni a vágott képekkel. Most van egy objektum-illeszkedő és objektumpozíció, amely együttesen lehetővé teszi a kép átméretezését anélkül, hogy befolyásolná a kép képarányát.

Korábban a képszerkesztő használatához szükséges. A CSS3 nagy előnye az, hogy megváltoztassa az animáció képrészének méretét.

Itt van egy példa egy címkével . Ebben az esetben használhatja a pszeudoklass előnyeit: ellenőrzött, és a JavaScript nincs szükség.

7. Keverési módok

Ha ismeri a Photoshop-t, akkor megérti a keverési módok (keverési módok) előnyeit különböző érdekes hatások elérése érdekében. De tudod, hogy ezek az ugyanazok a módok állnak rendelkezésre a CSS-ben?

Íme néhány példa a blend módok használata közepes színes oldalak – Világoskék és Blend Mode – Különbség:

Ezeket a módokat nem csak a háttérrel való együttműködésre alkalmazhatja. A Mix-Blend-Mode tulajdonság lehetővé teszi, hogy az elemeket a háttérrel keverje össze. Így például, a Mix-Blend-mód – Color-Dodge és a Lightsalmon háttér, akkor kap ilyen hatása.

Mielőtt a CSS3-t nehéz elhinni, hogy a webhelyek így nézhetők ki.

Igen, probléma van a Chrome 58+ -al, amely helytelenül az átlátszó címkékben vagy . Gyors javítás – Háttérszín hozzáadása – fehér.

nyolc. Pinterest stílus – ImageBoard

CSS Grid és flexbox jelentősen egyszerűsítette a létrehozása a különböző típusú adaptív elrendezés lehetővé téve, hogy centen elemek a függőleges oldal gond nélkül.

De gyakorlatilag használhatatlan a booru Pinterest Style, ahol a függőleges irányban az egyes elemek attól függően változik, a magassága az elem fölé.

Ennek elérése érdekében a legjobb módja annak, hogy a CSS hangszóró tulajdonságait használja. Leggyakrabban több szöveg oszlop létrehozására szolgálnak egy hírstílusban, de van egy másik példa a használatra.

Minden munkához, meg kell csomagolnia az elemeket a DIV-ban, és állítsa be az oszlopszélességet és az oszlop-rés tulajdonságokat.

Ezután, hogy megakadályozzák az elemek szétválasztását a két hangszóró között, hozzá az oszlop-break-belül paraméter:

A fenti példa – Pseudo-osztályok használata: nem (). Itt használják: Hover.

És milyen technikákat dolgoznak a CSS használatával? Adja meg őket a megjegyzésekben – Biztos vagyok benne, hogy minden olvasó számára hasznos lesz.

Skillbox ajánlja: