Css efecte cool. Efecte de hover originale pentru imagini în CSS3 pur

În primul rând, pentru cei care nu sunt deloc în subiect sau deloc în materie, voi explica pe scurt ce este hover-. Acestea sunt diverse tipuri de efecte (pop-up-uri, tooltips, tranziții netede, transformare, rotație, zoom, offset etc.) aplicate elementelor unui site web cu cursorul mouse-ului pe ele. Acestea pot fi implementate atât cu ajutorul diverselor plugin-uri jQuery, cât și într-unul pur.
Astăzi am pregătit o colecție mare de efecte hover originale pentru imagini create folosind CSS3, fără a conecta biblioteci javascript. Nu voi vorbi despre avantajele și dezavantajele implementării efectelor hover în CSS3 pur, acesta este un alt subiect, doar uitați-vă la exemple și, dacă este necesar, folosiți-l pe cel care vă place pe site-ul dvs. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu surse. Manualele sunt în mare parte în limba burgheză, dar totul este mai mult sau mai puțin intuitiv.

Vreau doar să vă atrag atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Pentru a nu sparge imaginea de ansamblu, nu a distorsionat numele efectelor cu traducere automată (cu excepția unora), a lăsat originalele titlurilor așa cum le-a numit dezvoltatorul.

Un efect de hover foarte interesant pentru imaginile în miniatură, folosind linii subțiri în design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor pentru imagini, transformări 3D blânde și neintruzive și tranziții line ale pseudo-elementelor. Funcționează doar în browserele moderne.

iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit cu Scss CSS (fișier), ușor de modificat cu variabile. Codul este modular, nu este nevoie să includeți întregul fișier. Peste 30 de efecte diferite într-un singur pachet. Totul este destul de bine documentat și efectele sunt foarte ușor de utilizat. Tot ce trebuie să faceți este să aliniați corect marcajul HTML și să puneți fișierul CSS la lucru.

Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este ca titlul, numele autorului și butonul de link să apară dramatic atunci când treceți cu mouse-ul peste miniaturi. Pentru unele efecte, sunt folosite transformări vizuale 3D.

Un efect de tranziție foarte simplu, fără clopoței și fluiere speciale, o imagine complet rotundă într-un cadru, se transformă prin schimbarea focalizării pe hover și atât.

pentru miniaturile CSS3

Dezvoltatorul își poziționează munca ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pentru miniaturi. Este declarat un suport puternic pentru browserele moderne, inclusiv IE 9+. Desigur, este dificil să o numim o galerie cu drepturi depline, dar efectul apariției semnăturilor este destul de interesant.

Un alt set de reguli CSS pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile absolut circulare. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată privind configurarea și utilizarea. Efectele sunt acceptate de toate browserele moderne.

Rotirea miniaturilor la trecerea cursorului

Efectul simplu de rotire a miniaturilor rotunde atunci când treci peste ele cu cursorul mouse-ului este cam același pe care îl poți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Este implementat în câteva linii de cod CSS.

Dacă este tradus literal: „Efect sexual când treci cu mouse-ul deasupra”. Desigur, cu greu vei observa ceva atât de sexy în acest efect, decât dacă ai o imaginație violentă, dar efectul este interesant în felul său și merită să fii atent.

Cinci efecte de hover diferite pentru imagini. Subtitrări pop-up în trei variante, perdele sub formă de modificare a gradului de transparență și rotație cu mișcare orizontală.

4 tipuri de efecte de animație pentru legendele imaginilor, implementate exclusiv folosind CSS3. Diferite poziții de fade și efecte de tranziție, performanță destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la codul sursă al paginii demo, nu am găsit nicio documentație separată.

Miniaturi înscrise în galerie cu diferite apariții de subtitrări, rotație, estompare, pop și multe altele. Documentația privind utilizarea și configurarea este destul de puțină, dar dacă doriți cu adevărat, vă puteți da seama.

Acest efect nu reprezintă nimic special, o schimbare banală a luminozității imaginilor aflate la hover, cu excepția faptului că se adaugă elemente de animație. Va trebui să vă dați seama singuri detaliile implementării, extinzând codul sursă al demo-ului.

Un alt set de 10 efecte de hover pentru imagini, diverse modificări ale miniaturilor la hover, zoom, rotație, rotație, estompare etc.

Diverse efecte pentru animarea cadrului din jurul imaginilor, arată destul de atractiv, există un ghid detaliat despre modul de configurare și utilizare.

Efectele de trecere cu mouse-ul CSS3 originale aplicate pentru a afișa în mod eficient subtitrările în miniatură la trecerea cu mouse-ul. Setul de reguli CSS include 10 efecte diferite pe care le puteți folosi separat pentru imagini diferite. Efectele sunt cu adevărat impresionante, mai ales când realizezi că totul este făcut cu CSS3. Un ghid detaliat vă va ajuta să vă dați seama ce este.

Ideea este de a crea un SVG care este o formă de fundal pentru un fel de litere și se transformă într-o altă formă la trecerea mouse-ului. Astfel, puteți face multe opțiuni diferite, în exemplu sunt afișate trei tipuri de efecte de tranziție. Lucrul frumos despre utilizarea SVG este că putem redimensiona formularul pentru a se potrivi containerului părinte.

Imagini de alunecare

Esența acestui efect este că imaginea este mutată în sus și în jos pentru apariția semnăturii. Dacă lucrați cu parametrii de stil, cred că puteți obține efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.

Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în dreapta sus sau la stânga în jos, sub forma unei panglici cu un fundal întunecat translucid, totul este foarte simplu de reformat folosind proprietățile css.

O soluție interesantă, miniaturile sunt prezentate într-o formă întunecată, când treci cu mouse-ul peste ele, apar imaginile și semnătura apare pe un fundal deschis.

O legendă a imaginii iese din colț și se extinde în diagonală pe întreaga zonă a imaginii.

Câteva soluții mai interesante pentru implementarea subtitrărilor pop-up pentru miniaturile imaginilor. În editorul online, puteți experimenta parametrii și puteți obține rezultate mai impresionante.

Un set de efecte frumoase atunci când treceți cu mouse-ul peste miniaturi, diferite tipuri de aspect și design de subtitrări pentru imagini. Liniile subțiri, în contrast cu un fundal ușor întunecat, creează blocuri de informații ușor de citit.

Forme bizare și efect de zoom combinate cu efectul de animație al subtitrărilor pentru imaginile în miniatură.

Efecte minunate ale suprapunerii pictogramelor pe miniaturile imaginilor în diferite variante de aspect. Exemplul folosește simbolul (+) conturat într-un cerc folosind raza-chenar: în CSS, puteți folosi și pictogramele font pentru a face panoul pop-up mai informativ.

Un exemplu de creare a unui efect de diapozitiv vizual pentru afișarea subtitrărilor volumetrice în imagini folosind numai CSS3 și HTML5.

6 Subtitrări imagini

6 Opțiuni pentru apariția subtitrărilor pop-up pentru imaginile deplasate folosind CSS3. Lecție detaliată despre implementare și configurare, surse disponibile pentru descărcare.

Și, în cele din urmă, în cele din urmă, ca să spun așa, nu pot să nu menționez cel mai simplu mod de a crea o legendă pop-up pentru o miniatură folosind CSS3.

Am vorbit despre această metodă într-una din lecțiile mele anterioare:.

Cu tot respectul, Andrew

Foarte des, pe site-uri, s-ar putea să întâlniți o modificare sau butoane la trecerea cursorului. O pseudo-clasă specială: hover în CSS vă permite să implementați sarcina. Astăzi vom lua în considerare câteva tehnici de realizare a acestui truc, iar mai jos vom publica o listă cu cele mai interesante dintre ele (cu scurte descrieri/explicații). Împărțim toate opțiunile în:

Aceste grupuri sunt foarte arbitrare, deoarece multe exemple se suprapun și sunt universale, adică pot fi întâlnite în proiectarea diferitelor obiecte.

Efectul de trecere cu mouse-ul în stilurile CSS este adăugat în partea dreaptă a elementului, după cum urmează:

a: hover (culoare: roșu;)

Cel mai adesea, mecanismul este folosit special pentru link-uri pentru a le schimba culoarea sau pentru a adăuga/elimina sublinierea. Cu toate acestea, poate fi atribuit altor blocuri, butoane, texte sau utilizat în timpul creării.

buton: hover (fond: rgba (0,0,0,0); culoare: roșu;) .my-picture: hover (opacitate: 0,5; filtru: alfa (opacitate = 50);)

Browserele moderne percep la fel de corect efectul de hover CSS pe hover, deși în versiunile mai vechi ale IE 6 și mai jos funcționează exclusiv pentru link-uri. În plus, unele surse au spus că acest lucru trebuie indicat în cod.

Apropo, la setarea stilurilor de link, se pot folosi suplimentar și următoarele selectoare: link - pentru paginile care nu au fost încă vizitate,: vizitate - cele în care ați fost deja +: activ definește adresa activă în prezent. Este important să plasați efectul de hover în CSS după: link și: vizitat, dacă există.

Să trecem de la teorie la practică. Mai jos este o listă de materiale și fragmente utile - urmați linkurile pentru a vedea sursele.

Buton de trecere și link-uri efecte

După cum am spus mai sus, aceasta este cea mai populară categorie de obiecte de pe site-ul în care apare această tehnică. Iată câteva opțiuni pe această temă.

Exemple simple pentru butoane

Sullivan Buttons

Trucul este că atunci când treci cu mouse-ul peste diferite butoane, pe lângă schimbarea culorii de fundal, se lansează și o mică animație cu pictograme (și fiecare are propriile sale).

Pictograme CSS pe Hover

O selecție de 5 opțiuni simple pentru implementarea sarcinii. În toate cazurile, sunt folosite pictograme suplimentare care apar în dreapta/stânga textului sau îl înlocuiesc.

Buton Hover Effects

Comparativ cu exemplul anterior, aceste 12 funcții de declanșare arată mult mai interesante, atât vizual, cât și din punct de vedere al codului. Nu fără JS.

Navigația plutește

Câteva modificări care îl fac mai neobișnuit decât proprietatea de bază a textului decor. Fundalul butoanelor este umplut suplimentar cu diferite efecte vizuale.

Informații la hover

Funcționalitatea tooltip este acum acceptată în toate browserele, dar o puteți personaliza pentru a se potrivi nevoilor dvs. În exemplul curent, pseudo-clasa este declanșată pentru eticheta dfn, arată elegant. Codul este destul de compact HTML + CSS.

Butonul Mana

Una dintre cele mai originale opțiuni de efect de hover în blocuri este că la hover, este ca și cum l-ați umple cu lichid. Implementarea folosește CSS, HTML și SVG. Acest fragment va fi cu siguranță o mană divină într-un anumit subiect de site-uri.

Efecte de trecere cu mouse-ul pentru imagini

15 trucuri de bază

În ciuda faptului că articolul a fost publicat cu mult timp în urmă, metodele încă funcționează corect. Aici, probabil, sunt adunate toate transformările tipice posibile pentru grafică: mai multe tipuri de zoom, rotații, estompare, alb/n, transparență, filtre, strălucire etc. Material foarte util.

Efecte frumoase de imagine

O selecție de 30 de acțiuni plăcute și netede atunci când treci cu mouse-ul peste o imagine. Datorită manipulărilor vizuale simple sub formă de zoom, adăugarea de linii, se creează o impresie complexă bună. Pe alocuri titlul crește și scurta descriere „trage în sus”. O opțiune excelentă pentru un portofoliu.

Animație de hover Barberpole

La prima vedere, animația nu este complicată, ceea ce în cele din urmă arată foarte cool și non-standard.

Efecte de hover CSS cu detectarea direcției

Pentru o selecție excelentă de fragmente și coduri conexe, consultați acest articol de pe css-tricks.com. Toate aceste exemple sunt unite de faptul că, în procesul de lucru, se determină locația și direcția de mișcare a cursorului. Acest lucru, la rândul său, vă permite să creați reacții destul de originale atunci când treceți cu mouse-ul peste elementele paginii:

În multe soluții sofisticate, Javascript și jQuery pentru efectele hover pot diversifica și îmbunătăți foarte mult rezultatul.

Conștient de direcție Hover Goodness

Dale de direcție folosind clip-path Pure CSS

Căutați restul jeturilor în articolul original.

Animatism

În această dezvoltare există peste 100 de modalități simple de a „anima” imagini sau obiecte aflate la hover. Cu ajutorul acestor funcții puteți implementa aspect diferit de butoane, titluri, texte, pictograme sociale etc. Există opțiuni cu schimbarea afișajului imaginilor, suprapuneri ale unui fundal translucid.

Link-ul conține 7 efecte de antet CSS3 - când, când trece cu mouse-ul peste o imagine, utilizatorul va vedea un bloc de informații cu un titlu, o scurtă descriere și un link pentru a merge. Acest lucru nu înseamnă că exemplele sunt foarte originale, dar cu siguranță vor ajuta la diversificarea unui proiect de conținut static.

Biblioteci CSS Hover

Hover.css

Proiectul cu numele simplu Hover.css conține o colecție de efecte CSS3 pentru linkuri, butoane, blocuri etc. Puteți utiliza codul gata făcut și/sau puteți adăuga propriile modificări la acesta. Există o mulțime de lucruri interesante aici: transformări 2D/3D, lucrul cu fundaluri și cadre, umbre, pictograme. Soluția este disponibilă în formatele CSS, LESS și Sass.

Imagehover.css

O altă bibliotecă care setează efecte de hover pentru imagini - în versiunea gratuită veți găsi 44 de opțiuni de conversie (setul premium conține de 5 ori mai multe dintre ele). LESS și SCSS sunt, de asemenea, acceptate aici, acest caz cântărește doar 19 kb. Site-ul are o pagină cu o demonstrație a tuturor exemplelor de lucru. Există multe caracteristici unice oferite care nu au fost văzute mai sus.

Proiectul are peste 30 de tehnici diferite pentru obiecte rotunde și pătrate. Toate sunt destul de originale, practic nu există acțiuni simple „un element” sub forma unui zoom/fly-out obișnuit. S-a implementat sarcină CSS3 + HTML pură (plus fișiere Scss incluse). Compatibilitate excelentă cu Bootstrap 3, există documentație.

Total. Sperăm că aceste efecte de hover CSS atunci când treceți cu mouse-ul peste imagini, blocuri, link-uri și alte elemente ale paginii v-au ajutat să înțelegeți acest subiect. Puteți implementa cele mai de succes soluții, în opinia dvs., în site-urile dvs. - fie că este vorba de conectarea unei biblioteci cu drepturi depline sau pur și simplu de integrarea unei versiuni mici a codului.

Dacă cunoașteți alte funcții și fragmente interesante, trimiteți-le adresele URL în comentarii. Și vom completa articolul în viitor.