Looge ainult CSS-i pilt, mis avaldab mõju läbipaistvate piiridega
A Ainult CSS-i pilt näitab mõju lahendada erinevalt. See on tegelikult üsna lihtne kodeerida disaini, milles pilt paistab silma (on üleujutatud) selle tugev taust -sa lihtsalt asetage pilt väiksema elemendi üle, millel on tugev taust.
Saate sama tulemuse, kui kasutate läbipaistvad piirid, kus sa hoiad samasugune nagu esiplaanil ja lisada läbipaistvad piirid luua tühi ruum selleks, et esiplaanil oleks ülevool.
Seal on mõningaid eeliseid viimase meetodi kasutamisel. Kuna tegemist on läbipaistvate piiridega, mis annavad ala, kus esiplaanil on võimalik ülevoolu üle minna, saame kontrollige ülevoolu suunda vasakule, paremale, ülemisele ja alumisele piirile. Samuti on sama suurus nii esiplaanil kui ka taustal lihtsustab mõlema elemendi üheaegset liigutamist kogu lehel.
Lühidalt öeldes näeme, kuidas seda teha luua ainult CSS-i pilt, mis avaldab mõju kasutades a väiksem taust koos esiplaanil, millel on läbipaistvad piirid. Võite vaadata lõplik demo allpool.
1. Loo algkood
HTML-tark, ainult üks CSSis kasutame kaks CSS-i muutujat, Lisame ka Me lisa tühi The Lisame pildi The Sisse allolev pilt näete, mida me seni oleme ( Selle lisamiseks pildi taga on väiksem (väljalülitatud) taust, me kasutame teist pseudoelementi, Loome teise CSS muutuja, The laius arvutatakse kui The kõrgus arvutatakse kui Koos CSS-i filter Siin on demo ekraanipilt siiani tehtud Me lisa Nagu me juba lisatud Allpool on näha lõplik demo. Kui kuvatakse
--bgc ja --hämar Selle eest taustavärv ja mõõtmed selle .foo konteinerisse. Näites kasutasin seda sama väärtusega ruudukujulise kasti laiuse ja kõrguse saamiseks looge erinevad muutujad kõrguse ja laiuse jaoks, kui soovite ristkülikut.positsioon: suhteline reegel .foo, nii et selle pseudoelemendid, mida me kasutame pildi paljastamine, võib olla absoluutselt paigutatud (vt allpool) ja seega üksteise peale virnastatud. .foo --bgc: # FFCC03; - dim: 300 px; laius: var (- dim); kõrgus: var (- dim); taustavärv: var (- bgc); positsioon: suhteline;
sisu vara mõlemale pseudoelemendile, .foo :: enne ja .foo :: pärast, neid nõuetekohaselt sulatada. .foo :: enne, .foo :: pärast content: "; positsioon: absoluutne; vasakul: 0; top: 0;
.foo element, selle kaks pseudoelementi, .foo :: enne, .foo :: pärast, ja nende :hõljuma pseudo-klassid saa üleminek vara see on lisage lihtne üleminek neile 500 millisekundit (pool sekundit). .foo, .foo: hover, .foo :: enne, .foo :: after, .foo: hover :: enne, .foo: hover :: pärast üleminek: teisendage 500ms lihtne;
2. Lisage pilt
.foo :: enne pseudoelement taustapildina, ja suurus, et katta kogu pseudoelement koos laius ja kõrgus omadused. Me korstna see otse selle all .foo element kasutades z-indeks: -1 reegel. .foo :: enne laius: 100%; kõrgus: 100%; taust: url (camel.png) keskus / kate; z-indeks: -1;
Keskus märksõna keskendub pildile, samal ajal kui katta märksõna skaala kujutist katta kogu elemendi säilitades oma kuvasuhte. z-indeks eemaldatakse .foo :: enne nii, et see oleks nähtav):
3. Lisage väljalülitatud taust
.foo :: pärast.--b, Selle eest piiri laius. Me anname kolm läbipaistvat piiri Euroopa :: pärast pseudoelement: ülevalt, paremalt ja alt. .foo :: pärast - b: 20px; laius: calc (100% - var (- b)); kõrgus: calc (100% - arvutatud (var (- b) * 2)); piir: var (- b) tahke läbipaistev; piirjoon: mitte; box-shadow: sisend 0 var (- dim) 0 var (- bgc); filter: heledus (.8); z-indeks: -2;
Calc (100% - var - b)) see naaseb kogu laius .foo miinus horisontaalsete piiride kogu laius (ainult paremal äärel, kuna pole vasakpoolset piiri).arvutatud (100% - arvutatud (var (- b) * 2)) see naaseb kogu kõrgus .foo miinus vertikaalsete piiride kogu laius (ülemine ja alumine piir).kast-vari vara, me ka lisage horisontaalne varjupaik sama suurusega kui .foo (mis on var (- dim)).heledus (.8) tumeneb taustavärvi natuke ja lõpuks z-indeks: -2 reegel asetab :: pärast pseudoelement :: enne mis sisaldab pilti.z-indeks eemaldatud mõlemast pseudo-elemendist, et neid saaks näha):
4. Lisage transformatsioon
teisendada vara kahele pseudoelementile, nii et kui kasutaja hõivab üle .foo, mõlemad pseudoelemendid on liikunud horisontaalselt.üleminek kõik elemendid 1. etapi lõpus on pildi ja selle tausta liikumine mõlemad on animeeritud. .foo: hover :: enne, .foo: hover :: pärast transform: translateX (100%);
Boonus: valikuline varu
.foo teiste elementide kõrval lehel ja soovivad, et need teised elemendid oleksid ära kolima siis, kui pilt ja selle taust libisevad välja lisage sama laiusega parempoolne marginaal .foo Euroopa .foo: hover element. .foo: hover margin-right: var (- dim);
