35 CSS irudi efektu benetan pozgarriak

Gaur egun webean irudiak daude arreta erakargarri nagusi bihurtu dira era guztietako gaietarako hurbiltzen den erabiltzaileari. Argazkigintzatik, bidaietatik, produktuetatik edo edozein motatako eszenetatik abiatuta, irudiak dira elementu garrantzitsuenetako bat; beraz, efektu deigarria sortzeko gai bagara, argazki horrek gure webgunean erori den erabiltzailea atxikitzeko ahalmena izango du.

Efektu horietako asko webguneko bisitari batean lortzeko gai direnak dira. CSS efektuak, kasu batzuetan deigarriak direnak eta beste batzuetan sinpleagoak izateko helburua dutela, beti ere guztiok bilatzen duguna lortuz: erabiltzaileak adi egotea gure webguneak eskaintzen duen guztiari. Jarrai dezagun arreta erakartzen duten 33 CSS irudi efektuak zerrendatzen.

Fluid Twisting Irudia 3D

Irudi efektu hau benetan harrigarria denean deskonposatu irudia 3D kubo batean bere bertikaltasunean biratzeko gai dena, efektu bisual handia lortzeko. CSS3D oinarritzat hartuta, zure webgunean inplementatzeko gai bazara, bisitaria aho zabalik geratuko da.

Lotutako artikulua:

35 CSS testu efektu gehiago zure webgunerako

3D pasatzearen efektua

Saguaren erakuslea irudiaren gainean uzten dugunean beste efektu bisual bikaina da hau erori bera jota bezala. Animazio bikaina beste irudi efektu bikain baterako.

CSS 3D panorama

HTML eta CSS eskutik doaz a egiteko panorama efektu bikaina hiri bateko eraikin baten goialdetik begira egongo bagina bezala.

Lotutako artikulua:

Zure webgunearen tipografiarako ezinbesteko 27 CSS testu efektu

Irudiak "okertu" ikuspegian

Un ikusizko esperimentua webgune gisa helburu zehatz bat izan dezakeena.

Persian veneziarrak

Efektu bisual bikaina aldi bakoitzean utzi saguaren erakuslea irudiak ematen dituen bi kontrasteen artean aldatu dadin.

Irudi zatitua

Saguaren erakuslea irudiaren gainean kokatuz gero handitu egingo da primeran osatuta egon dadin.

Pasa ezazu irudi efektua

E-tik ateratzean sareta-efektua sortzen daSaguaren erakuslea puntu zehatz baten gainean iruditik.

Ispilu efektua 

Argazkia ispilu efektua duten korrituak saguaren erakuslea eskuinetik ezkerrera irristatzen dugun bitartean eta alderantziz.

Hausnarketa efektua duen irudia

Bilatzen duen ekintza irudiaren isla efektua proiektatu CSS irudi efektu honetarako erabili duguna.

Irudia okertu efektuan

Iritsi daiteke pixka bat zorabiatu irudiaren aldeek efektu bikoitz oso deigarria nola sortzen duten ikustean.

Pasatzean lausotu efektua

Erakuslea irudian zehar mugitzen dugun bitartean, lausotze efektua sortzen du hori segundo batzuetan desagertzen da.

Irudia pasatzean

Efektu bat dago desplazamendua erakuslea jarri dugun momentu berean sagua irudiaren gainean.

Pasa ezazu efektua SVGn

Jarritako efektu bikaina ezkutatutako irudia estali zuen izenaren beraren azpian. Akabera bikaina eta ezin hobea irudien galeria sortzaile eta bitxia erakusteko.

Testutik irudira pasatzean

Testuak irudia erakusten du saguaren erakuslea animazio deigarriekin kokatzean itsu efektuarekin hori erditik irekitzen da.

Atzeko planoko irudi baten zati agerian

Eskuan bagenu bezala teleobjektibo baten gurutzea, atzeko irudiaren zati bat saguaren erakuslea mugitzean agerian geratzen da.

Pasatzean animazioa

Efektu bikaina, baina oso erraza da konposizioan. Zerbait bila bazabiltza sinplista eta minimalista, efektu horrek maitemindu egingo zaitu.

Jarraipenaren gaineko efektua

Beste efektu sinplea helburu zehatz baterako.

Irudiaren zoom-a

Hau da, zoom efektu tipikoa ziur zure webgunera joan nahi duzula.

Zooma pasatzearen efektua

Bezalako beste alternatiba bat zoom efektua erakuslea uzten dugunean sagua irudiaren gainean.

Lupa efektua

Bere izenak dioen bezala, saguaren erakusleak irudia itzuliko du handitzen duen lupan.

Ez dago JavaScript pasatzerik

Javascriptrik ez zoom efektu bat birsortu dezakezu irudia sareta aldakor batekin.

CSS gainjartze efektua

Un geruza baterako CSS efektu hutsa hori daukagun irudian muntatuta dago.

Argazkiak egiteko Hovy

Erabiltzaile elementuen CSS animazioen liburutegia duzu. Horiek guztiak estekan ikus ditzakezu ondoen egokitzen zaizuna lortzeko. Hainbat efektu dituzu aukeran kalitate handikoa.

Irudi gainjartzea

Kalitate handiko lineako animazioarekin, deigarriak diren geruzak agertzen dira. Zure gogoko bihur daitekeen beste bat.

Irudi efektuaren gainjartzea

-Ren beste efektu batekin itzuliko gara gainjarri HTML eta CSS bidez bertan, lerro zirkularrak dira protagonista.

Irudia gainjartzeko efektua

Web elementu desberdinetarako erabil daitekeen gainjartze efektu deigarria. Batekin sormen gutxi integra daiteke kartetan artikulu honetakoak bezala.

Pasa ezazu efektua ikonoen animazioarekin

Kalitate handikoa lehenengo aldaketetan kaskatuko zaituen ikonoen animazioarekin. Gai da ekarri testua indar handiz.

Pasatu efektua azpitituluekin

Pasatzearen beste efektu bikaina animazio oso leunarekin agertzen diren azpitituluak eta lortu.

3D pasatzearen norabidearen efektuak

Zerrenda osoan ikusiko duzun irudi efektu kitzikagarrienetako bat. The saguaren erakuslea «3D kuboaren» gida bihurtuko da.

Irudi eskala

Beste efektu sinple bat, baina oso ikusgarria loraldi handirik gabe.

iOS itzal efektua React-ekin

Un efektua zalaparta handirik gabe, baina oso konkretua sortzen duen itzal efektuan, badirudi "lurretik" altxatuko balitz bezala.

Shadow Style iOS 10

Saguaren erakusleak a du 'bultzada' efektua errealismo handia sortzen duen irudiaren gainean. Oso interesgarria.

Irudiaren trantsizio efektua

Un trantsizio efektu zoragarria bertan, irudia sareta sare batean deskonposatzen da. Efektua gertatzen den denbora eta gehiago kontrolatu dezakezu.

Korritu irudiaren trantsizioa

Un oso modan eta sormen trantsizio efektua zure webgunerako. Ez galdu hitzordua CSS honetan.

Saguaren gurpilarekin irudia korrituz

Beharko duzu ezarri ezazu saguaren gurpila erabiltzen duzun unean irudi batetik bestera aldatzeko trantsizioko animazio bikainarekin. Ikusgarria.