Awọn ọfa ti ere idaraya 23 ni CSS fun oju opo wẹẹbu rẹ

Awọn ọfa CSS

A tẹsiwaju pẹlu iyipo miiran ti awọn nkan ninu eyiti a fi sii asẹnti lori awọn eroja wọnyẹn ti a le gba ni ọfẹ lati awọn aaye ayelujara bi codepen.io. Awọn aaye ti iye nla lati mu koodu ni CSS, HTML tabi JavaScript, ati nitorinaa awọn abajade ni awọn abajade to dara julọ ni abala wiwo ti oju opo wẹẹbu kan; oju opo wẹẹbu ti a yoo fa si awọn ibi-afẹde miiran pẹlu imuse ti koodu ti a ṣeto daradara ati awọn imọran ẹda.

Awọn wọnyi ni Awọn ọfa CSS ti ere idaraya 23 iyẹn jẹ pipe fun awọn eroja wọnyẹn ti o tọka si wiwo ti olumulo ti o pinnu lati kọja ṣaaju ẹgbẹ ti iṣẹ akanṣe X kan, tabi si aye nibiti rira naa le ṣe ni eCommerce; awọn ọfa ti o ṣe pataki lati ni anfani lati ṣẹda awọn eefun ati nitorinaa ṣe aṣeyọri iyipada nla ti ọja yẹn ti a ta ni eCommerce wa.

Awọn ọfa CSS ti ere idaraya

Awọn ọfa ere idaraya Css

Arrows CSS ti ere idaraya pẹlu yiyi ẹgbẹ kan eyiti o jẹ apẹẹrẹ akọkọ ti awọn ọfà CSS ti ere idaraya ninu jara yii ti 23. Ipa ti o rọrun fun awọn ọfa pẹlu awọn abajade iwoye nla ati pe ko ni ju ohun ti a sọ lọ.

Ọfà ere idaraya

Ọfà ere idaraya

una ọfà ni svg iyẹn yoo ṣe aṣeyọri iwara ati didara iwara nigba ti a ni itọka asin lori rẹ. Ninu iṣipopada ipin kan a yoo ṣe afihan eroja wẹẹbu pataki yii fun ọpọlọpọ awọn oju opo wẹẹbu.

Iwara ọfa

Iwara ọfa

Iwara ni CSS ati HTML ti o ni a iyipada ti o rọrun ti ọfa kan diẹ igbalode si Ayebaye diẹ sii. Ko si ohunkan ju idanilaraya yii lọ fun ọfa pẹlu ipari ti o dara ati ohun rọrun.

Awọn ohun idanilaraya ọfa

Awọn idanilaraya ọfa CSS

A jara ti ere idaraya ọfà ni awọn ipo ati awọn agbeka oriṣiriṣi. Igbiyanju naa wa ni ita fun awọn ọfa ti o ni “rababa” ti o ṣe afihan aaye ti ọfa gba lori oju opo wẹẹbu naa.

Ọna asopọ ọna asopọ

Rababa Circle

A rababa Circle nigba ti a ba fi itọka eku silẹ lori aami yii. Iwara ti iṣakoso ti o rọrun daradara ti o rọrun, ṣugbọn pẹlu ipa nla bii iyoku ti a n pin lati ipo yii ni Creativos Online.

Iwara itọka meteta

Meteta svg

Da lori aworan SVG, nibi o ni lẹsẹsẹ ti awọn oju opo wẹẹbu ti a ṣe igbẹhin si iru ọna kika aworan, a iwara meteta ti o nyorisi si gbogbo awọn mẹta awọn ọfa ibẹrẹ ni ọkan kan. Ipa nla miiran fun oju opo wẹẹbu rẹ ti o fun ni ifọwọkan ọjọgbọn.

Ọfa CSS ti o rọrun pada si oke

CSS mimọ ti o rọrun

Eyi ọkan ọfà ti o rọrun ni CSS ni iṣẹ-ṣiṣe ti pada si ibẹrẹ oju opo wẹẹbu. Tan-an gimmicky pẹlu ibẹrẹ ati iyara ipari ti o ṣe afinju ati iwara ti o rọrun ni oju akọkọ, botilẹjẹpe o nigbagbogbo fun ifọwọkan ọjọgbọn bi ti iṣaaju.

Ọrun rirọ

Rirọ

Eyi ọkan itọ rirọ jẹ ohun akiyesi fun otitọ pe nigbati o tẹ tabi ti o tẹ, ipa agbesoke yoo ṣẹda ni aaye ti aami wa. A ni lati mọ pe ọfà ti o da lori JavaScript ni pataki.

Ọfà SVG pẹlu iwara

Iwara ọfa

Ọfa SVG ti n duro de ọ fi ijuboluwole sile Fun ipa ipapopo lati han ati iyipada awọ si pupa, o kere ju eyiti a fun ni apẹẹrẹ, lẹhinna o yoo jẹ ọrọ ti sisọ rẹ si fẹran wa ati predilection.

CSS Chevron ọfà

CSS Chevron

Ọfà CSS ti o rọrun kan nipa gbigbe ara rẹ pẹlu iyipada ninu awọ. A ti awọn ọwọn ipilẹ julọ, ṣugbọn aini ti didara ati pe ifọwọkan ti o nireti bi ọpọlọpọ awọn miiran.

Ọfa svg

Ọfa svg

Ipa iyipada kan ninu iwuwo tabi «sonipa» ti aami, ninu ọran yii ọfa bi protagonist ti titẹsi yii. O kan mu iwuwo ti ọfa pẹlu ipilẹ ipilẹ CSS lẹwa.

Arrow

Arrow

Un itọka ṣàdánwò ninu eyiti a rii oriṣiriṣi oriṣiriṣi wọn pẹlu peculiarity ti a ṣẹda pẹlu div ati awọn eroja afarape.

Awọn ọfa CSS mimọ

Awọn ọfa CSS mimọ

Miiran iru ọfà ti o bùkún atokọ naa, botilẹjẹpe nibi a le duro yato si ti a ṣẹda ni CSS ati HTML.

Ọfa CSS ti a tẹ

Ọfa te

Ti o ba fẹ lati fun a te ipa bi ti o ba ti kale ni ọwọ, ọfà yii ni CSS jẹ apẹrẹ fun idi yẹn.

Ọfà

Ọfà irekọja

Ọfà kan pẹlu awọn iyipada CSS ti o ṣaṣeyọri naa ipa ibajẹ ti ọfa ni ọpọlọpọ awọn aworan ti o fa nọmba ni ibeere.

Ọfa mẹta ni ọkan

Mẹta ni ọkan

A ẹlẹgẹ iwara si ṣakoso lati yi awọn ọfa mẹta si ọkan. Omiiran ninu awọn ipa wọnyẹn ti a le wa ati pe a ni koodu rẹ ki a le lo bi a ṣe fẹ ninu iṣẹ wa tabi oju opo wẹẹbu wa.

Idaraya lilọ kiri CSS mimọ

CSS mimọ

An iwara ni ailopin mode ti awọn ọfà lẹsẹsẹ ti o fun laaye ekeji lati kọja lati gba ipele aarin nigbati wọn tobi julọ. Pẹlu ipari nla, o di itọka ti o pe lati ṣe iwuri fun atẹle itọsọna lori oju opo wẹẹbu kan.

Idaraya itọka SCSS

SCSS

Miiran iwara ilopin ailopin lẹwa ati eyiti o jẹ ẹya nipa didaku lati ṣe ọna fun ọfa miiran ati nitorinaa iyọrisi “lupu” pataki pupọ.

Iwara iwara Gooey

Goey

Ninu gbogbo awọn idanilaraya ti a rii ninu atokọ itọka yii, o jẹ laisi iyemeji iyanilenu julọ ati ẹda julọ. Iwara ti o fẹrẹ lọ nipasẹ aaye ti eyiti o nlọ ni inaro. A ṣeduro ni gíga lati fi iyalẹnu olumulo silẹ ti o wa si oju opo wẹẹbu rẹ.

Iwara si ọna opin

Ọfà si isalẹ

Iwara yii, bii awọn iṣaaju, ni si olumulo ni opin oju opo wẹẹbu ki o kọja si ẹlẹsẹ. O jẹ ẹya nipasẹ iwara ẹda ti o jẹ ki o wa ni ita lati iyoku. Dara julọ pe o rii ni iṣe lati ọna asopọ si codepen.io.

Ọfa o rọrun aami

Aami ti o rọrun

Aami kan ti bi itọkasi jẹ irorun ati pe O ni iwara ti o rọrun. Eyi ko tumọ si pe a nkọju si koodu didara bi eyiti Joshua MacDonald pin.

Bouncing Ọfa Animation

Ọfà ere idaraya

Ọfa miiran pẹlu kan agbesoke iwara ni HTML ati CSS iyẹn gbiyanju lati yatọ si awọn miiran. Dajudaju o gba lati demo ki o ṣe igbasilẹ ọna asopọ naa.

Iwara ọfa

Iwara ọfa

Iwara miiran fun ọfa ni CSS ati HTML pe o dara daradara “gbe”. O jẹ dukia nla julọ ni iyatọ rẹ lati iyoku ti jara yii ti awọn ọfa CSS 23 fun oju opo wẹẹbu rẹ.


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Ọrọìwòye kan, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   Carolina wi

    Pẹlẹ o! O ṣeun pupọ fun alaye naa. Mo ni ibeere kan nipa ọfa te… ọna kan wa lati yi iyipo ti ọna naa pada bi? o le fi koodu kan han mi? Emi yoo riri rẹ!