Cum se face un cursor curat css3 fără scripturi

Apropo, atunci când terminăm, absolut, de asemenea, puteți face un cursor adaptabil în css, trebuie doar să schimbați lățimea containerului principal la max-lățime și să corectați imaginile.

Stabiliți cu fotografii

Pentru început, hai să facem cel mai greu loc de muncă - vom găsi fotografii pe Internet care vor fi folosite ca diapozitive. Să spunem că sunt animale. Am găsit trei imagini (glisorul nostru va fi foarte simplu, pentru trei diapozitive): un leu, un tigru și o panteră. Trebuie să le aducem la mărimea potrivită.

În consecință, trebuie să determinați care va fi dimensiunea cursorului. De exemplu, lățimea de 500 de pixeli și 350 de grade. Mai târziu o vom scrie în stiluri, acum doar planul.

Noțiuni de bază cu marcajul de bază

Ei bine, fotografiile sunt selectate și pregătite, un mini-plan este în cap, începem cu un simplu cod html:

Cum se face un cursor curat css3 fără scripturi

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Lăsați-l să fie containerul principal în care gheața noastră viitoare și butoanele pentru gestionarea ei vor minți. Toate restul marcajelor pe care le voi arăta, trebuie să adaug.

Am creat trei butoane radio, una dintre ele va fi marcată în mod prestabilit. Fiecare dintre ele primește un identificator unic propriu. Puțin mai târziu le vom adăuga o semnătură.

De asemenea, trebuie să adăugați blocurile pentru diapozitive la marcaj:

După cum puteți vedea, ele cad într-un container separat.

Într-un bloc separat, sunt create trei așa-numite semnături pentru aceste butoane, dar în acest caz ne vor servi pentru alta.

Folosind atributul pentru pentru a lega fiecare semnătură cu unul dintre butoane, acest lucru ne va permite să le decorăm frumos. Nu sunt butoanele de radio în sine, pentru că, din păcate, pe acestea, stilurile nu funcționează, și etichetele. Banda vă permite să vă asigurați că atunci când faceți clic pe semnătura, butonul radio devine automat selectat, ceea ce este foarte util pentru noi.

Incepem sa stilizam toate astea in css

În primul rând, trebuie să specificați stilurile pentru containerul partajat.

Acesta este modul în care realizăm dimensiunile planificate anterior pentru acesta și, de asemenea, oferim o mică indentare din partea de sus și poziționarea relativă, astfel încât în interiorul containerului toate elementele să poată fi poziționate absolut.

Următoarea acțiune este ascunsă de butoanele radio, însă nu putem să le emităm și nu are sens din partea lor.

Următorul pas - proiectăm slide-ul bloc și conținutul său - diapozitive.

Dacă setăm lățimea și înălțimea cu valoarea moștenirii, specificăm practic că browserul ia aceste valori din caseta de înfășurare. Astfel, aceste blocuri vor primi o lățime de 500 și o înălțime de 350 de pixeli, după cum avem nevoie.

Apoi, oferim fiecare diapozitiv imaginea de fundal. Deoarece li se dă transparență, nu vom mai vedea modificări până acum. Cu toate acestea, dacă schimbați opacitatea de la 0 la 1, atunci vom vedea panterul nostru ca fundal, revenind transparența la 0.

Emitem semnături (și, de fapt, switch-urile noastre)

Mai întâi trebuie să le aranjezi aproximativ în centru. Am făcut acest lucru cu o poziționare absolută și o indentare externă negativă. Există o astfel de regulă de aliniere cu ajutorul poziționării absolute: setați coordonatele stânga: 50%, apoi faceți o indentare negativă în stânga cu jumătate din lățimea elementului.

Aceste reguli vor stiliza eticheta noastră și, cu ajutorul unui pseudo-element, vom crea cadre pentru butoane și să le poziționăm.

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

A fost adăugată și o rotunjire de 20%. Acum veți vedea doar trei pătrate verzi, acum rămâne să se facă astfel încât atunci când faceți clic pe ele, stilurile se schimbă. Pentru a implementa toate acestea, avem nevoie de selectori magici:

Și ce se întâmplă este asta. În mod prestabilit, etichetele noastre (pătrate) sunt albe și nu sunt vizibile, doar cadrele verzi. Cu aceste selectori suntem ca și cum ați vorbi cu browser-ul: dacă butonul # point1 este selectat de utilizator, schimbați stilurile de etichete la numărul 1, dacă este selectat # point2, aplicați acest stil celei de-a doua etichete. Am înțeles că este posibil pentru dvs., este dificil să realizați toate acestea dacă sunteți începător. În acest exemplu, se folosesc două pseudo-clase, precum și simbolul

Acesta vă permite să selectați elementele care se află în spatele selectorului din fața acestuia. Câteva exemple simple pentru a vă clarifica:

p - selectați toate paragrafele care sunt în marcare după div.

element - toate elementele cu clasa de elemente, care se află în marcajul de pe blocul cu învelișul de identificare. Cele care sunt înaintea acestui bloc nu vor fi selectate.

Cred că înțelegi acum. Ei bine, clasa pseudo: verificată este una dintre inovațiile CSS3 și vă permite să aplicați stiluri în funcție de alegerea sau nu a butonului radio sau a căsuței de selectare.

Deci, cu explicații pe toate acestea, pentru că acum cel mai important lucru este să câștigați pe toți câștigând în cele din urmă! Adăugăm următorii selectori de magie:

Aici vedem utilizarea: bifați și

din nou, dar din moment ce le-am explicat deja, puteți ghici ce fac acești selectori. Dar, de fapt, ce comandă este dată browserului: atunci când o persoană selectează primul buton, face vizibilă fotografia corespunzătoare. După cum puteți vedea, vom schimba indexul z, adică numărul stratului și, de asemenea, vom elimina transparența completă, înlocuind-o cu opacitate completă.

Din moment ce tu și css ați înregistrat imaginea de fundal pentru fiecare diapozitiv, acum ei vor fi înlocuiți și vor deveni vizibili. După încărcarea automată a paginii în cursă, apare imaginea unui leu când faceți clic pe al doilea buton - un tigru, când faceți clic pe oa treia - panterul. Glisorul nostru funcționează fără probleme!

Foarte rezervată

La început am spus că, odată cu apariția lui css3, poți face un slider pur și simplu în detrimentul acestei tehnologii, fără a folosi scripturi, dar cu unele rezerve. Deci, după cum știți, glisorul pe care l-am creat nu va schimba diapozitivele de la sine, acest lucru este posibil numai atâta timp cât o persoană face clic pe butoane. Da, trebuie să luați în considerare astfel de limitări.

Adăugarea de efecte și diapozitive suplimentare

Astfel, puteți adăuga un număr nelimitat de diapozitive noi. Pentru aceasta, trebuie doar să adăugați:

noua etichetă

un nou diapozitiv și o fotografie la acesta

În plus, nu uitați să adăugați noi selectori în foaia de stil. De asemenea, aș dori să spun că în acest articol am implementat un cursor foarte simplu. Fără bloat, așa cum se spune.

Adăugarea efectelor nu este de fapt foarte dificilă. Doar adăugați o tranziție lină la diapozitive, precum și transformările dorite.

Acum fotografiile sunt înclinate la 55 de grade, iar rotația culorii la 90 de grade este aplicată. Dar datorită faptului că diapozitivele sunt ascunse în mod implicit, nu vom vedea toate acestea. De asta avem nevoie, dar vom vedea anularea acestor efecte la comutarea diapozitivelor. Deoarece este setată o tranziție lină, efectele vor fi anulate fără probleme și vom vedea cum se transformă imaginile în normal și se va vedea transfuzia de culoare.

Înțelegi esența? Am stabilit efectul imaginilor invizibile, iar când apar, avem timp să observăm anularea efectelor. Aici, desigur, nu am folosit toate prefixele furnizorilor necesari, astfel încât totul a funcționat în browsere mai vechi, dar acest lucru este doar pentru salvarea spațiului și a timpului. În general, adăugarea acestor efecte am făcut doar pentru exemplificare, de fapt, putem adăuga efectele noastre, indiferent de ce doriți.

Poate că, pe această temă, voi termina astăzi articolul. Am făcut un cursor cu efecte frumoase transformând apariția de noi fotografii. Desigur, are cons, evident, dar este un cursor pe css-ul pur. Ei bine, puteți afla mai multe despre această tehnologie din cursul nostru, acolo puteți face mai bine cu noi selectori.

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame