13 efecte CSS frumoase pentru imagini
- măriți și micșorați fără probleme;
- Mutarea pe verticală și orizontală a imaginilor;
- înclinați sau rotiți imaginea;
- imaginile rotunde;
Și, de asemenea, astfel de efecte:
- Blur, lumină, contrast, sepia;
- tranziție ușoară de la imaginea colorată la alb-negru;
- inversarea culorii.
Pentru a utiliza codul, trebuie doar să copiați mai întâi codul principal și apoi codul de efect și să îl lipiți, bineînțeles, pe blogul sau site-ul dvs. Web.
Codul principal
Acest cod se aplică tuturor efectelor care vor fi oferite în continuare:
Toate stilurile din clasa ".pic" vor fi comune tuturor imaginilor. Pentru toate imaginile există un cadru alb în 10px (linia 13). Aceleași dimensiuni ale imaginii pentru înălțime și lățime la 300px sunt indicate (linia # 15, # 16). Indentă blocuri în 20px (rândul 17). Pentru ca imaginea să nu depășească capitolele secundare specificate, scriem "overflow: hidden; “. Dacă pentru dvs. toate acestea nu sunt clare, vă recomand să citiți elementele de bază ale CSS.
Continuați cu efectele.
În HTML, inserați fișierul între etichete
aici este acest cod:Linia numărul 2. specificați calea către imagine, dimensiunea căreia este de 400 x 400 px.
În CSS, lipiți acest cod:
Imaginea este în esență 400 x 400 pixeli, dar o vom reduce la blocul de 300 x 300 pixeli (Linia # 3 și # 4).
Imaginea se modifică ușor la imaginea originală de 400 x 400 pixeli (Linia # 14 și # 15). Pentru redimensionare netedă, proprietatea de tranziție este. unde este indicată o secundă. (Linia nr. 6 - nr. 10).
De fapt, acesta este același cod, doar că trebuie să modificați dimensiunea și imaginea fără probleme cu dimensiuni mari de 400 x 400 pixeli pentru a scădea cu 300 x 300 pixeli.
În HTML, un fișier între etichete
inserați acest cod aici:În CSS, lipiți acest cod:
3. Efectul "deplasării orizontale"
Acest efect modifică poziția blocului. Adică dacă mutați cursorul peste imagine, imaginea se va deplasa lateral.
În HTML, inserați fișierul între etichete
aici este acest cod:În linia numărul 2, specificați calea către imagine, dimensiunea căreia este de 600 x 300 pixeli.
În CSS, lipiți acest cod:
Pentru a face imaginea să se deplaseze spre stânga, specificați valoarea "-200" în proprietatea "margin-left". Dacă valoarea este "200", offsetul va fi în partea dreaptă.
4. Efectul "offset vertical"
De fapt, acesta este același cod, doar că trebuie să setați "margin-top" în locul proprietății "margine-stânga", iar imaginea se va mișca fără probleme atunci când plasați cursorul pe hartă.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Dacă specificați "200" în proprietățile "margin-top", imaginea va fi deplasată.
Acest efect va face o mică mișcare a imaginii atunci când plasați mouse-ul peste ea.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Imaginea când se afișează cursorul va trece la 10 0 spre stânga (Linia # 11-Nr.15). Puteți crește singur gradul de rotație.
6. Efectul "rotirea unei imagini cu o schimbare a formei"
Acesta este efectul meu preferat. Când mutați cursorul mouse-ului peste imagine, face un cerc de rotație, în timp ce forma pătrată se schimbă într-o formă rotundă.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Pentru rotunjirea colțurilor, "raza graniței" cu o valoare de "50%" răspunde.
Pentru rotirea imaginii la 360 0 corespunde transformării proprietății.
7. Efectul "Focalizare imagine"
În acest sens, nu este nimic neobișnuit, rotind imaginea și mărind grosimea cadrului.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Aici, cred că toți înțelegeți: frontiera este responsabilă pentru grosimea graniței și raza de graniță pentru raza de curbură.
Când mutați cursorul mouse-ului peste o imagine clară, va deveni neclară.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Pentru estompare, proprietatea "webkit-filter: blur" corespunde parametrilor 5px.
9. Efectul "Imagine alb-negru"
Când mutați cursorul mouse-ului peste imaginea colorată, acesta devine imediat alb-negru.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Cât de mult să realizați o imagine alb-negru corespunde filtrului "webkit-filter: grayscale" cu o valoare "100%". Puteți specifica propria valoare de la 1% -100%.
Imaginea întunecată, când plasați cursorul peste cursorul mouse-ului, devine mai strălucitoare.
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Începe inițial imaginea la "10%" (rândul 3)
Când poziționați cursorul mouse-ului, acesta luminează imaginea la "100%" (numărul liniei 12)
De asemenea, un efect destul de bun, cu ajutorul căruia imaginea va deveni ton sepia.
În HTML, inserați fișierul între etichete
În CSS, lipiți acest cod:
12. Efectul "Contrast"
Cred că chiar numele deja spune că atunci când plasați cursorul peste imaginea cursorului, imaginea va deveni mai saturată și un contrast mai mare.
În HTML, inserați fișierul între etichete
În CSS, lipiți acest cod:
Acordați atenție liniei 11. Dacă specificați valoarea "100%", modificările nu vor avea loc. Dacă procentul pentru a face mai mult "100%", de exemplu "185%", imaginea va deveni mai mult contrast. Dacă procentajul este mai mic de "100%", de exemplu "60%", imaginea va dispărea.
13. Efectul "inversiunii"
Acesta este, de asemenea, unul dintre efectele mele preferate. Cumva arată "metalul".
În HTML, inserați fișierul între etichete
aici este acest cod:În CSS, lipiți acest cod:
Valoarea inversării este setată de la 0% la 100% (linia # 11).
Articole similare
Trimiteți-le prietenilor: