CSS-г ашиглан хариу үйлдлийн дизайны зургийг хэрхэн нэмэх вэ
Өнөөдөр алдартай вебсайтууд болон харагдахуйц дизайны нэгийг харьцуулаарай. Эдгээр зургийг нэмж оруулахад тулгарч буй сорилтуудын нэг нь вэбсайтууд нь өөр өөр хэмжээтэй дэлгэц, төхөөрөмжүүд дээр хариу үйлдэл хийх ёстой байдаг.
Таны вэбсайтын байршил өөрчлөгдөж, өөр өөр хэмжээтэй дэлгэцээр хэмжигддэг тул эдгээр арын зургуудын хэмжээ хэмжээгээр нь хэмждэг байх ёстой.
Үнэндээ эдгээр "шингэний зургууд" нь хариу вэбсайтуудын гол хэсгүүдийн нэг юм (шингэний сүлжээ, мессежийн хамт). Эдгээр гурван хэсгүүд нь вэбсайтаас эхлээд вэбсайт дизайны үндсэн загвар болж ирсэн боловч вэбд хариу өгөх интернетийн зургийг байнга нэмж өгдөг бол (inline дүрсийг HTML тэмдэглэгээний хэсэг байдлаар кодчилдог) юм. Үндсэн зургуудтай ижилхэн (CSS-ийн арын функцийг ашиглан хуудсанд хэвлэгдсэн) нь олон вэб дизайнерууд болон урд талын хөгжүүлэгчдийн хувьд ихээхэн сорилт болсон юм. Азаар CSS-ийн "background-size" үл хөдлөх хөрөнгийг нэмэх нь боломжтой болсон.
Бие даасан нийтлэл дээр CSS3 өмчийн дэвсгэрийн хэмжээг хэрхэн ашиглах талаар дүрслэлийг цонхонд багтаахын тулд ашиглахыг зөвлөсөн боловч энэ зүйлд зориулж илүү сайн, арай илүү аргыг ашиглах болно. Үүнийг хийхийн тулд бид доорх шинж чанар, үнэ цэнийн хослолыг ашиглана:
суурь хэмжээ: хамгаалах;
Хамгаалах түлхүүр үгний өмч нь хөтөчийг цонхны том, жижиг хэрээс үл хамааран цонхонд тохируулахыг хэлж өгдөг. Зургийг бүхэлд нь дэлгэцэнд хамруулахын тулд масштабыг өргөжүүлсэн боловч анхны харьцаа, талбайн харьцаа нь хэвээр хадгалагдан, дүрсийг гажуудуулахаас сэргийлдэг.
Зургийг аль болох том цонхонд байрлуулж цонхны гадаргууг бүхэлд нь бүрхсэн болно. Энэ нь таны хуудсанд ямар ч хоосон зай байхгүй эсвэл зураг дээрх аливаа гажуудал байхгүй гэсэн үг юм. Гэхдээ энэ нь дэлгэцийн талбайн харьцаа болон тухайн зураг дээрх талбайн харьцаа зэргээс шалтгаалан зарим зургийг арилгаж болно гэсэн үг юм. Жишээ нь, арын дэвсгэр байрлал дахь ямар утгуудаас шалтгаалан зургийн ирмэгүүд (дээд, доод, зүүн, баруунаас аль алиныг) зураг дээр тасалдуулж болно. Хэрэв та арын дэвсгэрийг "зүүн дээд" рүү чиглүүлбэл зураг дээрх аливаа илүүдэл доод болон баруун талаасаа гарч ирнэ. Хэрвээ та арын дэвсгэр зургийг төвлөрүүлбэл илүүдэл талууд бүх талаасаа гарч ирдэг, гэхдээ илүүдэл тархсанаас хойш аль нэг тал дээр үзүүлэх нөлөө нь багаар үйлчилнэ.
Арын хэмжээ: тагийг хэрхэн ашиглах вэ?
Дэвсгэр зургийг бүтээхдээ нэлээд том зураг үүсгэх нь зүйтэй юм. Браузер нь дүрсний чанарыг мэдэгдэхүйц нөлөө үзүүлэхгүйгээр жижиг зургийг гаргаж чаддаг бол хөтөч нь анхны хэмжээсээсээ том хэмжээтэйгээр томрох үед харагдах чанар нь доройтож, бүдгэрч, цэгцтэй болно. Үүний сул тал нь таны дэлгэц бүх дэлгэцэн дээр аварга том зургийг хүргэж байх үед таны хуудас гүйцэтгэлийн цохилт болдог.
Үүнийг хийхийн тулд татаж авах хурд, вэб дамжуулалтанд зориулж эдгээр зургийг зөв бэлтгэх хэрэгтэй. Эцэст нь та хангалттай хэмжээний зургийн хэмжээ, чанар, татаж авах хурдны хэмжээ хангалттай хэмжээний файлын хэмжээ дундаас аз жаргалтай орчинг олох хэрэгтэй.
Өргөн хүрээтэй зургийг ашиглах нийтлэг аргуудын нэг бол та уг зургийг хуудасны бүрэн дэвсгэрт болгохыг хүсэж байгаа, тэр хуудас өргөн, ширээний компьютер дээр үзэгддэг эсвэл гар утсан дээр гардаг төхөөрөмжүүд.
Өөрийн зургийг өөрийн веб хөтөч дээрээ байршуулж өөрийн CSS дээр арын зураг болгон нэмээрэй:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
суурь нөхцөл: төвийн төв;
суурь-хавсралт: тогтмол;
Эхлээд браузер угтвартай CSS дуудах:
-webkit-background-size: бүрхэвч;
-moz-background-size: бүрхэвч;
-o-background-size: бүрхэвч;
Дараа нь CSS өмчийг нэмнэ:
суурь хэмжээ: хамгаалах;
Төхөөрөмжүүдийг өөрчилдөг өөр өөр зургийг ашиглах
Десктоп эсвэл зөөврийн компьютерт зориулсан дескриптив дизайн чухал ач холбогдолтой хэдий ч Вэбд нэвтэрч чадах олон төрлийн төхөөрөмжүүд ихээхэн өссөн бөгөөд дэлгэцийн хэмжээ илүү өргөн цар хүрээтэй байдаг.
Өмнө дурьдсанчлан, ухаалаг гар утсан дээр маш их хэмжээний хариулттай арын зургийг байрлуулах нь жишээ нь, үр дүнтэй эсвэл зурвасын өргөнийг ухаалгаар дизайн биш юм.
Медиа асуултыг хэрхэн ашиглаж болох талаар үзүүлж буй төхөөрөмжүүд дээр хэрхэн ажиллахыг сурч, вэбсайтынхаа нийцтэй байдлыг хөдөлгөөнт төхөөрөмжүүдтэй улам сайжруулах болно.
Jennfier Krynin-ийн анхны нийтлэл. 9/16/17 Жереми Герард засварлав