27 CSS ati awọn ifaworanhan HTML lati ṣe afiwe awọn aworan, awọn kaadi ati pupọ diẹ sii

A tẹsiwaju pẹlu yika ti CSS ati koodu HTML ti o le ṣe imuse lori oju opo wẹẹbu wa lati fun ni ifọwọkan pataki pẹlu eyiti o le ṣe iyatọ rẹ lati iyoku. Ṣeun si iṣakoso + c pẹlu iṣakoso + v ti a le ni koodu ọwọ wa ti yoo ṣe oju opo wẹẹbu silẹ lati ṣe atẹjade ni idagbasoke lẹhin lilo awọn ọjọ tabi awọn ọsẹ ni idanwo.

Bayi ni akoko fun awọn sliders 27 ni HTML ati CSS ti yoo gba wa laaye lati mura aaye yẹn ninu eyiti a maa n ṣepọ ọpọlọpọ akoonu ni awọn piksẹli diẹ ni onigun mẹrin. Awọn ifaworanhan wọnyi wa lati kaadi, ifiwera, iboju kikun, idahun ati pe o rọrun julọ, ṣugbọn ni akoko kanna tun yangan pupọ. A n lọ pẹlu awọn ifaworanhan 27 ti kii yoo fi ẹnikẹni silẹ aibikita, paapaa alabara tabi olumulo ti o kọja nipasẹ oju opo wẹẹbu rẹ lati ka akoonu, ra ọja kan tabi lo ẹyọ afiwe kan lati ṣe afiwe aworan ṣaaju ati lẹhin.

Awọn iboju lori awọn kaadi

Iyọkuro ogbon inu pupọ ni HTML ati CSS ti o ṣowo pẹlu ya lẹsẹsẹ ti awọn kaadi si oju opo wẹẹbu rẹ ti o kọja lati ọkan si ekeji pẹlu iwara pẹlu aṣa nla. O jẹ deede iwara ati gradient isale ti o fun ifọwọkan arekereke yii si HTML ati koodu CSS ti o tun duro fun diẹ ninu JavaScript. Yangan ni ọrọ lati ṣe afihan esun didara yii.

Alaye kaadi esun

Yiyọ kaadi alaye yii tun jẹ koodu ni HTML, CSS ati JavaScript. O ti wa ni dipo nipa kan lẹsẹsẹ ti awọn kaadi iyẹn ko ni ifamọra pupọ fun iwara, botilẹjẹpe irọrun rẹ jẹ iye ti o tobi julọ. Yiyọ miiran lati ronu lati inu atokọ yii.

Ifiwera aworan ti o jọra

Yiyọ yii jẹ Ti iwulo nla Ati pe o daju pe o ti rii lori ọpọlọpọ awọn oju opo wẹẹbu nibiti ṣaaju ati lẹhin awọn fọto ti ṣe afiwe pẹlu ọpa ti o fẹsẹmulẹ ti o ni kikọja ni ita. O jẹ iranlọwọ nla fun awọn afiwe, nitorinaa a ṣe ọkan ninu awọn pataki lori atokọ awọn esun yi.

Ifiwera afiwera laisi JavaScript

Didara nla ti esun yii ni pe wa laisi JavaScript, nitorinaa iwọ yoo ni lati ṣe imuse CSS ati koodu HTML lori oju opo wẹẹbu rẹ lati ni afiwe miiran. Iwọ yoo ni lati lo apoti dudu ni isalẹ ti aworan lati rọra yọ lati ẹgbẹ kan si ekeji lati wo afiwe aworan. Kii ṣe oju inu bi iṣaaju, ṣugbọn wulo pupọ laisi JavaScript.

Mẹta-fẹlẹfẹlẹ afiwe aworan esun

Orukọ rẹ sọ gbogbo rẹ, yiyọ aworan ti o gba ọ laaye lati ṣe afiwe to mẹta ni akoko kan. Apẹẹrẹ ti a fun ni ọkan lati wo ori ni profaili, omiiran lati fihan awọn isan ati yiyọ miiran lati wo awọn egungun. O nlo HTML, CSS ati JavaScript fun iṣẹ rẹ.

Fanila JS Aworan esun

Aworan afiwera miiran pẹlu bọtini nla kan pẹlu eyi ti lati rọra yọ aworan lati ẹgbẹ kan si ekeji. Minimalist, pẹlu JavaScript kekere ati ipari iwoye nla kan. Ọkan ninu ikọlu julọ lati ṣe afiwe awọn aworan.

Pipin iboju diagonally

Este afiwe esun aworan O ti ṣẹda nipasẹ Envato Tuts ati pe o ni iyatọ pe ifaworanhan wa ni ipo atọka lati fa awọn oriṣi awọn imọlara miiran nigbati o ba ṣe afiwe awọn aworan meji. O nlo JavaScript, CSS ati HTML lati jẹ isokuso afiwera didara ga.

Full esun iboju

A de si apakan awọn ifaworanhan iboju kikun lati pade pẹlu Iyika Slider ti o ni ifihan nipasẹ iyipada kan ti gbe jade nipasẹ iwara ti ipa nla. Ti o ba gbero lati fi awọn aworan han ni iboju kikun ati pe o nkọja lọpọlọpọ, koodu ni JavaScript, CSS ati HTML.

Petele isun pẹlu parallax

Fun awọn awọn onijakidijagan ti ipa parallax yiyọyọ yii pẹlu Swiper.js, HTML ati CSS. Yato si ni anfani lati rọra yọ pẹlu awọn bọtini meji ti o wa ni ẹgbẹ kọọkan, ni apa ọtun a ni kekere gbogbo awọn aworan ti carousel pipe. Iyatọ iworan ti o yatọ ati didara ti kii yoo fi ẹnikẹni silẹ ti o bẹsi oju opo wẹẹbu wa aibikita.

Dan isokuso 3D irisi

A ifaworanhan idahun pe tẹle awọn agbeka ijuboluwole eku. O lagbara lati fa ipa nla ti irisi ti o le ja si awọn iṣaro adalu ninu alejo. Ti o ba mọ bi o ṣe le lo daradara, o le fun atilẹba ati ifọwọkan ifọwọkan si oju opo wẹẹbu wa. JavaScript, CSS ati koodu HTML ko padanu.

Akoni ni kikun esun iboju

Ayẹyẹ aworan akọni iboju kikun ni HTML, CSS ati JavaScript. Ni kan agbesoke ipa ni gbogbo iwara iyẹn ni o fun ni iyẹn ati ni gbogbogbo a nkọju si ifaworanhan iboju ni kikun didara bi iyoku atokọ naa.

VELO.JS esun pẹlu awọn aala

Ọkan ninu awọn ifojusi bi ifaworanhan iboju kikun pẹlu iwara iṣipopada iyipada. A ṣeduro pe ki o lọ wo i ni iṣiṣẹ lati bẹrẹ ero nipa bii o ṣe le ṣe ni oju opo wẹẹbu. Lo Awọn ipa iyara Lati mu iwara yẹn pọ si ti o nlo awọn bọtini itọka, tẹ ni lilọ kiri ati paapaa yiyi lọ, Ni pipe.

Idahun CSS inaro idahun pẹlu awọn aworan kekeke

A n lọ si awọn ifaworanhan Idahun CSS fun alagbeka didara nla bi eleyi. Iwọ yoo ni awọn eekanna atanpako lẹsẹsẹ ni apa ọtun pe nigba ti a tẹ yoo bẹrẹ iwara ni isubu inaro. Ipa nla ti o lo CSS nikan lati fi ifaworanhan ti o dara julọ ti atokọ yii silẹ.

Apoti fifaworan aworan

Miiran Idahun aworan idahun ti a ṣe pẹlu JavaScript ati pe o rọrun diẹ sii lati jẹ ohun yangan. Kukuru, rọrun ati minimalist pẹlu ohunkohun diẹ sii ju eyi lọ. O ni aye rẹ ninu atokọ yii ti awọn sliders Flexbox.

Iṣipopada Išipopada pẹlu awọn asẹ SVG

An ṣàdánwò ti o ṣedasilẹ ipa ti išipopada blur ni gbogbo igba ti ifaworanhan kan ti wa ni mu ṣiṣẹ. O nlo idanimọ SVG Gaussian blur ati diẹ ninu awọn bọtini idanilaraya CSS. Koodu ti a lo ninu JavaScript jẹ odasaka fun apẹẹrẹ ti a fun ati iṣẹ-ṣiṣe ti esun.

Yiyọ ere idaraya

Ohun idanilaraya ti ere idaraya idahun pẹlu JavaScript, HTML ati CSS. A ni awọn ọfà ni apa ọtun ti o gba wa laaye lati lọ nipasẹ awọn aworan ti o jẹyọ pẹlu iwara ti o nifẹ ati ṣoki. Ipa nla ni aṣeyọri ni ọkọọkan awọn ifaworanhan lati jẹ ki ara rẹ wa ni ita. Gan lọwọlọwọ ninu awọn ohun idanilaraya.

Yiyọ aworan pẹlu awọn ilana SVG

Omiiran ti awọn adanwo wọnyẹn ti o gbiyanju lati gbe awọn ilana svg lati ṣẹda diẹ ninu awọn aworan iboju fun fifa CSS kan. O ṣe agbejade ipa blur ikọlu pupọ pẹlu ipari nla kan. Omiiran ninu awọn ifaworanhan naa lati binu awọn ikunsinu ti o dara ninu alejo ti oju opo wẹẹbu wa.

Sisọ fẹẹrẹ fẹẹrẹ

A esun pẹlu ọkan diẹ sii ju iyatọ iwara iyẹn nfunni ni ipa igbi ni gbogbo igba ti a tẹ lori aami lati rọra yọ aworan tuntun kan. Ṣe ni HTML, CSS ati JavaScript o di esun aworan miiran.

Ẹyọ CSS mimọ

Omiiran ti awọn esun ti o rọrun julọ ti o jẹ CSS mimọ. Ọkan ninu awọn anfani rẹ lati fi sinu isalẹ osi lẹsẹsẹ ti awọn aami iyẹn yoo ṣiṣẹ bi awọn bọtini lati de ọdọ ọkọọkan awọn aworan ti yoo kọja niwaju wa laisi iwara pataki eyikeyi.

Awọn akara oyinbo kekere nikan CSS esun

El esun ti o dun ju ninu atokọ naa ati pe o wa ni CSS ati HTML nikan. O jẹ ọkan ninu pataki julọ ti gbogbo atokọ lati ni ni apa ọtun awọn iyatọ oriṣiriṣi ti awọn kukisi. Tẹ ọkan ati akara oyinbo kekere kan han pẹlu idanilaraya iyanu ti o pari ni ipa agbesoke nla. Ọkan ninu awọn ti o dara julọ laisi iyemeji.

Ipa idanilaraya Ẹyọ

Ọkan ninu awọn esun ti o dara julọ julọ ninu iwara ati kini ṣakoso lati ṣe iyanu fun wa ni iyipada akọkọ. Lati akoko akọkọ ti iwara dide, HTML rẹ, CSS ati koodu JavaScript fi wa silẹ ni iyalẹnu. Omiiran ti o dara julọ ni ifọwọkan minimalist ti o fun.

Bibẹ pẹlẹbẹ

Un yiyọ iyipada ti o nlo kilasi afikun kilasi ati pe eyi jẹ ẹya nipasẹ awọn idanilaraya didan pupọ lati di ọkan ninu awọn ayanfẹ lori atokọ yii. Ti o ba fẹ ṣe iyatọ ara rẹ ninu ẹya alagbeka ti oju opo wẹẹbu, o jẹ ọkan ninu awọn pataki. Iṣowo nla ni wiwo.

Slider Parallax New York

Ọkan ninu awọn anfani nla julọ ti eyi parallax esun ni CSS ni pe o le ṣe adani pupọ. Eyi tumọ si pe o le yi fonti pada, iwọn rẹ, awọ rẹ ati iyara iwara. Lẹta akọkọ ti ilu kọọkan ninu okun orun JavaScript tuntun kan han lori ifaworanhan tuntun kan. Omiiran ti awọn sliders ti o niyele ti ifiweranṣẹ yii.