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 







        

          
          

		  
Fontjoy - Nyttig fontparingsverktøy for designere
            
Å velge fonter å bruke i et designprosjekt er ikke akkurat en cakewalk. Hvis skriftene er for liknende til hverandre, vil de være vanskelig å skille mellom. På samme måte, hvis fonter valgene er drastisk forskjellig, kan det være ekstremt ødeleggende for leseren. For å håndtere dette dilemmaet gir teknologien deg med fontparingsverktøy.I tråd med
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
30 Gratis Slab Serif Fonter for logoer og overskrifter
            
Slab serif skrifttyper er ganske attraktive og allsidige som kan brukes i en rekke sammenhenger. Denne skrifttypen er preget av tykke, blokklignende serifs og var mest populær i det nittende århundre. Tradisjonelt betraktes slab serifs som en av de beste skriftene for titler og overskrifter. Noen av disse skrifttypene kan imidlertid fungere godt for å sette inn kroppstekst .He
			
(Tekniske og design tips)