Un ghid pas cu pas pentru crearea de instrumente CSS pure

Am lucrat recent printr-un scurt tutorial despre crearea unor sfaturi de instrumente simple folosind CSS pur (și niciun element HTML suplimentar sau JavaScript). Ulterior am folosit această tehnică în propriul proiect și mi-am dat seama de câteva trucuri care să o îmbunătățească.

Acest articol este un tutorial pas cu pas care vă va ajuta să înțelegeți aceste trucuri CSS, astfel încât să puteți face și sugestii de instrumente CSS pure.

Până la sfârșitul acestei postări, veți ști cum să adăugați un sfat de instrument la orice element adăugând un atribut simplu.

Problema

Am avut nevoie pentru a crea un tooltip personalizat pentru proiectul meu.

Am început prin Googling „CSS Tooltip Generator”. Am găsit câteva generatoare. Abordarea lor a fost să adăugați un interval cu o poziție absolută în interiorul elementului pentru care doriți un tooltip.

Dar am avut deja un proiect altfel complet. Nu am vrut să mă întorc și să adaug toate aceste elemente de acoperire pe parcursul proiectului meu. Aceasta va dura timp și va complica HTML-ul meu. Trebuie să existe o cale mai bună.

În cele din urmă, am găsit un tutorial uimitor pe YouTube despre consemnări. Trucul inteligent pe care l-a folosit a fost să creeze un tooltip folosind selectoarele :: before și :: după CSS. Puteți viziona videoclipul aici.

Acest truc este inteligent și curat, dar nu era suficient de generic.

Îmbunătățirea soluției

În această parte, voi face acest truc mai generic și vom descoperi mai multe despre unele proprietăți CSS. Iată ce dorim în cele din urmă să putem face:

 faceți clic aici !! 

Nu numai asta, dar dorim să putem specifica cu ușurință poziția de tip tooltip:

 faceți clic aici !! 

În primul rând - așa cum se menționează în videoclip - vom adăuga un pseudo element înainte și un după buton.

:: after și :: before sunt pseudo-elemente, care vă permit să inserați conținut într-o pagină din CSS înainte sau după conținutul elementului. Ei funcționează astfel:

div :: după {
 conținut: „după”;
}
div :: înainte de {
 conținut: „înainte”;
}

Rezultatul arată cam așa:

 inainte de    după

Haideți să parcurgem acest pas cu pas

Pasul 1: vom adăuga un atribut de tip tooltip astfel:

 faceți clic pe mine !! 

Avem nevoie de: după și :: înainte de pseudo-elemente. Acestea vor fi un dreptunghi simplu cu conținutul fișei de instrumente. Creăm un dreptunghi simplu cu CSS adăugând un chenar în jurul unui element gol pe care îl creăm cu proprietatea conținutului.

Pseudo-element :: înainte este utilizat pentru a afișa conținutul de tip tooltip. Îl adăugăm cu conținutul proprietății și extragem valoarea atributului tooltip. Valoarea pentru conținut poate fi un șir, o valoare a atributului din elementul precum exemplul nostru, sau chiar o imagine cu url (path / image.png).

Pentru a face acest lucru, poziția elementului buton trebuie să fie relativă. Cu alte cuvinte, poziția tuturor elementelor din interiorul butonului este relativă la poziția elementului buton în sine.

Adăugăm, de asemenea, câteva trucuri de poziție pentru a face tooltip-ul în centru cu proprietatea de transformare și acest rezultat.

Iată CSS-ul nostru:

Pasul 2: ne jucăm doar cu pseudo-elementele :: înainte și :: după crearea unei poziții de tip tooltip. Butonul nostru HTML va arăta astfel:

 faceți clic aici !! 

Poziția cu instrumentul poate fi: dreapta, stânga, sus sau jos.

pasul 3: în acest pas final, vom adăuga o animație simplă pentru a descoperi instrumentul.

Acest CodePen arată rezultatul final (și puteți face clic pentru a vedea codul final):

Dacă sunteți familiarizat cu React, verificați postarea Mea:

Multumesc pentru citit! Dacă credeți că alți oameni ar trebui să citească acest lucru, apăsați butonul , trimiteți un mesaj și trimiteți postarea. Nu uitați să mă urmăriți pe Medium, astfel încât să puteți fi notificat despre postările mele viitoare.

Citește mai multe povești https://elazizi.com/