Jinsi ya kutumia Matumizi Mema ya CSS3 Mifano: Mafunzo, Mfano wa Kanuni, na Mifano

Kifungu kilichoandikwa na:
  • Website Design
  • Imeongezwa: Agosti 28, 2013

Tunapotumia JS na jQuery tuna udhibiti kamili juu ya michoro na tunaweza kuunda madhara fulani, lakini bei ni ya juu kabisa. Muda wa usindikaji, utangamano wa kivinjari-kivinjari (vifaa vya mkononi, kwa mfano, ni tofauti sana linapokuja JS) na utata wa kanuni yenyewe ni pointi ambazo tunapaswa kukumbuka wakati tunapokuwa tukiunda interfaces animated.

Kwa hiyo, leo tutaona jinsi ya kuepuka JS kwa kutumia CSS Mifano na Vipindi. Tutazungumzia kutoka hatua za kimsingi kwa madhara fulani ya kushangaza, kama paneli za accordion na menyu ndogo ya animated.

Kunyakua kiti, wewe notepad na browser halisi (chochote ila IE) na hebu tuanze.

Kuwaka moto

Tuna faida kadhaa (na hasara kama kila kitu katika maisha yetu) kwa kutumia michoro za CSS. Ikiwa unahitaji kuuza hizo kwa bosi wako au mteja, hii ndiyo unayopaswa kukumbuka:

  • Wao ni uwezekano wa haraka, kwani wanaweza kutumia kasi ya vifaa (kama utekelezaji wa HTML5)
  • Wao watafanya vizuri katika vifaa vya simu na hawataki msimbo maalum wa kufuatilia matukio ya kugusa
  • JS inahitaji kutafsiriwa na kivinjari na uwezekano wa kuvunja kivinjari ni kubwa zaidi. Hivyo wakati CSS inashindwa, inashindwa kwa utulivu wakati JS inaweza kuvunja ukurasa mzima
  • Wana msaada mzuri wa kivinjari (tovuti hii itakusaidia kuangalia stats maalum juu ya hilo: http://caniuse.com/#search )

Mifano ya CSS3 Mifano kwa michoro

Kabla ya kuanza juu ya nyama ya chapisho hili, acheni tuangalie michoro kadhaa nzuri zilizotengenezwa katika CSS safi.

Pure CSS Twitter Inashindwa Whale

Whale Waliopoteza Waliopigwa

Iliyoundwa na Steven Dennis, tazama hili kwa hatua.

Kosa ya CSS safi ya Cke Inaweza
Mifano ya Uhuishaji wa CSS 3: Kupiga Coke Inaweza

Iliyoundwa na Cortes wa Kirumi, tazama hili kwa hatua.

Mtakatifu CSS Anatembea

Mifano ya michoro ya CSS 3: Mtu anayetembea

Iliyoundwa na Andrew Hoyer, tazama hili kwa hatua.

Kupata Mikono Yako Machafu

Hebu kuanza kanuni. Tutatumia mengi ya madarasa ya pseudo ya CSS ili kuchochea uhuishaji. Kuwa waaminifu, watengenezaji wengi wanakupendekeza kutumia JS kuamsha na kufuta michoro, lakini hapa tutaona njia rahisi:

#test {background: nyekundu; } #test: hover {background: kijani; } #test: kazi {background: bluu; } #test: lengo {background: nyeusi; }

Tuna vidokezo vingine vidogo vidogo vya kutumia, lakini una wazo! Kwa hiyo hapa ni nini kinachotokea ikiwa unabonyeza kipengele cha #test (kudhani ni kiungo):

  • Hali ya kawaida: Background itakuwa nyekundu
  • Hover: Wakati panya inaingia eneo la kipengele itakuwa na background ya kijani
  • Inachukua kazi: Unapobofya mshale juu yake na wakati kifungo cha panya bado kinakabiliwa rangi ya nyuma itakuwa bluu
  • Malengo: Wakati ukurasa wa sasa una # chini katika URL hii kipengele kitakuwa nyeusi

Kila moja ya haya inaweza kutumika kwa uhuishaji wa CSS, kwa mfano unaweza kuunda viungo vya 2 ili kuamsha na kuzima uhuishaji wa CSS utumie kipengele cha pseudo cha lengo na msimbo huu:

<a href='#test'> kuamsha </a> <a href='#'> kuacha </a>

CSS Transitions

Mpito wa CSS utabadilika kutoka hali ya mwisho hadi mwisho mwisho. Kwa hivyo utafafanua katika chaguo kuu kutumia "mabadiliko" ya mali wakati na kila mali ambayo itaathirika na jinsi uhuishaji unapaswa kuwa. Hebu tuone mfano:

.test {/ * mpito-mali muda muda-kazi, * / rangi: bluu; mpito: Michezo ya 2, ukubwa wa font 2s kuzima-out; } .test: hover {rangi: nyekundu; } .test: kazi {ukubwa wa font: 200%; }

Unapotembea kipengele cha kipengee kitachukua hatua kwa hatua rangi kutoka bluu hadi nyekundu (ni palette nzuri, huh?). Unapobofya kipengele, ukubwa wa font utaongeza kwa kasi kwa 200% ya ukubwa wa font ya default.

Tuna pia mali "ya mpito", kuweka kama urahisi-nje, jinsi "wakati" inapatikana kwa uhuishaji itatumika. Hapa ni maadili iwezekanayo:

  • Linear: kasi sawa kutoka mwanzo hadi mwisho
  • Kuwezesha: Kuanza polepole
  • Furahisha: Mwisho wa mwisho
  • Kuwezesha: Kuanza polepole, kwa kasi katikati, kisha mwisho wa polepole
  • Kuwezesha-nje-nje: kuanza polepole, mwisho wa polepole
  • Cubic-bezier (a, b, c, d): kasi ya kawaida

Kazi ya Bezier ya kichwa itaunda uhuishaji wa desturi na namba za 4 ambazo hutofautiana kutoka 0 hadi 1, inayowakilisha pembe ya hisabati ya muda wa uhuishaji wa X.

Kwa utangamano bora wa kivinjari unapaswa kufikiria kutumia prefixes ya muuzaji kwa opera, Firefox, na webkit kama hii:

div {upana: 400px; -o-mpito: upana 2; -moz-mpito: upana 2; mpito -webkit-upana: upana wa 2; mpito: upana wa 2; }

Pia, unaweza kutumia maswali ya vyombo vya habari ili kufafanua mabadiliko tofauti kulingana na upana wa kivinjari (vifaa vya simu, vidonge). Huu ni mfano rahisi:

mwili {font-size: 1em; } @media skrini na (max-width: 800px) {mwili {ukubwa wa font: 0.8em; }} @media screen na (max-width: 400px) {mwili {Ukubwa wa herufi: 0.7em; }}

Hapa ukubwa wa font utabadilika ghafla unapoongeza upana wa kivinjari. Nambari hii itazuia kwamba kutokea, na kutoa mabadiliko makubwa zaidi:

mwili {-o-mpito: ukubwa wa font.5s linear; -moz-mpito: ukubwa wa font .5s linear; mpito -webkit-upeo: ukubwa wa font.5s linear; mpito: ukubwa wa font .5s linear; }

Unaweza kutumia hii pia ikiwa una maonyesho tofauti au ukubwa wa picha / mazingira, ikiwa unataka kubadili upana, rangi, paddings, kuonyesha menu.

Uhuishaji wa CSS - Furaha ya kweli huanza

Uhuishaji ni mlolongo wa mabadiliko yaliyofafanuliwa katika chagua moja. Ili kufafanua michoro za CSS utahitaji kufuata hatua za 2.

Utawala wa @keyframe hutumiwa kufafanua mlolongo wa hatua za uhuishaji, na hufafanuliwa na jina la kipekee na mitindo inayoelezea jinsi uhuishaji huu unavyofanya kazi. Kama kawaida tunahitaji baadhi ya prefixes ya muuzaji, kama ilivyo katika mfano huu:

/ * code sawa kwa kila muuzaji * / @ -o-keyframe yangu-uhuishaji {... @ -mof-keyframe yangu-uhuishaji {... @ -webkit-keyframe my-animation {... / * jina la uhuishaji * / @keykey jina langu-animation {/ * frame selector * / 0% {/ * frame style * / kushoto: 0px; Juu: 0px; } 25% {Kushoto: 200px; Juu: 0px; } 50% {Kushoto: 200px; Juu: 200px; } 75% {Kushoto: 0px; Juu: 200px; } 100% {Kushoto: 0px; Juu: 0px; }}

Kwa hiyo, kila mtindo unaelezewa na sura / muda wa muda (kama vile muafaka kutoka kwa uhuishaji wa flash) kama asilimia na mitindo ambayo inapaswa kutumiwa huko. Faili hii muhimu, kwa mfano inasema kwamba kipengele kitaenda upande wa kushoto, kisha juu, kisha kulia, basi chini.

Baada ya kufuata hatua ya 1 na kuunda ufunguo wako muhimu unaweza kuifanya kwa kipengele. Kisha tutaweza kutumia mantiki sawa sawa na tumefanya na mpito wa CSS, tofauti ni kwamba sasa "mabadiliko" yetu ni uhuishaji mkali sana.

Ili kuomba tutatumia mali ya uhuishaji na ina mali ndogo ya 7:

  • Jina: kitambulisho cha pekee
  • Muda: Utachukua muda gani kutoka 0% hadi 100%
  • Kazi ya muda: ni sawa sana na kazi ya mpito ya mpito
  • Kuchelewa: Itachukua muda gani ili kuanza% 0%
  • Uhesabuji wa hesabu: Ni mara ngapi marudio tutakavyokuwa nayo ("usio na mwisho" kwa kitanzi kisichoweza)
  • Mwelekeo: kawaida au mbadala (reverse)
  • Jaribu-hali: ikiwa uhuishaji unaendesha au umesimamishwa

Hii itatumika uhuishaji wetu kwenye kipengele cha # kilichopo lengo la ukurasa:

#test: lengo {/ * uhuishaji-jina | muda | kazi ya muda-kazi | kuchelewa | hesabu-hesabu | mwelekeo | kucheza-hali * / uhuishaji: yangu-uhuishaji 10s linear 0s usio wa kawaida mbio mbio; }

Kwa hili katika akili tunaweza kuunda mifano machache ya kushangaza.

CSS Tu Accordion

Tutaunda paneli zinazoweza kutumiwa kutumia michoro za CSS. Hapa ni muundo wa msingi wa HTML:

<div class = "accordion"> <a href="#tab1"> Tabia ya 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> Tabia 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Tabia 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Hii itafanya tu paneli na kiungo ambacho kitasababisha kila mmoja wao. Na hapa ndio ambapo uchawi hutokea:

/ * div yoyote ambayo ni ndani ya accordion * / .accordion div {/ * imefichwa kwa default * / urefu: 0; overflow: siri; / * uchawi nyeusi * / mpito: ukubwa wa 1; } / * wakati div iliyotajwa ni lengo * / .accordion div: lengo {/ * urefu: auto haifanyi kazi, lakini hii itafanya kazi nzuri * / urefu: 80px; }

Nzuri sana, huh? Na umetumia maisha yako yote kwa kutumia JS kwa hili? :)

Menyu ya CSS tu na Submenus

Na hii ni maombi mengine rahisi. Hakika una orodha ya urambazaji kwenye tovuti yako, na mara nyingi tunahitaji kutumia submenus fulani huko. Njia bora ya kuonyesha na kuficha vitu ni kutumia jQuery, sawa? Fikiria tena baada ya kupima msimbo huu:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Bidhaa 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> Item 2.1 </a> </ li> <li> <a href='#item22'> Item 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

Na wizara huanza hapa:

{/ * tu kufanya viungo tad bora * / kuonyesha: kuzuia; padding: 4px; } nav {text-align: kituo; } / * orodha yoyote (ikiwa ni pamoja na moja kuu) * / nav ul {kuonyesha: inline-block; orodha ya orodha: hakuna; } nav> ul> li {/ * vitu vya usawa (wima itafanya kazi nzuri pia) * / kuelea: kushoto; } nav li div {/ * kuanguka kwa orodha ndogo * / urefu: 0; overflow: siri; / * Houdini hisia * / mpito: urefu 1s; } lin li: hover> div {urefu: 56px; }

Akihitimisha Up

Hii ni hakika tu kupata mwongozo wa kuanza. Kuna madhara mengine mengi ambayo yanaweza kufanywa kwa kutumia michoro za CSS tu na vitu vingi hakika bado.

Kwa hivyo, umeitumia hili kabla? Je, unaweza kufikiri ya maombi mengine mazuri kwa michoro za CSS? Shiriki mawazo yako kwa kutumia maoni!

Kuhusu Rochester Oliveira

Mimi ni mtengenezaji wa mtandao na mjasiriamali kutoka Itajubá (MG), Brasil. Ninapenda kuandika kuhusu mada ya wazi na kufanya mambo mengine ya baridi.

Kuungana: