Stvorite efekt slike samo za CSS s transparentnim granicama
Učinak otkrivanja slike samo za CSS može se riješiti na različite načine. To je zapravo vrlo lako kodirati dizajn u kojem slika se izdvaja (prepunio je) njegova čvrsta pozadina -ti samo stavite sliku preko manjeg elementa s čvrstom pozadinom.
Isti rezultat možete dobiti ako koristite transparentne granice, gdje zadržavate veličina elementa pozadine je ista kao u prvom planu i dodajte prozirne granice kako biste stvoriti prazan prostor kako bi se u prvi plan prelilo.
Tamo su neke prednosti u korištenju potonje metode. Budući da se radi o transparentnim granicama koje pružaju područje u koje će se prednji plan preliti, možemo kontrolirajte smjer preljeva između lijeve, desne, gornje i donje granice. Također, imaju istu veličinu i za prednji i za pozadinu olakšava istovremeno pomicanje oba elementa preko stranice.
Ukratko, vidjet ćemo kako stvorite CSS-efekt samo za prikaz slike pomoću a manje čvrste pozadine s slika u prvom planu koja ima prozirne granice. Možete pogledati konačni demo ispod.
1. Stvorite početni kod
HTML-mudar, samo jedan U CSS-u koristimo dvije CSS varijable, Također dodajemo Mi dodajte prazno Dodajmo sliku u Na screenshot ispod možete vidjeti što smo do sada imali ( Za dodavanje pozadina iza slike, koristit ćemo drugi pseudo-element, Stvaramo drugu CSS varijablu, širina izračunava se kao visina izračunava se kao Sa CSS filter od Evo ga screenshot demo do sada (s Mi dodajte Kao i mi već je dodao Dolje možete vidjeti konačni demo. Ako prikažete
--BGC i --zamagliti za boja pozadine i dimenzije od .foo u spremniku. U primjeru sam koristio iste vrijednosti za širinu i visinu da bi dobili kvadratnu kutiju, napravite zasebne varijable za visinu i širinu ako želite pravokutnik.Položaj: relativna pravilo .foo, tako da ćemo koristiti njegove pseudo-elemente otkrivajući sliku, Može biti apsolutno pozicioniran (vidi dolje), i time naslagane jedna na drugu. .foo --bgc: # FFCC03; --dim: 300px; width: var (- dim); visina: var (- dim); pozadinska boja: var (- bgc); pozicija: relativna;
sadržaj svojstvo na oba pseudo-elementa, .foo :: prije i .foo :: poslije, kako bi ih ispravno prikazali. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo element, njegova dva pseudo-elementa, .foo :: prije, .foo :: poslije, i njihovi : hover pseudo-klase dobiti tranzicija svojstvo to će dodavanje prijelaza jednostavnosti za njih 500 milisekundi (pola sekunde). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transformacija 500ms;
2. Dodajte sliku
.foo :: prije pseudo elemenata kao pozadinsku sliku, i veličinu da pokrije cijeli pseudo-element s širina i visina svojstva. Mi stavite ga odmah ispod .foo element koristiti z-indeks: -1 Pravilo. .foo :: before width: 100%; visina: 100%; pozadina: url (camel.png) centar / naslovnica; z-indeks: -1;
centar ključna riječ centrira sliku, dok pokriti ključna riječ mijenja sliku pokriti cijeli element zadržavajući njegov omjer. z-index je uklonjen iz .foo :: prije tako da se može vidjeti):
3. Dodajte pozadinu koja se pomiče
.foo :: poslije.--b, za širina obruba. Dajemo tri transparentne granice prema ::nakon pseudo elemenata: gore, desno i dolje. .foo :: after --b: 20px; width: calc (100% - var (- b)); visina: calc (100% - calc (var (- b) * 2)); border: var (- b) solid transparent; granica lijevo: nema; box-shadow: umetak 0 var (- dim) 0 var (- bgc); filter: svjetlina (.8); z-indeks: -2;
calc (100% - var - b)) koji se vraća ukupna širina .foo minus ukupna širina njegovih horizontalnih granica (samo desna granica, budući da nema lijeve granice).calc (100% - calc (var (- b) * 2)) koji se vraća ukupna visina .foo minus ukupna širina njegovih vertikalnih granica (gornja i donja granica).kutija-sjena vlasništvo, također dodajte vodoravnu umetnutu sjenu iste veličine kao .foo (koji je var (- dim)).svjetline (a8) zamračuje boju pozadine malo, i konačno, z-indeks: -2 Pravilo mjesta ::nakon pseudo-element ispod ::prije koja sadrži sliku.z-index uklonjeno iz oba pseudo-elementa tako da se mogu vidjeti):
4. Dodajte transformaciju
transformirati svojstvo na dva pseudo-elementa, tako da kada korisnik lebdi iznad .foo, oba su pseudoelementa premještena vodoravno.tranzicija vlasništvo svih elemenata na kraju koraka 1 kretanje slike i njezina pozadina su obje animirane. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: Neobavezna margina
.foo pored drugih elemenata na stranici i želite da ti drugi elementi budu Odmakni se kada slika i njezina pozadina iskoče, tada dodajte desnu marginu iste širine kao i .foo prema .foo: hover element. .foo: hover margin-right: var (- dim);
