Noi facem în frumoasele link-urile de design css atunci când treci

Efectele frumoase de link-uri către CSS

In HTML, pentru aceste experimente, eu trebuie doar să se conecteze o foaie de stil, cere codificate și a pus un link. Toate lucrările se face prin CSS. O demonstrație a efectelor pe care puteți vedea accesând această pagină

subliniere încet retractabil

Acesta este primul efect, pe care să-ți arăt.

Efectul în sine este implementat folosind selectorul „a: hover“. Această pseudo care se aplică elementelor atunci când Miscati mouse-ul. În continuare am stabilit cadrul de mai jos, cu o grosime de 5 pixeli, violet.

Acum, uita-te la efectul în sine. Plasați cursorul pe link-ul. Ea apare ușor subliniere. Va fi mai frumos decât subliniere implicit! În mod similar, puteți seta frontiera de pe stânga, dreapta sau de sus, și poate fi chiar pe toate laturile.

Trage subliniere jos

Acest efect este un pic mai dificil de implementat, dar se pare destul de frumos.

Baseline pentru stiluri de referință sunt definite la fel ca în exemplul anterior. În continuare avem nevoie pentru a crea un element pseudo. Acest lucru va fi sublinierile ne. Setează culoarea, lățimea și înălțimea. Afișarea conținutului de proprietate și asigurați-vă că pentru a indica faptul că pseudo afișează corect.

În continuare, trebuie să vă înregistrați întârziere (am scris 1,2 secunde), a pus opacitatea la 0, elementul nu este vizibil în absența unor orientări cu privire la link-ul. Ultimul lucru pe care îl vom face - de transformare a muta elementul în jos de 30 de pixeli.

Pentru a realiza efectul, iar acum trebuie doar pentru a schimba opacitatea la 1 (elementul complet opac) și a reveni elementul în poziția inițială. Astfel, din cauza acestei întârzieri, modificare a proprietăților are loc fără probleme și veți vedea cum, treptat, sa mutat spre subliniind link-ul.

prelungire netedă a legăturii directe

stiluri de bază de la un link nu se schimbă. Nominalizarea se poate face mai mult dacă doriți.

Majorarea link-uri

Creșterea lungimii legăturii

Puteți să vă asigurați că, atunci când treceți cu litere spațierea devine mai mare.

Apariția lentă a culorii de fundal

De asemenea, este foarte simplu de a realiza:

În planare de referință apar treptat fundal galben. Desigur, aveți posibilitatea să atribuiți orice culoare

Desigur, acest lucru nu este toate efectele. În timp ce am vorbit doar despre cele mai simple. După cum vă puteți imagina, puteți face mai avansat. Mai multe despre asta data viitoare.

Ați putea fi, de asemenea, interesat în

Astăzi articol pe un astfel de subiect mic, dar poate cineva dintre voi va fi de ajutor. în

Astăzi, vă sugerez să fac un formular de căutare frumos pe CSS. Sunt de acord, formularele de înregistrare standard de

Buna ziua. Un foarte mult timp nu a scrie mesaje pe tema muncii html / css. Recent, abia a început

Toate binevenite. Astăzi, voi scrie un articol foarte interesant despre cum se face în css

Vă salut. Se pare că, pe paginile de blog-ul său, nu am descris modul de a face