Iepazīstieties ar CSS3 vairākiem fona attēliem

  • Nepieciešamas zināšanas : Pamata HTML un CSS
  • Nepieciešams : HTML / CSS redaktors, moderns pārlūks
  • Projekta laiks : 30 minūtes - 1 stunda
  • Lejupielādējiet avota failus
  • Skatīt demonstrāciju

Mēs visi esam bijuši tur: jūs esat straumē, jūs zīmējat un ieskicējat savu spilgto ideju par dizainu, kas ir apburt cilvēkus ar saviem attēliem. Tad jūs nākat to ražot.

Un jūsu entuziasms saņem triecienu, kad saprotat, ka tas nav tik vienkārši izdarāms, kā jūs domājāt. Jūsu dizainam jābūt pieejamam, un tam ir vajadzīgi vairāki attēli, kuriem visiem jābūt elastīgiem un kontrolētiem atsevišķi.

Kādas ir iespējas? Vai jūs veicat noziegumus pret semantiku un pievienojat prezentācijas marķējumu savam citādi tīram un minimālam kodam? Vai arī jūs kompromitējat savu sākotnējo ideju, pieturaties pie saviem principiem, bet upurējat dažas sīkākas detaļas?



Par laimi mums vairs nav jāuztraucas par fona attēliem. Tagad mums ir CSS3 un iespēja pielietot vairākus fona attēlus jebkuram elementam, kas mums patīk. Radošā brīvība!

Šajā apmācībā es vēlētos iepazīstināt jūs ar 404 lapu dizaina izveidi, izmantojot vairākus fona attēlus.

Pēdējās lapas noformējums

Mūsu galīgajā dizainā tiek parādīts kļūdas ziņojums ar meklēšanas lodziņu, kas parādīts zīmē, kas ir apturēta no balona, ​​kas lidinās virs ainavas. Augšdaļā ir viens liels mākonis ar dažiem mazākiem mākoņiem, kas izkaisīti pa debesīm. Mēs arī saglabāsim “404” lapā, lai norādītu kļūdu. Mūsu slēptais pārsteigums ir izmantot smalku paralakses efektu, lai mainītu kalnu virsotņu, kalnu un mākoņu stāvokli, kad pārlūkprogrammas loga izmērs tiek mainīts.

HTML struktūra

Sāksim ar HTML lapas iestatīšanu un mūsu lodziņu ievietošanu savās vietās. Vispirms ņemot vērā saturu, mēs varam saglabāt trīs galvenās rūtiņas:

  1. viens iesaiņotājs DIV, kurā būs viss lapas saturs
  2. raksts tekstam un meklēšanas lodziņam
  3. kājene 404 kļūdai

  1. < ķermeņa >
  2. < div id = 'wrap'>
  3. < h1 > Cienījamais ceļotāj,h1 >
  4. < lpp >
  5. atvainojamies par jūsu ceļojuma pārtraukumu. Šķiet, ka esam nedaudz apmaldījušies.
  6. < br />
  7. Lūdzu, ierakstiet vēlamo galamērķi, un mēs jūs aizvedīsim.
  8. lpp >
  9. < formā >
  10. < ievade type = 'text' value = '. . . ' id = 'search' onclick = 'this.value =' '' />
  11. < ievade type = 'submit' value = 'aizved mani uz turieni' id = 'searchsubmit' onclick = 'search.value ='. . . '' />
  12. formā >
  13. 404
  14. div >
  15. ķermeņa >

Kad HTML ir izdarīts, mēs esam iestatīti.

un gatavs iekļūt stilā.

kā salabot skarbu saules gaismu

Satura veidošana

Sāksim vispirms ar satura veidošanu un pēc tam pievienojiet attēlus.

Viss saturs tiek novietots uz zīmes, kas apturēta no gaisa balona - mēs iestatīsim iesaiņojuma DIV platumu vismaz 150 pikseļu vērtībā, pievienojot procentus mazākiem / lielākiem ekrāniem, un centrēsim to logā. Visam saturam ir plašs ārējais atstatums, lai nodrošinātu labu salasāmību, kā arī vēlāk pievienotu mūsu apmales grafiku.

  1. / * satura ietīšana * /
  2. #wrap {
  3. min platums: 150 pikseļi;
  4. platums: 28%;
  5. margin: 0 auto;
  6. }
  7. / * galvenais saturs * /
  8. raksts {
  9. apmale: 1px ciets # 461200;
  10. fona krāsa: # d4d4d4;
  11. }
  12. raksts h1 {
  13. displejs: bloks;
  14. platums: 76%;
  15. margin: 1,8em auto .2em auto;
  16. fonta lielums: 1,26em;
  17. fonta stils: kursīvs;
  18. }
  19. raksts p {
  20. platums: 76%;
  21. piemale: 0 auto 1em auto;
  22. fonta stils: kursīvs;
  23. }
  24. / * meklēšanas lodziņš * /
  25. raksta forma {
  26. displejs: bloks;
  27. platums: 76%;
  28. piemale: 1em auto 0 auto;
  29. }
  30. raksta ievade {
  31. displejs: bloks;
  32. platums: 96%;
  33. piemale: 1em auto 0 auto;
  34. polsterējums: .26em;
  35. apmale: nav;
  36. apmales apakšdaļa: 1px svītrots # cc5100;
  37. fons: rgba (255,255,255, .4);
  38. fonta lielums: 1.36em;
  39. krāsa: # 1d3d89;
  40. }
  41. raksta ievade: kursors, raksta ievade: aktīvs, raksta ievade: fokuss {
  42. fons: #fff;
  43. krāsa: # 531900;
  44. }
  45. raksta ievade [type = iesniedz] {
  46. displejs: bloks;
  47. platums: 100%;
  48. fons: nav;
  49. apmale: nav;
  50. apmale apakšā: 2 pikseļi cietā krāsā # cc5100;
  51. fonta lielums: 1,46em;
  52. līnijas augstums: 1,2;
  53. starpība: .5em 0 2.36em 0;
  54. krāsa: # cc5100;
  55. }
  56. raksta ievade [tips = iesniegt]: virziet kursoru, raksta ievade [tips = iesniedz]: aktīvs, raksta ievade [tips = iesniedz]: fokuss {
  57. kursors: rādītājs;
  58. krāsa: # 1d3d89;
  59. fonta stils: kursīvs;
  60. apmales krāsa: # 531900;
  61. }
  62. / * kājene * /
  63. kājene {
  64. text-align: center;
  65. fonta lielums: 3em;
  66. līnijas augstums: 1;
  67. krāsa: #ccc;
  68. krāsa: rgba (255,255,255, .2);
  69. }

Tagad mūsu lapā tiek parādīts viss saturs, kas pārlūka logā ir kārtīgi sagrupēts un centrēts.

Vizuālā materiāla pievienošana

Pirms mēs varam iestrēgt savu attēlu pievienošanā, apskatīsim vēlreiz dizainu un izdomāsim, cik daudz attēlu mums būs nepieciešams.

Attēla sadalījums:

  1. fona attēls - izmērs piemērots logam
  2. mākonis - liels mākoņa vizuālais elements, centrēts logā
  3. izkaisīti mākoņi - vairāki mazāki mākoņi, elastīga pozicionēšana
  4. pīķi - atkārtojas horizontāli, elastīga pozicionēšana
  5. pauguri - atkārtoti horizontāli, elastīga pozicionēšana
  6. balons - centrēts virs lapas satura
  7. zīmes fons - flīzēts
  8. 4x stūra attēli - novietoti katrā no četriem zīmes stūriem

Apskatīsim katra attēla ieviešanu pēc kārtas:

1. fona attēls

Fona attēlā redzama maiga faktūra ar smalku gradientu, kas ir gaišāks pie horizonta un kļūst tumšāks pret debesīm. Lai saglabātu šo ēnojumu, mēs mērogosim attēlu, lai aizpildītu logu.

Vizuāli sēžot attēla kaudzes apakšā, mēs to pielietosim tagu. Lai nodrošinātu, ka HTML lodziņš aizpildīs logu neatkarīgi no faktiskā satura augstuma, platumu un augstumu iestatīsim uz 100% un fona attēlu izmantosim šādi:

  1. html, body {
  2. polsterējums: 0px;
  3. piemale: 0px;
  4. platums: 100%;
  5. augstums: 100%;
  6. }
  7. / * --------------------------------
  8. atsevišķi noteikumi, lai FF būtu laimīgs
  9. -------------------------------- * /
  10. html {
  11. fona krāsa: # 447d9a;
  12. fona attēls: url (imgs / bg.jpg);
  13. fona atkārtojums: atkārtojiet x;
  14. fona lielums: vāks;
  15. fona stiprinājums: fiksēts;
  16. }

Ņemiet vērā, ka noteikumi ir rakstīti ļoti konkrēti, izvairoties no stenogrāfijas pieejas. Tas ir nepieciešams, lai izvairītos no problēmām ar Firefox.

Ja vēlaties uzzināt vairāk par CSS fona lieluma rekvizītu, dodieties un izlasiet šo lielisko apmācību autore Stefānija Rūisa.

2. mākonis, virsotnes un kalni

Tagad mēs esam nonākuši pie jautrās daļas un šīs apmācības būtības: vairāku fona attēlu izmantošana vienam HTML elementam, taču vispirms jāņem vērā dažas lietas.

Pārlūkprogrammu saderība:

Par laimi, rakstīšanas laikā vairāku fona attēlu izmantošanu atbalsta visu parasto pārlūkprogrammu jaunākās versijas.

Ja pārlūks neatbalsta vairākus fona attēlus, tas ignorēs visu īpašumu. Tāpēc ieteicams vispirms iestatīt noklusējuma fonu, pat ja tas attiecas tikai uz krāsu, un pēc tam to pārrakstīt ar vairākiem fona attēliem, kurus ieviesīs visas saderīgās pārlūkprogrammas.

Sīkāku informāciju par pārlūka atbalstu skatiet caniuse.com .

Vairāku fona attēlu sakraušanas secība:

Lai lietotu vairākus attēlus, tiek izmantots standarta fona rekvizīts, attēlus attēlojot pa vienam, atdalot tos ar komatiem. Ja vēlaties norādīt fona krāsu, tā būs jāiestata pēdējā un bez iepriekšējā komata.

  1. fons: url (img1.png), url (img2.png), url (img3.png) #fdfdfd;

Lietojot HTML elementam vairāk nekā vienu fona attēlu, kļūs redzama iestatīta kraušanas kārtība. Pretēji tam, ko jūs varētu sagaidīt, pasūtījums tiek mainīts uz HTML sakraušanas secību, kur pirmais uzskaitītais elements kļūst par apakšējo slāni.

Tomēr CSS3 vairākiem attēliem pirmais norādītais attēls kļūs par visvairāk attēlu, otrais attēls tiks novietots zem tā, trešais attēls atkal zem pirmā un otrais utt.

Pozicionēšanas un atkārtošanas kontrole:

Attēlu papildu īpašību kontrole - mēs varam izmantot vai nu stenogrāfiju, vai arī otro deklarāciju.

Stenogrāfijas CSS:

  1. fons: URL (img1.png) augšējā kreisajā pusē neatkārtojas,
  2. URL (img2.png) apakšējā kreisajā pusē atkārtot-x;

Atsevišķas deklarācijas:

  1. fons: URL (img1.png), URL (img2.png);
  2. fona stāvoklis: augšējais kreisais, apakšējais kreisais;
  3. fona atkārtojums: nav atkārtot, atkārtot x;

Šajā gadījumā katrs īpašums tiks lietots, ievērojot attēliem norādīto secību.

Atpakaļ pie mūsu dizaina:

Vēlreiz apskatot mūsu dizainu, mums ir jābūt skaidrībai par to, kā vizuālie materiāli tiks sakrauti.

Vispirms mums būs jānorāda viens no vizuālajiem materiāliem kā fona attēls pārlūkprogrammām, kuras nespēs ieviest vairākus fona attēlus.

Pārrakstot šo rekvizītu, mēs varam turpināt uzskaitīt attēlus vēlamajā sakraušanas secībā:

  1. ķermenis {
  2. fons: URL (imgs / peaks.png) apakšējā centra atkārtojums-x;
  3. fons: URL (imgs / cloud.png) augšējā centra daļa neatkārtojas,
  4. URL (imgs / clouds-scatter.png) -46% -330px atkārtot-x,
  5. URL (imgs / hills.png) apakšējā centra atkārtojums-x,
  6. URL (imgs / peaks.png) apakšējā labajā pusē atkārtot-x;
  7. }

Gan attēlu procentuālā, gan kreisās / labās pozīcijas tagad parādīs paralakses efektu, kad loga lielums tiks mainīts. Un pats labākais, ka papildu uzcenojums nebija vajadzīgs!

3. Pielāgoti stūri

Mūsu dizaina fons tagad ir pabeigts. Laiks pabeigt satura iesaiņošanu, pievienojot balonu un zīmes pielāgotos stūrus.

Ja pats saturs lapā atrodas zemāk, tiks atbrīvota vieta vizuālajam attēlam, kas tiek uzklāts uz iesaiņotāja DIV un novietots vietā.

  1. / * satura ietīšana * /
  2. #wrap {
  3. min platums: 150 pikseļi;
  4. platums: 28%;
  5. margin: 0 auto;
  6. polsterējums: 150px 0 0 0;
  7. fons: URL (imgs / balloon.png) centrs 85 pikseļi bez atkārtojuma;
  8. }
  9. / * galvenais saturs * /
  10. raksts {
  11. apmale: 1px ciets # 461200;
  12. fona krāsa: # d4d4d4;
  13. starpība: 150px 0 0 0;
  14. }

Mūsu pēdējais solis ir pievienot zīmei pielāgotos stūrus, ierāmējot satura tekstu. Ar fiksēta izmēra elementu risinājums būtu vienkāršs, pietiktu ar vienu vienkāršu attēlu. Bet, tā kā mēs vēlētos, lai mūsu satura lodziņš paliktu elastīgs un mainītu loga platumu, kā arī mainītu lielumu, kad teksts tiek palielināts, mums katrs stūra attēls jāpielieto atsevišķi, ļaujot pašam lodziņam palikt mērogojamam.

Pirms vairāku fona attēlu atbalsta tas būtu vēl viens galvassāpes un dilemma. Jūs varētu atcerēties, ka esat darījis dažas nejaukas lietas, veidojot noapaļotas stūra kastes? Piesārņo savu kodu ar prezentācijas marķējumu?

Vairāk ne. Šīm stūra grafikām mēs tagad varam viegli pievienot četrus attēlus, katram stūrim atsevišķu grafiku. Atkal mums jāizvēlas viens attēls, kas jāpiemēro vecākām pārlūkprogrammām, un pēc tam pa vienam jāpievieno stūra vizuālie materiāli, nosakot fona pēdējo.

  1. raksts {
  2. apmale: 1px ciets # 461200;
  3. fona krāsa: # d4d4d4;
  4. starpība: 150px 0 0 0;
  5. fons: # d4d4d4 url ​​(imgs / sign-bg.png) centra atkārtojums;
  6. fons: URL (imgs / sign-border-tl.png) augšējā kreisajā pusē neatkārtojas,
  7. URL (imgs / sign-border-tr.png) augšējā labajā pusē nav atkārtojuma,
  8. URL (imgs / sign-border-bl.png) apakšējā kreisajā pusē bez atkārtojuma,
  9. URL (imgs / sign-border-br.png) apakšējā labajā pusē nav atkārtojuma,
  10. url (imgs / sign-bg.png) centra atkārtojums;
  11. }

Un mēs esam pabeiguši - ceru, ka jums bija jautri!

Atskatīšanās un plānošana

Pirms tagad jūs aizraujat, paturiet prātā, ka vairāku fona attēlu atbalsts droši darbosies tikai populāro mūsdienu pārlūkprogrammu jaunākajās versijās. Jums joprojām būs jāapsver citas pārlūkprogrammas un vecākas versijas un jāievieš atbilstošas ​​rezerves opcijas. Rūpīgi plānojiet, kā jūsu dizains parādīsies nesaderīgās pārlūkprogrammās.

Šai problēmai ir diezgan daudz risinājumu, piemēram, jQuery vai pseidoelementu ( : iepriekš / : pēc ), lai pievienotu papildu elementus. Bet jums, iespējams, pat nebūs jāiet pa šo ceļu, jo pārlūkprogrammas, kuras to nesaprot, vienkārši ignorēs šo īpašību - risinājums varētu būt tikpat vienkāršs kā cita fona attēla pilnīga definēšana, kas varētu ietvert vairākus attēlus.

Priecīgu dizainu un kodēšanu!