Nola ezkutatu loturak CSS erabiliz

CSS-ekin esteka bat ezkutatzea hainbat modutan egin daiteke, baina URL bat guztiz ezkutuan egon daitekeen bi metodoei begiratuko diegu. Zure guneko scavenger caza edo Pazko arrautza bat sortu nahi baduzu, estekak ezkutatzeko modu interesgarri bat da.

Lehenengo modua "none" erabiltzen du erakuslearen gertaeren CSS propietatearen balioa bezala. Besteak testua margotzen du orriaren atzeko planoarekin bat etortzeko.

Gogoan izan metodoak ez duela guztiz desagertuko jatorrizko kodean bilaketak aurkitzeko. Hala eta guztiz ere, bisitariek ez dute modu sinple eta sinplean ikusiko, eta hasiberrien bisitariek ez dute lotura bat nola aurkitu.

Oharra: kanpoko estilo-orri bat nola lotzen duten argibideak bilatzen ari bazara, argibide hauek ez dira ondoren. Ikusi What a External Style Sheet? horren ordez.

Desgaitu erakuslearen gertaera

URL bat ezkutatzeko erabil dezakezun lehen metodoa ez da ezer egiteko. Saguarekin estekaren gainetik pasatzean, ez dio URLa adierazi eta ez du klik egingo.

Idatzi HTML zuzena

Web orri bat, ziurtatu hiperesteka hau irakurtzen dela:

ThoughtCo.com

Jakina, "https://www.thoughtco.com/" ezkutuko ezkutuko benetako URLa adierazi behar du, eta ThoughtCo.com- k estekan deskribatzen duen edozein hitz edo esaldi aldatu daiteke.

Hemen ideia da klase aktiboa beheko CSSarekin erabiliko dela lotura eraginkortasunez ezkutatzeko.

Erabili CSS kode hau

CSS kodea aktibo dagoen klaseari aurre egin behar dio eta azaltzen duen arakatzaileari esteka estekan klik egitean, "hau ere ez da" hau izan beharko lukete:

.active {pointer-events: none; kurtsorea: lehenetsia; }

Metodo hau ekintzetan ikus dezakezu JSFiddle-n. CSS kodea kentzen baduzu eta datuak berriro berrabiarazten badituzu, esteka bat-batean klik egitean eta erabilgarri bihurtzen da. Hau da, CSS ez denean aplikatzen denean, estekak normalean jokatzen du.

Oharra: Gogoratu erabiltzaileak orriaren iturburu-kodea bistaratzen badu, esteka ikusiko du eta zehazki jakingo du non goian ikusiko dugun, kode hori oraindik ez dago erabilgarri.

Aldatu estekaren kolorea

Normalean, web diseinatzaileek atzeko planoan kolore desberdina egingo dute, bisitariek benetan ikus ditzaten eta non dagoen jakin dezaten. Hala ere, hemen estekak ezkutatu gaituztela ikus dezagun, beraz, kolorea aldatu behar dela orrialdearekin bat etortzea.

Klase pertsonalizatua definitu

Goiko lehen metodotik adibide berdina erabiltzen badugu, klaseak soilik aldatu ahal izango ditugu, estekak ezkutatzen diren bezainbeste.

Klase bat erabili ez bagenu eta, horren ordez, CSS aplikatu beheko esteka guztietatik, horiek guztiak desagertu egingo lirateke. Hori ez da hurrengoa hemen, beraz, HTML kode hau erabiliko dugu hideme klase pertsonalizatua erabiltzen:

ThoughtCo.com

Aurki itzazu zein kolore erabili

CSS kode egokia sartu aurretik estekaren ezkutatzeko, zer kolore erabili nahi dugun jakin behar dugu. Atzeko plano sendoa badaukazu, zuri edo beltzak bezala, hori erraza da. Hala ere, beste kolore bereziak ere zehatza izan behar dute.

Esate baterako, zure atzeko planoko koloreek e6ded1 hex balio bat badute , jakin behar duzu CSS kodea behar bezala funtziona dezan desagertuko den orrialdean.

"Kolore-hautatzailea" edo "eyedropper" tresnen erabilgarriak daude, eta horietako bat ColorPick Eyedropper Chrome arakatzailera deitzen da. Erabili zure orriaren atzeko planoaren kolorea hautatzeko hex kolore.

Pertsonalizatu CSS kolorea aldatzeko

Orain, estekaren kolorea izan behar duzula, goiko eta goiko klase pertsonalizatua erabiltzeko ordua da CSS kodea idazteko:

.hideme {color: # e6ded1; }

Zure atzeko planoaren kolorea zuria edo berdea bezalakoa bada, ez duzu # ikurra jarri aurretik:

.hideme {kolorea: zuria; }

Ikusi metodo honen lagin-kodea JSFiddle honetan.