35 CSS irudi efektu benetan pozgarriak

CSS irudi efektuak

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

3d kubo

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

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

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

Ikuspegia Tilt Imaging

Un ikusizko esperimentua webgune gisa helburu zehatz bat izan dezakeena.

Persian veneziarrak

Persian veneziarrak

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

Irudi zatitua

Irudi zatitua

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

Pasa ezazu irudi efektua

Pasa ezazu efektuaren irudia

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

Ispilu efektua 

Espejo

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

Hausnarketa efektua duen irudia

Efektu erreflexua

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

Irudia okertu efektuan

Tilt efektua

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

Pasatzean lausotu efektua

Lausotze efektua

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

Irudia pasatzean

Irudia pasatzean

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

Pasa ezazu efektua SVGn

SVG pasatzean

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

Testutik irudira pasatzean

SVG efektua

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

Atzeko planoko irudi baten zati agerian

Pasa ezazu agerian

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

Pasatzean animazioa

Irudiaren gaineko animazioa

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

Jarraipenaren gaineko efektua

Irudiaren jarraipena

Beste efektu sinplea helburu zehatz baterako.

Irudiaren zoom-a

Zoom

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

Zooma pasatzearen efektua

Pasa gainetik zooma

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

Lupa efektua

Lupa efektua

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

Ez dago JavaScript pasatzerik

Ez JS

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

CSS gainjartze efektua

Pasatzean

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

Argazkiak egiteko Hovy

Hovy argazkiak

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

Irudi gainjartzea

lineas

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

Irudi efektuaren gainjartzea

Pasatzean zirkularra

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

Irudia gainjartzeko efektua

Pasatzean

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

Pasa ezazu efektua ikonoen animazioarekin

Pasatzearen gainean ikonoa

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

Pasatu efektua azpitituluekin

Subtitles

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

3D pasatzearen norabidearen efektuak

3D norabidea

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

Irudi eskala

Irudien eskala

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

iOS itzal efektua React-ekin

ios itzalak

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

Shadow Style iOS 10

ios itzala

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

Irudiaren trantsizio efektua

Mosaikoak

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

Korritu irudiaren trantsizioa

Scroll

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

Saguaren gurpilarekin irudia korrituz

trantsizio

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


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

6 iruzkin, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko. Beharrezko eremuak markatuta daude *

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Sandy Hernandez esan zuen

    Kaixo. Izugarri gustatu zaizkit argitaratutako efektuak. Kasualitatez jakingo duzu nola egiten den efektua erakuslea irudi baten gainean kokatzen duzunean eta behetik gora mugitzen den webguneen aurrebista bistaratzeko aproposa. Hona hemen esan nahi dudanaren adibide bat, «AZKEN WEBGUNEKO LANAK
    »Selectawebs.com webgunetik
    Thanks in advance

  2.   Omar esan zuen

    Orrialde eta argitalpen bikainak, oso erabilgarria izan zait, barruko aplikazioetarako atarira sartzeko panelerako efektu batzuk behar nituenetik. Mila esker ekarpen hauengatik.

  3.   rotger gabriel esan zuen

    Efektu bikainak. Autodidakta naiz, beti gustatu izan zait web garapenaren ideia, asko gustatuko litzaidake zure aholkuak nola hasi eta zer ordutan ikasten joan. agur

  4.   estu esan zuen

    Kaixo, eskerrik asko zure edukiagatik. Ezagutu ezazu zure orria gaur. Harrigarria da. Irakurketek eta bertan egin daitezkeen kontsultek ez dute amaierarik. ;)

    1.    Manuel Ramirez esan zuen

      Kaixo Natalia! Pozik nago hemen Creativos Online-n egindako irakurketekin gozatzeagatik. Onenak!

  5.   Mendoza esan zuen

    Kaixo efektu onen zerrenda ikusgarria, oso ondo legoke wordpress-era elementorekin nola aplikatu ikustea