Vaiheittainen opas puhtaiden CSS-työkaluvihjeiden tekemiseen

Olen hiljattain työskennellyt lyhyen opetusohjelman avulla yksinkertaisten työkaluvihjeiden luomisesta puhtaan CSS: n avulla (eikä yhtään ylimääräistä HTML-elementtiä tai JavaScriptiä). Käytin myöhemmin tätä tekniikkaa omassa projektissani ja keksin joitain temppuja sen parantamiseksi.

Tämä artikkeli on askel askeleelta -opetusohjelma, joka auttaa sinua ymmärtämään näitä CSS-temppuja, jotta voit myös tehdä puhdas-CSS-työkaluvihjeitä.

Tämän viestin loppuun mennessä tiedät kuinka lisätä työkaluvihko mihin tahansa elementtiin lisäämällä yksinkertainen attribuutti.

Ongelma

Minun piti luoda mukautettu työkaluvihje projektilleni.

Aloitin Googlesta “CSS Tooltip Generator.” Löysin melko vähän generaattoreita. Heidän lähestymistapansa oli lisätä väli absoluuttisen aseman kanssa sen elementin sisällä, johon haluat työkaluvihjeen.

Mutta minulla oli jo muuten täydellinen projekti. En halunnut käydä läpi ja lisätä kaikkia näitä span elementtejä koko projektiini. Tämä vie aikaa ja vaikeuttaa HTML-koodini. Piti olla parempi tapa.

Löysin vihdoin YouTube-sivustolta hämmästyttävän opetusohjelman työkaluvihjeistä. Älykäs temppu, jota se käytti, oli luoda työkaluvinkki käyttämällä :: ennen ja :: jälkeen CSS-valitsimia. Voit katsoa videon täältä.

Tämä temppu on fiksu ja puhdas, mutta se ei ollut riittävän yleinen.

Parannus ratkaisuun

Tässä osassa teen tästä tempusta yleisemmän ja löydämme lisätietoja joistakin CSS-ominaisuuksista. Tässä on mitä me viime kädessä haluamme pystyvän tekemään:

 napsauta tätä !! 

Ei vain, mutta haluamme pystyä määrittelemään työkaluvihjeen sijainnin helposti:

 napsauta tätä !! 

Ensinnäkin - kuten videossa mainittiin - lisäämme pseudo-elementin ennen ja jälkeen painikkeeseen.

:: jälkeen ja :: ennen ovat pseudoelementtejä, joiden avulla voit lisätä sisältöä CSS: n sivulle ennen tai jälkeen elementin. He toimivat näin:

div :: jälkeen {
 sisältö: ”jälkeen”;
}
div :: ennen {
 sisältö: “ennen”;
}

Tulos näyttää noin:

 ennen    jälkeen

Kävelemme tämän vaihe vaiheelta

Vaihe 1: lisäämme tällaisen työkaluvinkin määritteen:

 napsauta Me !! 

Tarvitsemme :: jälkeen ja :: ennen pseudoelementtejä. Ne ovat yksinkertainen suorakulmio, jonka sisältö on työkaluvihje. Luomme CSS: n kanssa yksinkertaisen suorakulmion lisäämällä reunan tyhjään elementtiin, jonka luomme sisältöominaisuudella.

:: Ennen pseudo-elementtiä käytetään työkaluvinkin sisällön näyttämiseen. Lisäämme sen ominaisuuden sisällöllä ja poimimme työkaluvinkin määritteen arvon. Sisällön arvo voi olla merkkijono, määritteen arvo elementistä, kuten esimerkissämme, tai jopa kuva URL-osoitteella (polku / image.png).

Jotta tämä toimisi, painikeelementin sijainnin on oltava suhteellinen. Toisin sanoen kaikkien elementtien sijainti painikkeen sisällä on suhteessa painikeelementin asemaan itse.

Lisäämme myös joitain sijainti temppuja tehdä työkaluvihje keskelle muunnos ominaisuus ja tämä tulos.

Tässä on CSS:

Vaihe 2: pelaamme vain :: ennen ja :: pseudoelementtien kanssa työkaluvihjeaseman luomiseksi. Painike HTML näyttää tältä:

 napsauta tätä !! 

Työkaluvihjeasento voi olla: oikea, vasen, ylä- tai alaosa.

vaihe 3: lisäämme tässä viimeisessä vaiheessa työkaluvihjeeseen yksinkertaisen hover-animaation.

Tämä CodePen näyttää lopputuloksen (ja voit napsauttaa läpi nähdäksesi lopullisen koodin):

Jos tunnet Reaktin, tarkista viestini:

Kiitos lukemisesta! Jos luulet muiden lukevan tämän, paina -painiketta, twiitti ja jaa viesti. Muista seurata minua Mediumilla, jotta saat ilmoituksen tulevista viesteistäni.

Lue lisää tarinoita https://elazizi.com/