În articolul precedent, am analizat modul de creare a unui cursor simplu folosind CSS fără a utiliza scripturile JS. Acum, să aruncăm o privire asupra designului slider-ului - cu butoanele "înainte" și "înapoi".
Un cursor simplu CSS cu butoanele "înainte" și "înapoi"
Înainte de a continua să citesc articolul, vă recomand să citiți articolul precedent. în care codul unui cursor simplu a fost luat în considerare în detaliu.
Dar CSS poate arunca ușor creierul:
Vom afla ce se întâmplă aici. Atribuiți un bloc pătrat (lățime și înălțime de 80 de pixeli) pentru buton și utilizați proprietatea razei de margine pentru ao transforma într-un cerc. O poziționăm în mod absolut astfel încât jumătate din blocuri să se ducă în afara containerului. Datorită depășirii: proprietății ascunse a containerului, tot ceea ce a depășit limitele sale este trunchiat. Deci avem două semicercuri.
Pentru a centra în butoane în înălțime, utilizați următoarea metodă. Am setat butonul de sus: 50%. Astfel, limita superioară a butonului va fi în mijlocul containerului. De asemenea, specificați transformarea - compensarea înălțimii cu 50%: transformare: translateY (-50%). Procentele indicate în transformare nu sunt luate în considerare din dimensiunea elementului părinte (container), ci din dimensiunea blocului propriu-zis. Astfel, blocul este deplasat jumătate din înălțimile sale în sus. Ca rezultat, centrul blocului este aliniat la înălțimea centrului containerului.
Apoi, în interiorul butoanelor, trebuie să desenați săgeata spre stânga și săgeata spre dreapta. Noi folosim pentru aceasta pseudoelementele: după, și trageți săgețile sub forma caracterelor Unicode corespunzătoare.
Pentru a centra săgeata în înălțime, vom folosi o altă metodă de aliniere verticală: setați înălțimea liniei egale cu înălțimea containerului (înălțimea liniei: 80px).
Înțelegerea modului de afișare a butoanelor. Acum modificați codul de cursor din articolul precedent pentru a fi utilizat cu aceste butoane.
Avem nevoie de butoane separate pentru fiecare cadru al cursorului. În primul cadru, butonul "Înapoi" activează ultimul cadru, iar butonul "Înainte" activează al doilea cadru. În cel de-al doilea cadru, butonul "Înapoi" activează primul cadru, iar butonul "Înainte" activează al treilea cadru. Și așa mai departe. Codul este după cum urmează:
Din foile de stil de la glisorul anterior, ștergem tot ce este asociat cu butoanele vechi și adăugăm aspectul butoanelor din exemplul de mai sus:
Rezultatul este acest cursor:
Răsărit de soare peste insulă
Articole similare
Trimiteți-le prietenilor: