Хамгийн тохиромжтой арга замууд: CSS гурвалжин хэрхэн хийх

Маш их сайхан орчин үеийн вэб хуудас олон сонирхолтой график байдаг. Тэдний дунд хамгийн энгийн нь гурвалжин, элементүүдийн олонхийг боловсруулж ашиглаж байна гэх мэт геометрийн хэлбэр ашигладаг. Жишээ нь, тэд заагч гэж обьект нь хуудсан дээр зочин түүнд түүний анхаарлыг болсон ашиглаж байна. Мэдээж хэрэг, гурвалжин гол үйл ажиллагаа - гоёл чимэглэлийн, тэдгээрийг агуулсан блок, илүү орчин үеийн, сонирхолтой болж байгаа билээ.

Хүн бүр Cascading Style Sheets дамжуулан ийм зураг хэрхэн бий болгох, CSS нь гурвалжин хэрхэн хийх гайхаж байна мэддэг.

сайтын дизайн хэрэглэх

хаа сайгүй вэб дизайн гурвалжин байна. Тэд зөвлөмж, цэснүүд, янз бүрийн UI элемент болгосон байна. Заримдаа тэд ачаалах үйл явцын үзүүлэлт үүсгэхэд ашиглагддаг байна. Тэгээд өмнө нь бол энэ нь тэдэнд юу ч хийж болох байсан, гэхдээ одоо энэ нь боломжгүй бөгөөд хөгжүүлэгчид ийм шаардлага дасан зохицох үүрэгтэй. интерфэйсийн хэсгүүдийн хоорондох харилцан холболтын барилгын чухал хэсэг, нэг аж ахуйн нэгж болгон нэгтгэх - Бүх дараа, өнөөдөр CSS гурвалжин бий болгосон байна.

Энэ байрлал, тэдгээрийн загвар нь маш элбэг байдаг гурвалжин ирэх үед маш олон вэб дизайнерууд орхив байна. Эцсийн эцэст, ямар ч шинж нь шууд энэ геометрийн дүрс бий болно гэж. Үнэн хэрэгтээ энэ хийх олон аргууд байдаг.

ашиглан хүрээг бий болгох арга

хилээр - Эхний арга нь та CSS нь гурвалжин үүсгэх боломжийг олгоно. Тэр хүрээнүүдийг ашиглаж байна. хилийн эд хөрөнгийг ашиглан бий болгож байгаа хил хязгаар нь шууд гурвалжны холбоотой биш юм байгаа хэдий ч, энэ зорилгоор ихэвчлэн хэрэглэгддэг.

тэг өндөр, объектын өргөн, түүнчлэн зузаан хил суулгах тохируулах үед та нар талбай, дөрвөн тэнцүү гурвалжин хуваагдаж байгааг харж болно. трик та зөвхөн шаардлагатай хил байлгах хэрэгтэй, зарим нь ил тод болгох явдал юм. Мөн эдүгээ, энэ нь CSS зөв чиглэл, өнгө зурсан гурвалжин болж байна.

ямар ч засаж ашиглан зураг зурах ямар ч шаардлага байхгүй, учир нь шинж чанар нь "хүрээ" хэрэгтэй байна ашиглан өнцөг үүсгэнэ. гурвалжин параметрүүд нь үргэлж кодыг өөрчилж болно. Мөн энэ нь цаг хугацаа хөгжүүлэгч авардаг. хүрээнд янз бүрийн өргөн хослуулах замаар хялбар зураг авах хангалттай юм. яаж ажилладаг талаар ойлгохын тулд, та зүгээр л тэг өргөн, өндөр нь хоосон элемент, маш зузаан хүрээ тал тус бүрт нь өөр өөр өнгө үүсгэж болно. Тэгэхээр дөрвөн ил тод гурвалжин гурван талыг гаргах өөр өөр төрлийн байдаг:

• гурвалжин, зүүн тийш харж, хоёр тал нь тэнцүү байна;
• гурвалжин, зүүн, хавтгай харж байгаа нь;
• нь урт гурвалжин зүүн тулгамдаж буй;
• өнцөгт гурвалжин, хэний зөв өнцгөөр зүүн;
• доошоо харж гурвалжин;
• гурвалжин руу харж,
• гурвалжин, баруун, болон бусад олон зүйлийн хайж.

psevdoedementov ашиглах

Эдгээр арга нь та цэстэй заавар, зөвлөмжийг нь өнцгийг үүсгэж болно. нэгж нь CSS гурвалжин дамжуулан хавсаргахын тулд ихэвчлэн програмчид ийм псевдо дараа аль өмнө ашиглаж байна. Та нар тэднийг хамтад нь ашиглаж байгаа бол, энэ нь CSS гурвалжин нь тархинд цус харвах байх нь зурах боломжтой юм.

тэдгээрийг хослуулах гэхэд хөгжүүлэгчид нь үл хөдлөх хөрөнгийн хэрэглэх, сайхан явдалт тоглоомд нь төрөл бүрийн үүсгэж харьцангуй: Албан тушаал , эцэг эх, элемент юм. Тэдний суудлын гарч Энэ зорилгоор хийж байна псевдо биш, нүүжээ.

Дээрээс нь гурвалжин үүсгэх CSS хүрээнд ашиглах нь:

• шинж тусламжтайгаар хэмжээ, өнгө хурдан, хялбар засварлах;
• бүх хөтчүүдийг дэмжиж байгаа.

сул тал:

• Энэ хүрээг ашигладаг, учир нь градиент, сүүдэр ашиглах ямар ч боломж байхгүй юм;
• заримдаа хэрэглэгчийн Firefox хөтөч хуудсан дээр харагдах үед, альфа утга нь ажиллахгүй байж болох юм, энэ зургийг гажуудуулж болно.

бэлэн зураг ашиглах

гурвалжин бий болгох дараах арга - кодлогдсон зургийн хэрэглээ юм. гурвалжин дүрс засварлагч урьдчилан зурсан болон мэргэшсэн үйлчилгээ нь тусгай код болгон хувиргана.

Энэ аргын давуу тал нь та сүүдэр, градиент ба хүрээ нь маш сайхан зураг төсөл хийж болох ба дараа нь ердөө л энэ бүгдийг кодчилдог юм. Харин сул тал нь хүн бүр график хөтөлбөр хэлээр чөлөөтэй ярьдаг байх явдал юм. Үүнээс гадна, дүрс маш том бол, код шугам нь ердөө л асар их авч байна. Энэ нь хөгжүүлэгчид нь тохиромжгүй юм.

хөтөч Internert Explorer хуучин хувилбаруудыг хэрэглэх нь зүйтэй тусдаа зүйл. Тэдний хувьд, арга нь ердөө л ажиллаж байна.

Арга урвуу дарааллын квадрат

Нэг арга зам нь CSS урвуу квадратын арга хэрэгсэл бий болгох явдал юм. Хоёр үндсэн нэгж байдаг. Гэвч зарим хүмүүс псевдо ашигладаг.

Нэгдүгээрт, та талбай бий болгож байна. Энэ нь эргэдэг гишүүн агуулга байх болно. Дараа нь 45 градус замаар босгох бөгөөд ингэснээр энэ нь алмаз шиг харагдаж байсан. Дараа нь, ээлжийн-дээш, гадаад нэгж үл хөдлөх хөрөнгийн хальж өөр далд байна: нуугдсан. Энэ шийдэл нь хөндлөн хөтөч биш юм, заримдаа зураг хүссэн гарч ирэхгүй байна.

үр дүн

Тэгэхээр нь гурвалжин бий болгох олон арга байдаг. Зөвхөн эдгээр бүх CSS шинж чанар алдагдсан авч чадахгүй вэ? Энэ тохиолдолд лавлагаа үргэлж туслах болно. Энэ нь Cascading Style Sheets бүх боломжуудыг тайлбарлах болно.

програмчлал руу явж, CSS-гарын авлагыг үзэхийн тулд хүсэхгүй байгаа хүмүүсийн хувьд, гурвалжин эрх хэмжээ, өнгийг үүсгэдэг онлайн редактор байдаг. Онд харааны засварлагч, хэрэглэгчийн сонгож, бүх тохиргоог зураг тохируулдаг. CSS код генератор гурвалжин ялаа талаар тусдаа цонхонд байрлуулсан хөрвүүлсэн. Дараа нь бий код нь ердөө л загварчлах руу оруулсан бөгөөд хуудасны загварыг тохирсон байна.