Neapšaubāmi viens no spilgtākajiem tendences 2012 notiek attīstība CCS3, HTML5. Šodien mēs piedāvājam lielu un ļoti noderīgu piemēru pārskatu " 20+: radošas un noderīgas nodarbības par CSS3″ piedāvāts SpeckyBoy. Visi piemēri ir veidoti uz tīrs bez JavaScript, prezentētajās nodarbībās ir demonstrācijas un gatavi faili CSS3 lejupielādei.

Mēs esam pārliecināti, ka šīs metodes noderēs tīmekļa izstrādātājiem!

css3 nodarbības :

1. CSS3 foto galerijas, slīdņi, efekti ar attēliem

1.1. Slīdnis uz CSS3

Es nespēju tam noticēt, bet šis slīdnis ar dažādiem efektiem ir izgatavots tikai CSS3, ļoti iespaidīgs.

1.2. Fons pilnekrāna vietnei ar slīdņa efektu, izmantojot CSS3

Tīmekļa dizaineri jau ilgu laiku ir eksperimentējuši ar dažādiem vietnes foniem, taču līdz šim ar tīru CSS varēja izdarīt ļoti maz, bija jāizmanto JS. Tagad CSS3 sniedz jums iespēju ar jūsu vietnes fonu rīkoties pēc vēlēšanās – jums var būt viens fons ar lielu, augstas kvalitātes fotogrāfiju, jūs varat mainīt vairākus fonus ar dažādiem efektiem, un fons ir mērogojams atkarībā no ekrāna. parametrus. Kopumā lieliska iespēja radošām vietnēm.

1.3. Lightbox uz CSS3

Izmantojot šo pamācību, varat uzzināt, kā izveidot Lightbox ar dažādiem efektiem, izmantojot tīru CSS.

1.4. Attēla rekvizīti CSS3

Šajā apmācībā ir parādītas jaunas CSS3 funkcijas attēla īpašībām, piemēram, noapaļotiem stūriem, ēnām un citiem efektiem.

1.5. Animēts baneris, izmantojot CSS3

1.6. Ielādē paneli CSS3

1.7. 3D lente ar CSS3

Skatiet demonstrāciju vai lejupielādējiet CSS3 koda failus →

2. CSS3 izvēlnes, navigācija un pogas

2.1. Apple.com izvēlne CSS3

Pamācība slavenās Apple.com izvēlnes izveidei CSS3.

2.2. Animēta horizontāla izvēlne CSS3

Vienkārša apmācība, kas parāda, kā izveidot animētu izvēlni CSS3 ar dažādiem efektiem.

2.3. Animēta vertikāla izvēlne ar CSS3

2.4. Animētas pogas ar CSS3

Lieliska apmācība ar 7 animētu radošo pogu piemēriem.

2.5. Radoša animēta izvēlne ar attēliem, izmantojot CSS3

Šajā nodarbībā sniegtie 10 piemēri vienkārši atver acis. Šādas sarežģītas radošas izvēlnes tika veidotas tikai, izmantojot JS. Iespaidīgi!

2.6. Apļa navigācijas efekts ar CSS3

Neparasts efekts, virzot kursoru virs izvēlēta navigācijas vienuma apļa formā ar attēlu. Ņem vērā!

2.7. CSS3 nolaižamā izvēlne

Pamācība vienkāršas nolaižamās izvēlnes ieviešanai ar apakšlīmeņiem CSS3.

2.8. CSS3 navigācija ar animētām pārejām

3. Dažādi efekti uz CSS3

3.1. Animēts rīka padoms CSS3 bez jQuery

Pateicoties tīmekļa tehnoloģiju attīstībai un modernām pārlūkprogrammām, mēs varam izveidot daudzus efektus, neizmantojot Javascript. Tas ir ievērojami atvieglojis tīmekļa izstrādātāju dzīvi. Jo tagad mēs varam izveidot efektus, izmantojot tīru CSS, neizmantojot Javascript. Tāpēc šajā rakstā es vēlos jums pastāstīt par to, vai ir iespējams izveidot banerus, izmantojot tīru CSS, kas tam ir nepieciešams, kā arī šīs pieejas plusi un mīnusi.

CSS3 sniedz plašas iespējas, tikai tās pareizi jāizmanto. Piemēram, es vēlētos sniegt saites uz saviem iepriekšējiem darbiem “Tīrā CSS rakstzīmes”:

Pirmkārt, es vēlos sniegt piemērus saviem CSS reklāmkarogiem. Iespējams, jūs jau esat tos redzējis vietnē, bet pat nezinājāt, kas un kā tie tika izveidoti.

Par demonstrāciju: Katram piemēram (banerim) apakšā ir norādīts ilgums sekundēs, kā arī poga “Atsvaidzināt”, kas sāk rādīt reklāmkarogu no sākuma.

Reklāmkarogs #1 — "Individuālās apmācības vietņu veidošanā":

Es veidoju šo reklāmkarogu apmēram 2 dienas. Kāpēc tik ilgi? Tā kā pārrēķinot koordinātas, bija vajadzīgs zināms laiks, lai pielāgotu baneri (lai tas būtu gumijas). Pašlaik tā lielums ir atkarīgs no vecākbloka platuma (kurā ir pats CSS reklāmkarogs).

Šo baneri izveidoju burtiski 2-2,5 stundu laikā. Vienīgais, kas te bremzēja radīšanas procesu, bija ikonu izvēle. Jo tie bija jāizvēlas tuvu reklāmkaroga tēmai.

Šis reklāmkarogs arī stiepjas atkarībā no bloka konteinera platuma, kurā tas atrodas. Izveidošana aizņēma aptuveni 1,5 stundas.

Šie baneri izskatās ļoti jauki, bet vai tas tiešām ir tik vienkārši? Apskatīsim šīs baneru veidošanas metodes priekšrocības un trūkumus.

CSS baneru priekšrocības un trūkumi:

Kā izveidot CSS reklāmkarogu?

1 Ideja

Pirmkārt, jums precīzi jāzina, kādai animācijai jābūt reklāmkarogā (kas, kur un no kurienes tam vajadzētu pārvietoties un kur tam vajadzētu parādīties). Var paņemt A4 lapu un uzzīmēt, kur katrs elements pārvietosies un kam jābūt uz banera.

Galu galā jūs nevarat sākt veidot reklāmkarogu, ja nezināt, kādam tam vajadzētu būt un kā tas darbojas.

2 HTML struktūra

Nākamais solis ir izveidot HTML marķējumu, lai elementus varētu pārvietot (un izveidot tiem animāciju). Tas ir, jūs nevarat darīt visu ar vienu attēlu, kas izkustēsies no labās vai kreisās puses, un tad animācija ir pabeigta.

Parasti ir viens kopīgs bloks, kurā atrodas visi pārējie. Un šajā vispārējā blokā mēs varam pārvaldīt elementus pēc vajadzības.

3 CSS animācija

Pēdējais solis ir izveidot blokiem animācijas, kā arī rakstīt tiem stilus, jo dažas animācijas daļas pēc noklusējuma ir paslēptas.

Lai izveidotu savu reklāmkarogu, jums ir labi jāpārzina CSS un HTML pamati.

Apgūstiet pamata CSS animāciju, izmantojot šo pamācību - .

Secinājums

Visas mūsdienu pārlūkprogrammas atbalsta CSS3 rekvizītus, kas nozīmē, ka šādās pārlūkprogrammās baneri tiks parādīti pareizi. Bet ar JS spraudņu palīdzību var izveidot CSS banerus vecākām pārlūkprogrammām. Apgūstot CSS animācijas pamatus, jūs sapratīsit reklāmkarogu izveides procesu un drīzumā izveidosit savu pirmo tīro CSS reklāmkarogu! 😉

Izgatavosim reklāmas baneri, izmantojot CSS3. Pašlaik pilnībā tiek atbalstītas tikai CSS3 animācijas Firefox pārlūkprogrammas un WebKit. Taču tas ir pietiekami vienkārši, lai reklāmkarogs darbotos citās pārlūkprogrammās. Tomēr, eksperimentējot ar jaunākajām CSS metodēm, negaidiet, ka visur būs lieliska veiktspēja (īpaši IE 7 un vecākām versijām).

Piezīme: Lai ietaupītu vietu lapā, visi pārlūkprogrammas ražotāja prefiksi ir izlaisti. Skatiet kodu avotos.

HTML marķējums

Vispirms apskatīsim reklāmkaroga struktūru HTML. Šajā posmā mums ir jāiedomājas, kā animācija darbosies:

Lai dziļāk izprastu marķējuma struktūru, pievērsīsimies laivai:

Ar laivu notiek trīs animācijas:

Laiva slīd pa kreisi. Attiecas uz nesakārtotu sarakstu (grupu).

Uz ūdens šūpojošas laivas imitācija. Attiecas uz saraksta vienumu (laivu).

Jautājuma zīmes izskats. Attiecas uz div elementu (jautājuma zīme).

Ja paskatās uz demonstrācijas lapu, jūs varat redzēt, ka saraksta elementa (laivas) animācija ietekmē arī div elementu tajā (jautājuma zīme). Arī "izslīdēšanas" animācija nesakārtotam sarakstam darbojas uz saraksta elementa (laiva un jautājuma zīme).

Līdz ar to varam secināt, ka bērnu elementi papildus savām darbībām saņem animācijas no vecākiem. Tagad atliek tikai uzskaitīt vecāku/bērnu struktūras.

CSS

Pirms sākat analizēt animācijas izveidi, jums ir jāpārliecinās atpakaļ saderīgs ar vecākām pārlūkprogrammām.

Atgriezeniskā saderība

Mēs nodrošināsim atpakaļejošu saderību, vienkārši veidojot marķējumu tā, it kā CSS animācijas vispār nepastāvētu. Ja kāds skata lapu vecā pārlūkprogrammā, viņš redzēs parastu statisku attēlu, nevis tukšu atstarpi.

Piemēram: ko darīt, ja izmantojat CSS? Līdzīgi kā zemāk, radīsies problēmas:

/* NEPAREIZI! */ @keyframe mūsu-fade-in-animation ( 0% (necaurredzamība:0;) 100% (necaurredzamība:1;) ) div (necaurredzamība: 0; /* Šis divstūris pēc noklusējuma ir paslēpts - ak! */ animācija: mūsu animācijas izbalēšana 1 s 1)

Ja pārlūkprogramma neatbalsta animācijas, div elements lietotājam paliks neredzams.

Un šādi mēs nodrošināsim atpakaļejošu saderību ar vecākām pārlūkprogrammām:

/* TRUE */ @keyframe mūsu-fade-in-animation ( 0% (necaurredzamība:0;) 100% (necaurredzamība:1;) ) div (necaurredzamība: 1; /* Šis dalījums ir redzams pēc noklusējuma */ animācija: mūsu animācijas izbalēšana 1 s 1)

Tagad div elements tiks parādīts pat tad, ja animāciju neizdosies sākt. Un iekšā modernās pārlūkprogrammas Animācijas laikā vispirms tiks paslēpts div.

Velku

Tagad mēs zinām, kā nodrošināt atpakaļejošu saderību (kas palīdzēs izvairīties no problēmām, strādājot ar reāliem projektiem). Ir pienācis laiks izveidot mūsu CSS koda bāzi.

Jums jāatceras 3 punkti:

Tā kā reklāmkarogs tiks izmantots dažādās vietnēs, mēs darīsim visu iespējamo CSS atlasītājiīpašs. Tie visi sāksies ar identifikatoru #ad-1. Tādā veidā mēs centīsimies izvairīties no mūsu koda un vietnes koda pārklāšanās.

Mēs apzināti ignorējam animācijas aizkavi instalācijās. Ja, iestatot stilus ar elementu noklusējuma redzamību, izmantojat animācijas aizkavi, reklāmkaroga struktūra tiks traucēta attēla daļu pēkšņas pazušanas vai parādīšanās dēļ pēc animācijas pabeigšanas. Animācijas aizkave tiek simulēta pēc kadru ilguma un iestatījuma.

Kad vien iespējams Mēs izmantojam vienu animāciju vairākiem elementiem. Tādā veidā mēs ietaupām laiku un samazinām koda lielumu.

Tāpēc izveidosim pamatu mūsu reklāmkarogam. Iestatīsim tai relatīvo pozicionēšanu, lai varētu pareizi novietot iekšējos elementus. Tiks paslēpts arī viss ārpus elementa darbības jomas:

#ad-1 (platums: 720 pikseļi; augstums: 300 pikseļi; peldēšana: pa kreisi; piemale: 40 pikseļi automātiski 0; fona attēls: url(../images/ad-1/background.png); fona pozīcija: centrs; fons -atkārtot: no-repeat: slēpts;

Pēc tam mēs iestatām stilus teksta un ievades laukiem. Izsauciet atbilstošās animācijas. Jums arī jāpārliecinās, ka saturam ir augstākais kustīgo daļu z indekss, lai tās nepārklātos.

#ad-1 #content ( platums: 325 pikseļi; peldēšana: pa labi; piemale: 40 pikseļi; teksta līdzināšana: centrā; z-indekss: 4; pozīcija: relatīvs; pārpilde: redzams; ) #ad-1 h2 ( font-family: "Alfa Slab One", kursīvs: #137dd5 teksta ēnojums: 0px 4px #fff aizkave */ ) #ad-1 h3 ( fontu saime: "Boogaloo", kursīvs; krāsa: #202224; fonta izmērs: 31px; līnijas augstums: 31px; teksta ēna: 0px 0px 4px #fff; animācija: aizkavēta -fade-animation 10s 1 easy-in-out /* h3 izskats ar simulētu aizkavi */ ) #ad-1 forma ( piemale: 30px 0 0 6px; pozīcija: relatīvā; animācija: form-animation 12s 1 ease-in; -out; /* Izbīdot veidlapu e-pasta adreses ievadīšanai ar simulētu aizkavi */ ) #ad-1 #email ( platums: 158px; augstums: 48px; float: left; polsterējums: 0 20px; font-size: 16px; fontu saime: "Lucida Grande", teksta ēnojums: 1px 1px #a2917d apmales-kreisais rādiuss: 5px;

apmale: 1px solid #a2917d;

#ad-1 ul#water( /* Ja jums nepieciešama cita animācija ūdenim, varat to pievienot šeit */ ) #ad-1 li#water-back ( platums: 1200 pikseļi; augstums: 84 pikseļi; fona attēls: url( .. /images/ad-1/water-back.png: z-index: absolūts: -20px; #ad-1 li#water-front (platums: 1200px; augstums: 158px; background-image: url(../images/ad-1/water-front .png); fona atkārtojums: z-indekss: 3; apakšā: -70 pikseļu animācija: bezgalīga viļņu izkliedēšana, lai radītu perspektīvas efektu */ )

Noteiksim laivas un tās elementu stilus. Mēs saucam arī atbilstošās animācijas:

#ad-1 ul#boat (platums: 249px; augstums: 215px; z-index: 2; pozīcija: absolūtais; apakšā: 25px; pa kreisi: 20px; pārplūde: redzama; animācija: laiva animācijā 3s 1 atvieglojums ; /* Iebīda grupu, kad reklāma sākas */ ) #ad-1 ul#boat li ( platums: 249px; augstums: 215px; background-image: url(../images/ad-1/boat.png); pozīcija: absolūts: 0px: redzama animācija: bezgalīgs vieglums uz āru /* Simulēt laivu, kas jau tiek izmantota uz ūdens; ad-1 #question-mark ( platums: 24 pikseļi; augstums: 50 pikseļi; fona attēls: url (../images/ad-1/question-mark.png); pozīcija: absolūtā; pa labi: 34 pikseļi; augšā: -30 pikseļi ;

Tagad izveidosim stilus mākoņiem. Viņiem izmantosim animāciju ar bezgalīgas kustības efektu. Ilustrācija parāda idejas būtību:

Un šeit ir CSS kods:

#ad-1 #clouds (pozīcija: absolūtā; augšā: 0px; z-index: 0; animācija: mākoņa animācija 30s bezgalīgi lineāra; /* Ritiniet mākoņus pa kreisi, atiestatiet un atkārtojiet */ ) #ad-1 # mākoņu grupa -1 ( platums: 720 pikseļi; pozīcija: absolūts; pa kreisi: 0 pikseļi; ) #ad-1 #cloud-group-2 (platums: 720px; pozīcija: absolūts; pa kreisi: 720 pikseļi; ) #ad-1 .cloud- 1 ( platums : 172 pikseļi; augstums: 121 pikseļi; url (../images/ad-1/cloud-1.png); pozīcija: absolūtā augšdaļa: 40 pikseļi; ( platums: 121 pikseļi; augstums: 75 pikseļi; fona attēls: url () ../images/ad-1/cloud-2.png: absolūtais: -25px ) #ad-1 (platums: 132px; background-image); : url(../images/ad-1/cloud-3.png: absolūtais: -5px);

Animācijas

Atgādinājums: No šī brīža nekas faktiski nav animēts. Ja tagad skatāties uz mūsu reklāmkarogu, jūs redzēsit statisku attēlu. Šeit tiek izveidotas animācijas un izsauktas iepriekš minētajā kodā.

Tagad iedvesīsim dzīvību mūsu skaistajā statiskajā attēlā:

/* Vairāku elementu attēlošanai tiek izmantota simulēta aizkaves animācija. Aizkaves simulācija tiek veikta, uzsākot procesu ar 80% animācijas turpināšanos (un ne uzreiz). Tādā veidā jūs varat simulēt jebkuru aizkavi: */ @keyframes delayed-fade-animation ( 0% (necaurredzamība: 0;) 80% (necaurredzamība: 0;) 100% (necaurredzamība: 1;) ) /* Animācija veidlapas parādīšanai ar e-pasta adresi un pogu. Tiek izmantota arī aizkaves imitācija */ @keyframes form-animation ( 0% (necaurredzamība: 0; pa labi: -400 pikseļi;) 90% (necaurredzamība: 0; pa labi: -400 pikseļi;) 95% (necaurredzamība: 0,5; pa labi: 20 pikseļi ;) 100% (necaurredzamība: 1; pa labi: 0px;) ) /* Šī animācija tiek izmantota, lai videoklipa sākumā noņemtu laivu no ekrāna: */ @keyframes boat-in-animation ( 0% (pa kreisi: -200px;) 100% (pa kreisi : 20px;) ) /* Animācija mākoņiem. Pirmā mākoņu grupa sāk kustēties no centra, bet otrā - pa labi no ekrāna. Pirmā grupa tiek lēnām noņemta no ekrāna, bet otrā parādās labajā pusē. Kad kreisā grupa ir pilnībā paslēpta, mākoņi ļoti ātri atgriežas sākotnējā pozīcijā: */ @keyframes cloud-animation ( 0% (pa kreisi: 0px;) 99.9999% (pa kreisi: -720px;) 100% (pa kreisi: 0px; ) ) / * Pēdējās trīs animācijas ir gandrīz vienādas - atšķirība ir elementu izvietojumā. Tie imitē okeāna viļņu izšļakstīšanos: */ @keyframes boat-animation ( 0% (apakšā: 0px; pa kreisi: 0px;) 25% (apakšā: -2px; pa kreisi: -2px;) 70% (apakšā: 2px; pa kreisi : - 4px;) 100% (apakšā: -1px; pa kreisi: 0px;) ) @keyframes ūdens-back-animation (0% (apakšā: 10px; pa kreisi: -20px;) 25% (apakšā: 8px; pa kreisi: - 22 pikseļi; ) 70% (apakšā: 12 pikseļi; pa kreisi: -24 pikseļi;) 100% (apakšā: 9 pikseļi; pa kreisi: -20 pikseļi;) ) @keyframes ūdens priekšpuses animācija ( 0% (apakšā: -70 pikseļi; pa kreisi: -30 pikseļi) ;) 25% (apakšā: -68 pikseļi; pa kreisi: -32 pikseļi;) 70% (apakšā: -72 pikseļi; pa kreisi: -34 pikseļi;) 100% (apakšā: -69 pikseļi; pa kreisi: -30 pikseļi;) )

Secinājums

Šajā nodarbībā mēs apguvām vairākus galvenos jēdzienus:

1. Mantinieku elementi papildus savām animācijām saņem arī vecāku animācijas.
2. Veidojot reklāmkarogu, jums jācenšas izmantot unikālu identifikatoru, lai izvairītos no koda pārklāšanās ar esošu CSS projektu.
3. Elementu novietojums un stils jāizvēlas tā, it kā animācija nebūtu pieejama, lai nodrošinātu atpakaļejošu saderību.
4. Ja iespējams, jums vajadzētu izmantot vienu animāciju vairākiem elementiem.

Šodien mēs izveidosim reklāmkarogu, izmantojot CSS3 animāciju.

Pašlaik tikai Firefox un WebKit pārlūkprogrammas atbalsta CSS animācijas, taču mēs izskatīsim, kā mēs varam panākt, lai šie baneri darbotos arī citās pārlūkprogrammās (ko es saucu par 18. gadsimta pārlūkprogrammām). Tomēr, eksperimentējot ar modernajām CSS tehnoloģijām, nevajadzētu sagaidīt lielu atbalstu visās pārlūkprogrammās (īpaši IE 7 un jaunākās versijās).

Tāpēc veidosim animētus banerus!

Lūdzu, ņemiet vērā: lai ietaupītu vietu, visi pārlūkprogrammas prefiksi ir noņemti. Cm. avota faili lai redzētu visu CSS kodu. Ja neesat pazīstams ar CSS animācijām, es ļoti iesakupirmkārtizlasi šo.

HTML marķējums

Pirmkārt, mēs izveidosim banera struktūru, izmantojot HTML. Šajā brīdī mums ir jāpārdomā, kā mēs vēlamies, lai mūsu animācija darbotos — kā tā ietekmēs bērnu un vecāku elementus mūsu marķējuma struktūrā (to paskaidrošu tālāk):