Hvordan lage ren CSS onClick Image Zoom Effect

CSS har ikke en pseudoklass for å målrette klikkhendelser, og dette utgjør en av de største smertepunktene i utviklere av fremtidsendringer. Den nærmeste pseudoklassen er :active som stiler et element for en tidsperiode en bruker trykker musen over den.

Denne effekten er imidlertid kortvarig: Når brukeren slipper ut musen :active fungerer ikke lenger. Vi må finne en annen måte å etterligne klikkhendelsen i CSS .

Dette innlegget har blitt skrevet som svar på en lesers forespørsel, og den skal forklare hvordan du målretter klikkhendelsen med ren CSS i et bestemt brukstilfelle, bildezoom .

Du kan se det endelige resultatet nedenfor - en CSS-eneste løsning for bildezoom på klikk .

Når skal du bruke CSS-Only Solution

Før jeg går videre, vil jeg si at for bildezoom anbefaler jeg CSS-only-metoden (som endrer dimensjonene til bildet), bare når du vil at en enkelt eller en gruppe få bilder skal ha zoomfunksjonen.

For et riktig galleri gir JavaScript mer fleksibilitet og effektivitet.

Front-End Teknikker Vi vil bruke

Nå som du har blitt varslet, la oss raskt se på de 3 hovedteknikkene vi skal bruke:

1. De
2. usemap til tag, som hakker bildet til bilde kartet.
3. Den :target CSS pseudoklassen som representerer et element som har blitt målrettet ved hjelp av ID-velgeren.

1. Opprett HTML-basen

La oss først lage HTML-basen. I koden under legger vi til et bilde som skal zoomes og utvides og lukk knappikonene for å zoome inn og ut.

Det er viktig å ha en ID på bildet som skal zoomes, og lukkeknappen må være en lenke som har href="#", jeg skal forklare hvorfor senere i innlegget.

2. Legg til CSS

I begynnelsen bør ikonet Lukk ikke vises . position, margin-, left og bottom egenskaper plasserer ikonene Utvid og lukk hvor vi vil at de skal være - øverst til høyre i bildet.

pointer-events: none; regelen lar museventyrene passere gjennom ikonet Utvid og nå bildet .

 .img {høyde: 150px; bredde: 200px; } .close {background-image: url ("Close-icon.png"); bakgrunn-gjentak: ikke-gjenta; bunn: 418px; skjerm: ingen; høyde: 32px; igjen: 462px; margin-topp: -32px; stilling: relativ; bredde: 32px; } .expand {bunn: 125px; margin-venstre: -32px; margin-høyre: 16px; peker-hendelser: ingen; stilling: relativ; } 

På bildet kartet bør det klikkbare området være øverst til høyre på bildet rett under ikonet Utvid, og om størrelsen. Plasser

I kodeblokken over, er tag definerer formen, størrelsen og URIen til et koblingsområde i et bildekart. For en rektangulær form tar coords den coords verdien, og de fire verdiene for coords representerer avstanden i piksler mellom:

1. venstre kant av bildet og venstre kant av lenkeområdet
2. øverste kant av bildet og øverste kant av lenkeområdet
3. venstre kant av bildet og høyre kant av lenkeområdet
4. toppkanten av bildet og den nederste kanten av lenkeområdet

Verdien av href attributtet må være hash-identifikatoren for bildet (dette er grunnen til at bildet skal ha et id ).

4. Bind bildet til bildekartet

Legg til usemap til bildet for å binde det til bilde kartet . Dens verdi må være hash-representasjon av navnetattributtet til

 Hvordan Lukkeknappen Fungerer 
Som Lukk-knappen ble lagt til som et bakgrunnsbilde (Trinn 2), og er faktisk en tagg med href=# (Trinn 1), når den klikkes, fjerner den fragmentidentifikatoren fra slutten av URI. Derfor fjerner den også :target målpseudoklassen fra bildet, og bildet går tilbake til forrige størrelse .
Nå er CSS-bare zoom-on-click-effekten gjort, sjekk demoen nedenfor, eller les litt mer om teorien bak bildekart i neste avsnitt.
 Bakgrunnsinformasjon: Hvorfor 
Nå forstår du sikkert at det viktigste for denne CSS-only-løsningen på jobb er å målrette bildet ved hjelp av href="#imgid" -attributtet, som også kan gjøres ved å bruke taggen i stedet for bilde kartet.
Dette kan være sant, men når det gjelder bilder, bruker du 
default for formattributtet skaper et rektangulært koblingsområde som dekker hele bildet . Hvis du skulle bruke i stedet, må du kode den for å dekke bildet, og du må kanskje også bruke et innpakningselement for samme formål.
For å også snakke om forbeholdene til denne løsningen støttes pointer-events CSS-egenskapen (vi brukte i trinn 2) bare av Internet Explorer fra versjon 11 .
For å støtte IE-nettlesere før det, vil du kanskje enten bruke i stedet for 







        

          
          

		  
10 Gratis CAD-programvare du kan laste ned
            
CAD-programvare er et må-ha verktøy for å få i de fleste bedrifter å redusere fatale feil i design som kan dukke opp under produksjonen . Hvis du er i bransjen som avhenger mye av CAD-verktøy, vet du sannsynligvis allerede at det å være ganske kostbart å få en god CAD-programvare. Og hvis du er en student som bare begynner å dyppe tærne i CAD-programvare, vil dette definitivt være et problem.Det er imidl
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
Niantic å rulle ut en stor oppdatering for Pokémon Go i desember
            
For ganske nylig har Niantic rullet ut en oppdatering som brakte Ditto og en Thanksgiving-hendelse til Pokémon Go. Men folk som har dyttet seg inn i spillets kode, oppdaget at Niantic kan introdusere en stor oppdatering i desember.Ifølge folkene som har jobbet på PokeVS webscanner, viser den nåværende koden for Pokémon Go at Niantic kan planlegge å legge til 100 nye normale og legendariske Pokémon til spillet. Disse 
			
(Tekniske og design tips)