35 runtii farxad u leh saamaynta sawirka CSS

Saamaynta muuqaalka CSS

Maanta sawiro ayaa ku jira shabakadda waxay noqdeen kuwo si weyn isha loogu hayo adeegsadaha ku soo dhawaada dhammaan noocyada mawduucyada. Laga soo bilaabo sawir qaadista, safarka, alaabada ama muuqaalada nooc kasta ha ahaadeene, sawirradu waa mid ka mid ah walxaha ugu muhiimsan, markaa haddii aan awoodno inaan soo saarno saameyn wax ku ool ah, sawirkaasi wuxuu yeelan doonaa awood uu ku ilaaliyo adeegsadaha ku soo dhacay degelkeenna.

Si fudud ayey u tahay waxa badan oo ka mid ah saameyntani ay awood u leeyihiin inay ku gaaraan booqdaha websaydhka. Saamaynta CSS oo runtii indho qabad leh mararka qaarkood iyo in kuwa kale ay leeyihiin ujeedada ah inay noqdaan wax fudud, in kasta oo had iyo jeer la gaaro waxa aan dhamaanteen raadineyno: in isticmaalaha uu fiiro gaar ah u leeyahay wax kasta oo ay websaydhadu bixiso. Aynu hadda liis garaynno saamaynta muuqaalka 33 CSS kuwaas oo si xoog leh indhaha u qabanaya.

Sawirka Qallooca Dheecaanka 3D

3d cube

Saamaynta sawirkani runtii waa wax lala yaabo goorma u-jajabinta sawirka seddex geesood ah 3D kaas oo awood u leh inuu ku wareego qiyaastiisa toosan si uu u soo saaro saameyn muuqaal oo weyn. Iyada oo ku saleysan CSS3D, haddii aad awood u leedahay inaad ku hirgeliso boggaaga, booqdaha ayaa noqon doona mid aan hadlin.

Maqaalka laxiriira:
35 dheeraad ah oo saameyn CSS ah oo loogu talagalay websaydhkaaga

3D saameyn hover

3D Hover Saamaynta

Saameyn kale oo muuqaal ah oo weyn si loo gaaro taas markaan ka tagno tilmaamaha jiirka sawirka, kan dhici sida haddii isku wax ku dhuftay. Animation A weyn u saamaynta kale image weyn.

CSS 3D Panorama

CSS 3D Panorama

HTML iyo CSS way isla socdaan si loo sameeyo a saameyn panorama weyn sidii oo aan ka eegaynay korka dhisme magaalo ku yaal.

Maqaalka laxiriira:
27 saamaynta qoraalka CSS ee muhiimka u ah qoraalka boggaaga

Sawirada "janjeera" aragtida

Muuqaalka Janjeerka Muuqaalka

Un tijaabo muuqaal ah kaas oo u adeegi kara ujeedo gaar ah oo qayb web ah.

Indhoolayaasha Venetian

Indhoolayaasha Venetian

Saamayn muuqaal oo weyn markasta ka tag tilmaanta jiirka si ay isu bedesho labada isbarbardhig ee sawirku siinayo.

Sawir kala

Sawir kala

Adoo dul wareegaya tilmaamaha jiirka sawirka, waa waa la weyneyn doonaa si looga dhigo mid sifiican uga kooban.

Hover saamaynta sawirka

Hover Saamaynta Sawirka

Saamaynta shabakadda ayaa la soo saaraa marka la baxayo el tilmaamaha jiirka meel cayiman ka sawir

Saamaynta muraayadda 

Espejo

Sawirka duub waxtar leh muraayad maaddaama aan jiidayo tilmaamaha jiirka midig ilaa bidix iyo dhinaca kale.

Sawir leh saameyn milicsi

Saamaynta falcelinta

Ficil raadinaya ku muuji saameynta milicsiga sawirka in aan u isticmaalnay saameyntaan sawirka CSS ah.

Muuqaal sawir oo saameyn hover ah

Saamaynta Janjeerka

Wuu gaari karaa xoogaa dawakhsan markay arkeen sida dhinacyada sawirka ay u soo saaraan saameyn aad u layaab badan oo labanlaaban.

Hoos u dhig saameynta cilladda

Saamaynta cilladda

Markaan tilmaamaha u wareejineyno sawirka, waxay soo saartaa saameyn cillad ah taasi waxay ku baaba'aysaa ilbiriqsiyo gudahood.

Sawirka sawirka

Sawirka sawirka

Waxaa jira saameyn ah barokaca isla daqiiqadaas oo aan dul dhignay tilmaamaha jiir korka sawirka.

Ku dul wareeji SVG

Hog svg

Saameyn weyn oo hover ah oo dhigeysa qaawiyey sawirka qarsoon magaca laftiisa. Dhammaystir weyn oo ku habboon soo bandhigida sawir gacmeedyo xiiso leh oo sawirro ah.

Laga soo bilaabo qoraalka illaa sawirka dul

Saamaynta SVG

Qoraalku wuxuu muujiyaa sawirka markii tilmaamaha jiirku la wareego animation indhaha soo jiita leh saameyn indho la'aan ka furmay dhexda.

Muujinta qayb ka mid ah sawirka asalka

Hover muujinta

Sidii inaan gacanta ugu hayno isweydaarsiga muraayadaha telephoto, qayb ka mid ah sawirka asalka ah ayaa la muujiyey markaan dhaqaajinno tilmaamaha jiirka.

Hover animation

Sawirka Sawirka Sawirka

Saamayn weyn, laakiin aad u fudud in ay ka kooban. Hadaad wax raadineyso fudeyd iyo mid yar, saameyntan ayaa kaa dhigi doonta inaad jacayl gasho.

Raad-reeb saamaynta

Raadinta sawirka

Kuwa kale saameyn fudud ujeeddo gaar ah.

Muuqaalka Sawirka

Zoom

Tani waa saamaynta zoom caadiga ah inaad hubaal rabto inaad uqaadatid websaydhkaaga hadda.

Saameynaya durdur

Hoos u dhaji

Beddelka kale sida u soo jiido saamayn markaan ka tagno tilmaamaha jiir baa dulsaaran sawirka

Saameynta galaaska

Saameynta galaaska

Sida magaceedaba ka muuqata, tilmaamaha jiirka ayaa rogi doona sawirka galaas weyneynaya oo weyneynaya.

Ma jiro JavaScript oo dul wareega

Maya JS

JavaScript malahan waxaad dib u abuuri kartaa saameyn zoom ah sawir leh shabakad isbeddel leh.

Saamaynta guud ee CSS

dulsaar

Un saafiga CSS ee lakabka taas oo ku dhegan sawirka aan hayno.

Ku xoq sawirada

Sawirro

Waxaad leedahay maktabad animation-ka CSS loogu talagalay walxaha isticmaalaha. Waxaad ku arki kartaa dhammaantood bogga xiriiriyaha si aad u hesho midka kugu habboon. Waxaad leedahay dhowr saameyn oo aad kala dooran karto tayo sare leh.

Dusha sare ee Sawirka

safka

Iyadoo animation tayo sare leh, isku shaandheyn il qabad leh ayaa lagu muujiyay. Mid kale oo noqon kara midka aad jeceshahay.

Saamaynta dusha sare ee sawirka

Wareeg wareeg ah

Waxaan ku laabaneynaa saameyn kale oo ah dulsaar HTML iyo CSS taas oo khadadka wareega ay yihiin halyeeyada.

Saamaynta dusha sare ee sawirka

dulsaar

Saameyn dusha sare leh oo loo adeegsan karo walxaha shabakadaha kala duwan. Iyada oo leh hal-abuur yar ayaa la dhexgelin karaa kaararka sida kuwa ku jira qodobkan.

Hover saamayn la animation icon

Hover icon

Tayo sare leh animation icon ah oo kugula jaanqaadi doona isbeddelada ugu horreeya. Wuu awoodaa keen qoraalka si aad u weyn.

Hover saamayn la subtitles

Subtítulos

Saameyn kale oo weyn oo weyn oo leh subtitles ka muuqda animation aad u siman laguna gaadhay.

3D saameynta jihada

Jihada 3D

Mid ka mid ah saamaynta muuqaalka ugu kicinta badan waxaad ku arki doontaa liiska oo dhan. Ku tilmaamaha jiirka ayaa noqon doona hagaha loo yaqaan '3D cube'.

Cabirka sawirka

Miisaanka sawirka

Saameyn kale oo fudud, laakiin aad u qurxoon oo aan lahayn barwaaqo badan.

Saamaynta hooska macruufka leh 'React'

hooska macruufka

Un saameyn la'aan faan la'aan badan, laakiin aad u la taaban karo saamaynta hooska ee ay soo saarto, maaddaama ay u muuqato sidii haddii laga soo qaaday "dhulka".

Shadow Style macruufka 10

hooska macruufka

Tilmaamaha jiirka ayaa leh Saamaynta 'riix' sawirka soo saara xaqiiqda weyn. Aad u xiiso badan.

Saamaynta kala-guurka sawirka

Mosaics

Un saameynta kala guurka ee cajiibka ah taas oo sawirka lagu jajabiyey shabakad shabag leh. Waad xakameyn kartaa waqtiga ay saameyntu dhacdo iyo in ka badan.

Kala guurka sawirka

Scroll

Un saameyn ku-meel-gaadh ah oo isbeddel leh boggaaga. Ha seegin ballanta CSS-kan.

Ku wareeji sawirka jiirka jiirka

Kala-guurka

Waxaad u baahan doontaa ku hirgeli daqiiqad aad isticmaasho shaashadda jiirka si aad uga bedesho hal sawir oo mid kale oo animation kala guur ah. Cajiib ah.


Nuxurka maqaalka wuxuu u hogaansamayaa mabaadi'deena anshaxa tifaftirka. Si aad u soo sheegto khalad guji Halkan.

6 faallooyin, ka tag taada

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.

  1.   Sandy Hernandez dijo

    Salaan Runtii waan ka helay saameynta aad soo dhigtay. Si jaanis ah ayaad u ogaan doontaa sida saameynta looga sameeyay meesha aad tilmaanta dul saarto sawir waxayna u dhaqaaqaysaa hoos ilaa kor, waxay ku habboon tahay muujinta horudhaca bogagga shabakadda. Halkan waxaa ku yaal tusaale waxa aan uga jeedo, qaybta «SHAQAALAHA SHAQAALO EE UGU DANBEEYA
    »Laga soo bilaabo websaytka selectawebs.com
    Waad ku mahadsantahay hormarinta

  2.   Omar dijo

    Bog aad u fiican iyo boostadaba, aad ayey ii anfacday aniga tan iyo markii aan u baahday xoogaa saameyn ah oo ku saabsan marinka marinka marinnada ee codsiyada gudaha. Aad baad ugu mahadsantahay tabarucaadan.

  3.   rogger gabriel dijo

    Saamayn fiican. Aniga ayaa is-baray, marwalba waan jeclaa fikradda horumarinta webka wax badan, waxaan aad u jeclaan lahaa taladaada ku saabsan sida loo bilaabayo iyo habka loo marayo barashada. salaan

  4.   cidhiidhi ah dijo

    Waad salaaman tihiin, waad ku mahadsan tihiin waxyaabaha aad ka kooban tihiin. Baro boggaaga maanta. Waa yaabe. Ma dhammaado akhriska iyo weydiimaha lagu dhex samayn karo. ;)

    1.    Manuel Ramirez dijo

      Hallow Natalia! Waan ku faraxsanahay inaad ku raaxeysatid akhriska halkan Hal-abuurka 'Creativos Online'. Salaan!

  5.   Mendoza dijo

    Haye liistada cajiibka ah ee saameynta wanaagsan, waxay noqon laheyd wax aad u qabow in la arko sida loogu adeegsado ereyada ereyga