Skrivanje veze s CSS-om može se obaviti na više načina, ali ćemo pogledati dvije metode u kojima URL može biti potpuno skriven od prikaza. Ako želite izraditi lovačko lovce ili easter egg na vašem sučelju, ovo je zanimljiv način za skrivanje veza.
Prvi način je korištenjem "none" kao vrijednost svojstva CSS vrijednosti pokazivača. Drugi je jednostavno bojanje teksta koji odgovara pozadini stranice.
Imajte na umu da ni metoda neće dovesti do potpunog nestanka veze kada se pronađe prilikom pretraživanja izvornog koda. Međutim, posjetitelji neće imati jednostavan i jasan način gledanja, a vaši početnici neće imati pojma kako pronaći vezu.
Napomena: ako tražite upute za povezivanje vanjskog lista stila, ove upute nisu ono što tražite. Pogledajte Što je vanjski stilski list? umjesto toga.
Onemogućite Pointer događaj
Prva metoda kojom možemo sakriti URL jest da veza ne napravi ništa. Kada miš prebaci preko veze, neće prikazivati ono što URL ukazuje i neće vam omogućiti da kliknete.
Napišite HTML ispravno
Jednu web stranicu, provjerite je li hiperveza ovako čitala:
ThoughtCo.comNaravno, "https://www.thoughtco.com/" treba ukazati na stvarni URL koji želite sakriti, a ThoughtCo.com može biti promijenjen u bilo koju riječ ili izraz koji vam se sviđa koja opisuje vezu.
Ovdje je ideja da će aktivni član klase biti korišten sa sljedećim CSS-om kako bi učinkovito sakrili vezu.
Koristite ovaj CSS kod
CSS kôd mora se obratiti aktivnoj klasi i objasniti pregledniku da događaj na kliku kliknite "ne", kao što je ovaj:
.active {pointer-events: none; pokazivač: zadano; }Ova metoda možete vidjeti u akciji u JSFiddleu. Ako uklonite CSS kôd tamo, a zatim ponovite podatke, veza iznenada postaje klikovna i korisna. To je zato što se kada se CSS ne primjenjuje, veza se normalno ponaša.
Napomena: Imajte na umu da ako korisnik pogleda izvorni kôd stranice, vidjet će vezu i točno znati gdje ide, jer kao što vidimo gore, kôd je još uvijek dostupan.
Promijenite boju veze
Uobičajeno, web dizajner će hiperlinkove napraviti drugačiju boju od pozadine kako bi ih posjetitelji mogli vidjeti i znati kamo idu. Međutim, ovdje smo sakriti veze pa pogledajmo kako promijeniti boju kako bi se podudarala s onom na stranici.
Definirajte prilagođenu klasu
Ako koristimo isti primjer iz prve gore navedene metode, jednostavno možemo promijeniti klasu na ono što želimo, tako da su samo posebne veze skrivene.
Ako nismo koristili klasu i umjesto toga primijenili smo CSS odozdo na svaku vezu, onda bi svi nestali. To nije ono što radimo ovdje, stoga ćemo koristiti ovaj HTML kôd koji upotrebljava prilagođenu klizačicu:
ThoughtCo.comSaznajte koju boju koristite
Prije nego što unesemo odgovarajući CSS kod za skrivanje veze, moramo shvatiti koju boju želimo koristiti. Ako već imate čvrstu pozadinu, poput bijele ili crne, to je jednostavno. Međutim, druge posebne boje moraju biti precizne.
Na primjer, ako boja vaše pozadine ima heksadecimalnu vrijednost od e6ded1 , trebate znati da CSS kôd ispravno funkcionira za stranicu na kojoj želite nestati.
Dostupni su ovi alati za "brijaču boja" ili "kapaljke", od kojih se jedan naziva ColorPick kapaljka za preglednik Chrome. Koristite ga za uzorak boja pozadine vaše web stranice kako biste dobili heksadecimalnu boju.
Prilagodite CSS za promjenu boje
Sada kada imate boju da veza bude, vrijeme je za upotrebu tog i vrijednosti prilagođene klase odozgo, da biste napisali CSS kôd:
.hideme {color: # e6ded1; }Ako je vaša pozadinska boja jednostavna poput bijele ili zelene boje, ne morate staviti # znak pred njom:
.hideme {boja: bijela; }Pogledajte ovaj kôd uzorka ove metode u ovom JSFiddleu.