de Youssouf El Azizi

Un ghid pas cu pas pentru realizarea sfaturilor de instrumente CSS pure

Un ghid pas cu pas pentru realizarea sfaturilor de instrumente

Recent am lucrat printr-un scurt tutorial despre crearea de sfaturi de instrumente simple folosind CSS pur (și fără element HTML suplimentar sau JavaScript). Ulterior am folosit această tehnică în propriul meu proiect și am găsit câteva trucuri pentru a o îmbunătăți.

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 crea și sfaturi de instrumente CSS pure.

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

Problema

Aveam nevoie să creez un sfat personalizat pentru proiectul meu.

Am început prin Google „Generator de sfaturi de instrumente CSS”. Am găsit destul de mulți generatori. Abordarea lor a fost de a adăuga un interval cu o poziție absolută în interiorul elementului pentru care doriți o descriere.

Dar am avut deja un proiect complet altfel. Nu am vrut să revin și să adaug toate aceste elemente de-a lungul proiectului meu. Acest lucru ar dura timp și îmi va complica HTML-ul. Trebuia să existe o cale mai bună.

În cele din urmă, am găsit un tutorial uimitor pe YouTube despre sfaturi. Trucul inteligent pe care l-a folosit a fost acela de a crea un tooltip folosind :: before și :: after Selectoare CSS. Puteți viziona videoclipul Aici.

Acest truc este inteligent și curat, dar nu a fost 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 vrem în cele din urmă să putem face:

<button tooltip=”tooltip content here”> click here !! </button>

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

<button tooltip=”tooltip content here” tooltip-position=”left” > click here !! </button>

Mai întâi – așa cum se menționează în videoclip – vom adăuga un before si un after pseudo-element la buton.

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

div::after { content: “after”;}div::before { content: “before”;}

Rezultatul arată cam așa:

<div> before <!-- div content here --> after</div>

Să trecem prin acest pas cu pas

Pasul 1: vom adăuga un atribut tooltip ca acesta:

<button tooltip=”simple tooltip here”> click Me !! </button> 

Avem nevoie ::after și ::before pseudo-elemente. Acestea vor fi un dreptunghi simplu cu conținutul sfatului. Creăm un dreptunghi simplu cu CSS adăugând o margine în jurul unui element gol pe care îl creăm cu content proprietate.

::before pseudo-elementul este folosit pentru a afișa conținutul descriptorului. Îl adăugăm împreună cu proprietatea content și extrageți valoarea atributului tooltip. Valoarea pentru conținut poate fi un șir, o valoare de atribut din elementul cum ar fi exemplul nostru sau chiar o imagine cu url(path/image.png).

Pentru ca acest lucru să funcționeze, 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 sfatul de instrument în centru cu proprietatea de transformare și acesta este rezultatul.

Iată CSS-ul nostru:

Pasul 2: doar ne jucăm cu ::before și ::after pseudo-elemente pentru a crea o poziție tooltip. Butonul nostru HTML va arăta astfel:

<button tooltip=”tooltip here” tooltip-position=”left”> click here !! </button>

Poziția de tip tooltip poate fi: dreapta, stânga, sus sau jos.

pasul 3: în acest ultim pas, vom adăuga o animație simplă la cursorul de ghidare.

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:

Vă prezentăm reactjs-popup? – Modale, sfaturi și meniuri – Toate într-unul
Tarticolul său este despre a vă oferi o prezentare simplă a ceea ce puteți face cu reactjs-popup și cum să îl utilizați eficientackernoon.com

Mulțumesc pentru lectură! Dacă credeți că alte persoane ar trebui să citească acest lucru, apăsați pe? buton, tweet și partajați postarea. Nu uitați să mă urmăriți pe Medium, astfel încât să puteți primi notificări despre postările mele viitoare.

Citiți mai multe povești https://elazizi.com/

1612097226 457 Un ghid pas cu pas pentru realizarea sfaturilor de instrumente