CSS-Csak kép létrehozása, amely az átlátszó szegélyekkel járó hatást felfedi
A A CSS-re vonatkozó kép hatását mutatja megoldható különböző módon. Valójában nagyon könnyű egy olyan kódot kódolni, amelyben a a kép kiemelkedik (a túlcsordult) szilárd hátterét -te csak helyezzen egy képet egy kisebb, szilárd háttérrel rendelkező elem felett.
Ugyanez az eredmény akkor érhető el, ha használja átlátható határok, hol tartod a háttérelem mérete azonos mint az előtér, és átlátható határokat adnak hozzá annak érdekében, hogy hozzon létre egy üres helyet az előtér túlcsordul.
Vannak az utóbbi módszer alkalmazásának bizonyos előnyei. Mivel ez az átlátszó határok, amelyek az előtér számára lehetővé teszik a túlcsordulás területét szabályozza a túlfolyás irányát bal, jobb, felső és alsó határ között. Ugyancsak azonos méretű az előtér és a háttér megkönnyíti a két elem egyidejű mozgatását az oldalon.
Dióhéjban meglátjuk, hogyan kell hozzon létre egy CSS-alapú képet, amely felfedi a hatást használva kisebb szilárd háttér val,-vel az előtér képe, amely átlátszó határt tartalmaz. Megnézheti a végső demó lent.
1. Hozza létre a kezdeti kódot
HTML-bölcs, csak egy A CSS-ben használjuk két CSS változó, Mi is hozzáadjuk a Mi adjunk hozzá egy üreset A Hozzáadjuk a képet a A A az alábbi képernyőkép láthatod, amit eddig ( A a kép mögött kisebb (csúszó) háttér, a másik ál-elemet fogjuk használni, Egy másik CSS változót hozunk létre, A szélesség számítása: A magasság számítása: A ... val Egy CSS szűrő Itt van a demó képernyőképe eddig (a Mi adja hozzá a Mint mi már hozzáadta a Az alábbiakban látható a végső demó. Ha megjelenik
--bgc és --homályos a háttérszín és a méretek a .ize konténer. A példában a azonos értéket hogy a szélesség és a magasság egy négyzet alakú dobozhoz hozzon létre külön változók a szélességhez és a szélességhez, ha téglalap alakú.position: relative szabály .ize, úgy, hogy a pszeudo-elemei, amiket használni fogunk feltárja a képet, lehet teljesen elhelyezve (lásd alább), és így egymásra rakják. .foo --bgc: # FFCC03; --dim: 300px; szélesség: var (- dim); magasság: var (- dim); háttérszín: var (- bgc); pozíció: relatív;
tartalom ingatlan mindkét pszeudo-elemhez, .ize :: előtt és .ize :: után, hogy rendesen tegyék őket. .foo :: before, .foo :: után content: "; pozíció: abszolút; bal: 0; top: 0;
.ize elem, két pszeudo-eleme, .ize :: előtt, .ize :: után, és az övék :lebeg pszeudo-osztályok kap egy átmenet ingatlan az fog adjunk hozzá egy könnyed átmenetet 500 milliszekundumig (fél másodperc). .foo, .foo: hover, .foo :: előtte, .foo :: after, .foo: hover :: before, .foo: hover :: után átmenet: transzformálja 500 ms-os egyszerűsítést;
2. Adja hozzá a képet
.ize :: előtt pszeudoelem háttérképként, és méretét úgy, hogy lefedje az egész pszeudoelemet a ... val szélesség és magasság tulajdonságait. Mi halom a jobb alatta .ize elem használni a z-index: -1 szabály. .foo :: előtt szélesség: 100%; magasság: 100%; háttér: url (camel.png) központ / fedél; z-index: -1;
központ kulcsszó központosítja a képet, amíg a borító a kulcsszó mérlegeli a képet fedezze a teljes elemet megtartva a képarányt. z-index eltávolítva .ize :: előtt úgy, hogy látható legyen):
3. Adja hozzá a csúszkát
.ize :: után.--b, a határ szélessége. Adunk három átlátszó határ hoz ::után pseudo-elem: felső, jobb és alsó. .foo :: --b: 20px után; szélesség: Calc (100% - var (- b)); magasság: számított (100% - számított (var (- b) * 2)); határ: var (- b) szilárd átlátszó; szegéllyel: nincs; box-shadow: betét 0 var (- dim) 0 var (- bgc); szűrő: fényerő (.8); z-index: -2;
Calc (100% - var - b)) ez visszatér a teljes szélessége .ize mínusz a vízszintes határok teljes szélessége (csak jobb oldali szegély, mivel nincs bal oldali határ).Calc (100% - számított (var (- b) * 2)) ez visszatér a teljes magassága .ize mínusz a függőleges határainak teljes szélessége (felső és alsó határok).box-shadow vagyunk, mi is adjunk hozzá egy vízszintes árnyékot azonos méretű .ize (ami var (- dim)).fényerő (.8) sötétíti a háttérszínt egy kicsit, és végül a z-index: -2 szabály elhelyezi a ::után pszeudo-elem alatt ::előtt amely a képet tartalmazza.z-index mindkét pszeudo-elemből eltávolították őket, így láthatók):
4. Adja hozzá az átalakítást
átalakít ingatlan a két pszeudo-elemhez, így amikor a felhasználó áthalad .ize, mindkét pszeudoelem vízszintesen mozgott.átmenet minden elemre az 1. lépés végén a kép mozgása és háttere mindkettő animált. .foo: hover :: before, .foo: hover :: után transzformáció: translateX (100%);
Bónusz: Opcionális árrés
.ize más elemek mellett az oldalon, és szeretné, hogy ezek a többi elem menj arrébb akkor, amikor a kép és a háttere kicsúszik adjunk hozzá egy ugyanolyan széles szélességű margót .ize hoz .ize: hover elem. .foo: hover margin-right: var (- dim);
