Хэрэв тохирохгүй бол Css цэгүүд. Зууван зураас нэмж нэг эсвэл олон мөрт текстийг өндөрт нь тайрч байна

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

Клип шинж чанарыг ашигласнаар та элементийг заасан хэмжээсээр тайрч болно.

1. Overflow шинж чанар

Блок нь тодорхой өндөр ба/эсвэл өргөнтэй үед блок элементийн агуулга нь блокоос хальж болно. Өндөрийг заагаагүй бол блокыг дараах байрлалд байрлуулахаас бусад тохиолдолд блок агуулгыг багтаахын тулд сунах болно: үнэмлэхүй; эсвэл байрлал: тогтмол; . Текст блокыг өндрөөр, зураг нь өндөр, өргөнөөр дүүргэж болно.

2. Overflow-x шинж чанар

Энэ шинж чанар нь блок доторх агуулгын баруун ирмэг нь халихад хэрхэн таслагдахыг зааж өгдөг.

Синтакс:

Div (халих-x: далд; )

3. Overflow-y шинж чанар

Энэ шинж чанар нь блок доторх агуулгын доод ирмэгийг хэрвээ халихад хэрхэн тайрахыг зааж өгдөг.

Синтакс:

Div (халих-y: далд; )

4. Clip шинж чанар

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

Тогтмол өндөр, өргөнтэй блок дотор дурын урттай текстийг харуулах шаардлагатай. Энэ тохиолдолд, хэрэв текст бүрэн багтахгүй бол өгөгдсөн блокт бүрэн тохирох текстийн фрагментийг харуулах ёстой бөгөөд үүний дараа эллипс тавина.

Энэ даалгавар нь нэлээд түгээмэл боловч үүнтэй зэрэгцэн энэ нь тийм ч энгийн зүйл биш юм.

CSS дээр нэг мөр текст хийх сонголт

Энэ тохиолдолд та text-overflow: ellipsis шинж чанарыг ашиглаж болно. Энэ тохиолдолд сав нь өмчтэй байх ёстой халихтэнцүү далдэсвэл клип

Блок (өргөн: 250px ; хоосон зай : nowrap ; халих : далд ; текст халих : эллипс ; )

CSS дээр олон мөрт текст хийх сонголт

Олон мөрт текстийг тайрах эхний арга бол ашиглах явдал юм CSS шинж чанаруудпсевдо элементүүдийг ашиглах :өмнөТэгээд :дараа. HTML тэмдэглэгээг эхлүүлцгээе

Тэгээд одоо өмч нь өөрсдөө

Хайрцаг ( халих : нуугдмал ; өндөр : 200 пиксел ; өргөн : 300 пиксел ; шугамын өндөр : 25 пиксел ; ) . хайрцаг : өмнө ( агуулга : "" ; хөвөх : зүүн ; өргөн : 5 пиксел ; өндөр : 200 пиксел ; ) .box > * : эхний -хүүхэд (хөвөгч : баруун ; өргөн : 100% ; зүүн талын зах : -5px ; ) .box :дараа ( агуулга : "\02026" ; хайрцагны хэмжээ : контент хайрцаг ; хөвөгч : баруун ; байрлал : харьцангуй ; дээд : -25px width : 3em padding-right : 5px background-size : 100% 100% (255, 255, 0), цагаан 50%;

Өөр нэг арга бол баганын өргөнийг ашиглах явдал бөгөөд бид олон мөрт текстийн баганын өргөнийг тохируулдаг. Гэхдээ энэ аргыг хэрэглэх үед төгсгөлд нь эллипс тавих боломжгүй болно. HTML:

Блок ( халих : далд ; өндөр : 200 пиксел ; өргөн : 300 пиксел ; ) .block__inner (-webkit-баганын өргөн: 150 пиксел; -moz-баганын өргөн: 150px; баганын өргөн: 150px; өндөр:% ;10)

Хөтөчүүдэд зориулсан CSS ашиглан олон мөрт текстийг шийдвэрлэх гуравдахь арга бий Webkit. Үүнд бид угтвар бүхий хэд хэдэн тодорхой шинж чанарыг ашиглах шаардлагатай болно -вебкит. Хамгийн гол нь -webkit-line-clamp нь блок дотор гарах мөрийн тоог зааж өгөх боломжийг олгодог. Шийдэл нь үзэсгэлэнтэй боловч хязгаарлагдмал хөтчүүдийн бүлэгт ажилладаг тул хязгаарлагдмал юм

Блок (халих: далд; текст халих: эллипс; дэлгэц: -webkit-box; -webkit-line-хавч: 2; -webkit-box-orient: босоо;)

JavaScript дахь олон мөрт текстийн сонголт

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

var блок = баримт бичиг. querySelector(".block"), текст = блок. innerHTML, клон = баримт бичиг. createElement("div");

клон хэв маяг. байрлал = "үнэмлэхүй";

(функц ($ ) ( var truncate = функц (el ) ( var текст = эл . текст (), өндөр = эл . өндөр (), клон = эл . клон (); клон . css (( байрлал : "үнэмлэхүй" , харагдах байдал : "далд" , өндөр : "авто" ) ) ( клон . текст ( текст . дэд мөр ( 0 , l ) + "..." ); эл . текст ( клон . устгах ( ) ); ( үүнийг буцаана уу. тус бүр (функц () ( тайрах ( $ ( энэ ) ); ) ( jQuery ));

Асуудал

Булангийн булангуудыг огтлох нь зүгээр л нэг зүйл биш юм хурдан аргазорилгодоо хүрэхийн зэрэгцээ хэвлэх загвар болон вэб дизайны аль алинд нь түгээмэл загварчлалын сонголт юм. Ихэнхдээ энэ нь савны нэг буюу хэд хэдэн буланг 45 ° өнцгөөр огтлох явдал юм. IN сүүлийн үед, skeuomorphism хавтгай дизайн газар алдаж эхэлсэн гэдгийг улмаас, Энэ нөлөө, ялангуяа алдартай. Булангийн булангуудыг зөвхөн нэг талаас нь зүсэж, булан бүр нь элементийн өндрийн 50% -ийг эзэлдэг бол энэ нь сум хэлбэртэй хэлбэрийг бий болгодог бөгөөд энэ нь мөн товчлуурууд болон Breadcrumb навигацийн элементүүдийн дизайнд ихэвчлэн ашиглагддаг.

Гэсэн хэдий ч CSS-д энэ эффектийг энгийн, энгийн нэг давхаргаар бий болгох хангалттай хэрэгсэл байхгүй хэвээр байна. Үүнээс болж олон хөгжүүлэгчид ашиглах хандлагатай байдаг дэвсгэр зураг: Зүссэн булангуудыг гурвалжингаар хучих (нэг өнгөт дэвсгэр дээр), эсвэл булангуудыг аль хэдийн зүссэн нэг буюу хэд хэдэн зургийг ашиглан дэвсгэрийг бүхэлд нь үүсгэнэ. Мэдээжийн хэрэг, ийм аргууд нь бүрэн уян хатан биш, засвар үйлчилгээ хийхэд хэцүү, нэмэлт HTTP хүсэлтүүд болон вэбсайтын файлуудын нийт хэмжээ зэргээс шалтгаалан хоцролтыг нэмэгдүүлдэг.

Таслагдсан булан нь (хагас тунгалаг Хай & Номын талбарын зүүн доод талд) загварт төгс тохирох вэб сайтын жишээ.

Шийдэл

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

Бид зүссэн буланг үүсгэхийн тулд ил тод бүдгэрүүлсэн хүрээ нэмж, мөн ижил байрлалд байгаа өөр нэг бүдгэрч буй хүрээг нэмж, арын дэвсгэрт тохирсон өнгөтэй болгоно. CSS код дараах байдалтай байна (15px булангийн хувьд):

дэвсгэр: #58a;
дэвсгэр:шугаман-градиент(-45deg, ил тод 15px, #58a 0);

Энгийн, тийм үү? Та үр дүнг зургаас харж болно.

Техникийн хувьд бидэнд эхний зарлал ч хэрэггүй. Бид үүнийг зөвхөн тойрон гарах арга болгон нэмсэн: хэрэв CSS градиентууд дэмжигдээгүй бол хоёр дахь мэдэгдлийг үл тоомсорлох тул бид ядаж нэг өнгийн дэвсгэр авах болно. Одоо бидэнд хоёр зүссэн булан хэрэгтэй гэж үзье, доод буланг хоёуланг нь хэлье. Үүнийг зөвхөн нэг градиентээр хийх боломжгүй тул бидэнд хоёр хэрэгтэй болно. Таны анхны бодол иймэрхүү байж магадгүй:

дэвсгэр: #58a;
дэвсгэр: шугаман-градиент(-45 градус, тунгалаг 15px, #58a 0), шугаман-градиент(45 градус, ил тод 15px, #655 0);

Гэсэн хэдий ч энэ нь ажиллахгүй байна. Анхдагч байдлаар, градиент хоёулаа элементийн талбайг бүхэлд нь эзэлдэг тул бие биенээ далдалдаг. Бид тэдгээрийг арын хэмжээсийг ашиглан элемент бүрийг хагасаар нь хязгаарлаж жижиг болгох хэрэгтэй:
дэвсгэр: #58a;

дэвсгэрийн хэмжээ: 50% 100%;

Та үр дүнг зургаас харж болно.

Хэдийгээр бид background-size-г ашигласан ч градиентууд хоорондоо давхцсан хэвээр байна. Шалтгаан нь бид арын давталтыг унтраахаа мартсан тул арын дэвсгэр бүрийг хоёр удаа давтана. Үүний үр дүнд нэг дэвсгэр нь нөгөөг нь далдалсан хэвээр байгаа ч энэ удаад давтагдах замаар. Шинэ хувилбаркод нь иймэрхүү харагдаж байна:
дэвсгэр: #58a;
дэвсгэр: шугаман-градиент(-45 градус, тунгалаг 15px, #58a 0) баруун, шугаман-градиент(45 градус, тунгалаг 15px, #655 0) зүүн;
дэвсгэрийн хэмжээ: 50% 100%;

Та үр дүнг зурган дээрээс харж, эцэст нь байгаа эсэхийг шалгаарай! - ажилладаг! Энэ эффектийг дөрвөн өнцөгт хэрхэн яаж хэрэглэхийг та аль хэдийн таамагласан байх. Танд дараахтай төстэй дөрвөн градиент ба код хэрэгтэй болно.

дэвсгэр: #58a;
дэвсгэр: шугаман-градиент(135 градус, тунгалаг 15px, #58a 0) зүүн дээд,

шугаман-градиент(-135 градус, тунгалаг 15px, #655 0) баруун дээд,

шугаман-градиент(-45 градус, тунгалаг 15px, #58a 0) баруун доод,

шугаман-градиент(45 градус, тунгалаг 15px, #655 0) зүүн доод;
дэвсгэрийн хэмжээ: 50% 50%;
дэвсгэр давталт: давтагдахгүй;

ЗӨВЛӨГӨӨ
Бид дибаг хийхэд хялбар болгохын тулд өөр өөр өнгө (#58a ба #655) ашигласан. Практикт градиент хоёулаа ижил өнгөтэй байх болно.
Гэхдээ өмнөх кодтой холбоотой асуудал нь түүнийг хадгалахад хэцүү байдаг. Арын өнгийг өөрчлөхийн тулд таван засвар, өнцгийн утгыг өөрчлөхийн тулд дөрвөн засвар хийх шаардлагатай. Урьдчилан боловсруулагч ашиглан хийсэн холигч нь давталтын тоог бууруулж чадна. Энэ код нь SCSS дээр иймэрхүү харагдах болно:
SCSS
@mixin налуу булангууд($бг,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
дэвсгэр: $bg;
дэвсгэр:
шугаман-градиент(135 градус, тунгалаг $tl, $bg 0)
зүүн дээд,
шугаман-градиент(225 градус, тунгалаг $tr, $bg 0)
баруун дээд,
шугаман-градиент(-45 градус, тунгалаг $br, $bg 0)
баруун доод,
шугаман-градиент(45 градус, тунгалаг $bl, $bg 0)
зүүн доод;
дэвсгэрийн хэмжээ: 50% 50%;
дэвсгэр давталт: давтагдахгүй;
}

Дараа нь үүнийг шаардлагатай үед 2-5 аргументтай доор харуулсны дагуу дуудаж болно.
SCSS
@include налуу булангуудыг(#58a, 15px, 5px);
Энэ жишээнд бид зүүн дээд ба баруун доод булангуудыг 15px, баруун дээд ба зүүн доод булангуудыг 5px-аар багасгасан элементтэй болох бөгөөд энэ нь хүрээ-радиусыг зааж өгөх үед хэрхэн ажилладагтай адил юм. дөрөвөөс бага утга. Энэ нь боломжтой, учир нь бид SCSS холимог дахь аргументуудын анхдагч утгуудыг анхаарч үзсэн - тийм ээ, эдгээр анхдагч утгууд нь бусад аргументуудад ч хамаатай.
ӨӨРӨӨ ОРОЛДОЖ ҮЗЭЭРЭЙ!
http://play.csssecrets.io/bevel-csssecrets-gradients

Муруй зүссэн булангууд

Вэбсайт дээр муруй зүссэн буланг ашиглах гайхалтай жишээ. http://g2geogeske.comдизайнер нь тэдгээрийг дизайны гол элемент болгосон: тэдгээр нь навигац, агуулга, тэр ч байтугай хөл хэсэгт байдаг.
Градиент бүхий аргын хувилбар нь муруй зүсэгдсэн булангуудыг үүсгэх боломжийг олгодог - энэ нь бөөрөнхий булангийн урвуу хувилбар шиг харагддаг тул олон хүмүүс "дотоод хилийн радиус" гэж нэрлэдэг. Цорын ганц ялгаа нь шугаман бус радиаль градиент ашиглах явдал юм.
дэвсгэр: #58a;
дэвсгэр: радиаль-градиент(зүүн дээд талд тойрог, ил тод 15px, #58a 0) зүүн дээд,

радиаль-градиент(баруун дээд талд тойрог, тунгалаг 15px, #58a 0) баруун дээд,

радиаль-градиент(баруун доод талд тойрог, тунгалаг 15px, #58a 0) баруун доод,

радиаль-градиент(зүүн доод талд тойрог, ил тод 15px, #58a 0) зүүн доод;
дэвсгэрийн хэмжээ: 50% 50%;
дэвсгэр давталт: давтагдахгүй;

Өмнөх аргын нэгэн адил өнцгийн хэмжээг өнгөний шилжилтийн хилийн байрлалаар хянах боломжтой бөгөөд холигч нь энэ кодыг цаашдын засвар үйлчилгээ хийхэд илүү тохиромжтой болгож чадна.

ӨӨРӨӨ ОРОЛДОЖ ҮЗЭЭРЭЙ!
http://play.csssecrets.io/scoop-corners

SVG мөр болон хилийн дүрс бүхий шийдэл

Градиент дээр суурилсан шийдэл нь ажиллаж байгаа хэдий ч энэ нь хэд хэдэн сул талуудтай:
Код нь маш урт бөгөөд давталтаар дүүрэн байдаг. Хамгийн түгээмэл тохиолдолд бид бүх дөрвөн буланг ижил хэмжээгээр тайрах шаардлагатай бол энэ хэмжээг өөрчлөх нь кодыг дөрвөн удаа өөрчлөхөд хүргэдэг.

Үүний нэгэн адил дэвсгэрийн өнгийг өөрчлөхөд дөрвөн засвар хийх шаардлагатай бөгөөд хэрэв та нөөцийн шийдлийг харгалзан үзвэл бүх тав; Зүссэн булангийн хэмжээг өөрчлөх нь үнэхээр хэцүү бөгөөд зарим хөтөч дээр энэ нь огт боломжгүй юм. Аз болоход, хүссэн үр дүнгээс хамааран бид хэд хэдэн аргыг ашиглаж болно. Тэдгээрийн нэг нь нэгдмэл байдалтай холбоотой хилийн зурагбулангуудыг үүсгэсэн SVG кодтой.

Энэ нь хэрхэн ажилладагийг мэдэх хилийн зураг(хэрэв та энэ мэдлэгийг ой санамждаа сэргээх шаардлагатай бол танд зөвлөгөө өгөх болно), шаардлагатай зүйл ямар байх ёстойг та төсөөлж байна уу? SVG- код?

Ерөнхий хэмжээс нь бидний хувьд чухал биш тул (хязгаарлалтын зураг нь масштабыг анхаарч үзэх бөгөөд SVG зургууд нь хэмжээнээс үл хамааран төгс масштабтай байдаг - адислагдсан байх болтугай. вектор график!), илүү тохиромжтой, богино утгуудтай ажиллахын тулд бүх хэмжээг нэг хэмжээтэй тэнцүүлж болно. Зүссэн булангийн утга нь нэгтэй тэнцүү байх ба шулуун талууд нь нэгтэй тэнцүү байх болно. Үр дүн (харахад хялбар болгох үүднээс томруулсан). Үүнд шаардлагатай кодыг доор харуулав.
хил: 15px хатуу тунгалаг;


өргөн=”3″ өндөр=”3″ дүүргэх=”%2358a”>\
\
’);

Зүсэх алхамын хэмжээ 1 гэдгийг анхаарна уу. Энэ нь 1 пиксел гэсэн үг биш юм; Бодит хэмжээ нь SVG файлын координатын системээр тодорхойлогддог (тиймээс бидэнд нэгж байхгүй). Хэрэв бид хувь хэмжээг ашигласан бол 33.34% гэх мэт бутархай утгатай зургийн 1/3-ийг авах шаардлагатай болно. Ойролцоогоор үнэлэмжид хандах нь үргэлж эрсдэлтэй байдаг өөр өөр хөтөчУтгыг янз бүрийн нарийвчлалтайгаар дугуйлж болно. Мөн SVG файлын координатын систем дэх өөрчлөлтийн нэгжийг баримталснаар бид энэ бүх дугуйрсан толгойн өвчнөөс өөрийгөө хамгаалдаг.

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

Нэмж дурдахад, тайрсан булангууд нь өмнөх техниктэй харьцуулахад арай бага болсныг та анзаарсан байх, энэ нь төөрөгдөлд хүргэж болзошгүй юм. Бид хүрээний өргөнийг 15px болгож тохируулсан! Учир нь градиент шийдэлд эдгээр 15 пикселийг градиентийн чиглэлд перпендикуляр градиент шугамын дагуу хэмжсэн явдал юм. Гэхдээ хүрээний өргөнийг диагналаар биш, хэвтээ/босоогоор хэмждэг.

Би үүгээр хаашаа явж байгааг мэдэрч байна уу? Тийм ээ, тийм ээ, дахин бидний идэвхтэй ашигладаг Пифагорын теорем. Зураг дээрх диаграм нь зүйлийг илүү тодорхой болгох ёстой.

Товчхондоо, ижил харааны үр дүнд хүрэхийн тулд градиент аргад ашигладаг хэмжээнээс 2 дахин их хүрээний өргөн хэрэгтэй. IN энэ тохиолдолдЭнэ нь диагональ хэмжээг нандин 15px-д аль болох ойртуулах даалгавартай тулгараагүй л бол энэ нь 20 пикселтэй ойролцоо байх хамгийн боломжийн пиксел байх болно.

хилийн зураг: 1 url(‘өгөгдөл: дүрс/svg+xml,\

өргөн=”3″ өндөр=”3″ дүүргэх=”%2358a”>\

0.2″/>\
’);
дэвсгэр: #58a;
Гэсэн хэдий ч, таны харж байгаагаар үр дүн нь бидний хүлээж байсан шиг тийм биш юм.

Бидний шаргуу зүссэн булангууд хаашаа явсан бэ? Бүү ай, залуу Падаван, булангууд нь хэвээр байна. Хэрэв та #655 гэх мэт өөр дэвсгэр өнгө тохируулбал юу болсныг шууд ойлгох болно.
Доорх зургаас харахад бидний булангууд алга болсон шалтгаан нь арын дэвсгэртэй холбоотой юм: бидний дээр тодорхойлсон арын дэвсгэр нь тэднийг зүгээр л бүрхэж байна. Энэхүү таагүй байдлыг арилгахын тулд бидний хийх ёстой зүйл бол арын дэвсгэрийг хүрээний хэсэгт мөлхөхөөс сэргийлэхийн тулд арын клип ашиглах явдал юм.
хил: 20px хатуу тунгалаг;
хилийн зураг: 1 url(‘өгөгдөл: дүрс/svg+xml,\

өргөн=”3″ өндөр=”3″ дүүргэх=”%2358a”>\

0.2″/>\
’);
дэвсгэр: #58a;

Одоо асуудал шийдэгдэж, манай талбай яг өмнөх шигээ харагдаж байна. Нэмж хэлэхэд, энэ удаад бид булангийн хэмжээг зөвхөн нэг засвараар хялбархан өөрчлөх боломжтой: хүрээний өргөнийг тохируулахад л хангалттай. Хүрээний өргөн нь хөдөлгөөнт дүрсийг дэмждэг тул бид энэ эффектийг ч хөдөлгөж чадна!

Арын дэвсгэрийг өөрчлөхөд таван биш хоёр засвар хийх шаардлагатай. Нэмж дурдахад, бидний дэвсгэр нь буланд үзүүлсэн эффектээс хамаардаггүй тул ирмэгийн өнгө #58a хэвээр байвал бид түүнд градиент эсвэл өөр ямар нэгэн хэв маяг өгч болно.

Жишээлбэл, бид hsla(0,0%,100%,.2)-аас ил тод хүртэл радиаль градиент ашигладаг. Шийдэх ганц жижиг асуудал үлдлээ. Хэрэв хилийн дүрсийг дэмждэггүй бол буцах шийдэл нь огтлолтгүй булангаар хязгаарлагдахгүй. Арын дэвсгэр нь тайрагдсан тул талбайн ирмэг ба түүний агуулга хоорондын зай бага байх болно. Үүнийг засахын тулд бид арын дэвсгэр дээр ашигладаг хүрээний өнгийг тодорхойлох хэрэгтэй.
хил: 20px хатуу #58a;
хилийн зураг: 1 url(‘өгөгдөл: дүрс/svg+xml,\

өргөн=”3″ өндөр=”3″ дүүргэх=”%2358a”>\
\
’);
дэвсгэр: #58a;
background-clip: padding-box;

Бидний тодорхойлолт байгаа хөтөч дээр хилийн зурагдэмжигдсэн тохиолдолд энэ өнгийг үл тоомсорлох боловч хилийн зураг амжилтгүй болсон тохиолдолд нэмэлт хүрээний өнгө нь илүү гоёмсог шийдлийг өгөх болно. Үүний цорын ганц дутагдал нь дэвсгэрийн өнгийг өөрчлөхөд шаардагдах засварын тоог гурав болгож нэмэгдүүлэх явдал юм.
ӨӨРӨӨ ОРОЛДОЖ ҮЗЭЭРЭЙ!
http://play.csssecrets.io/bevel-corners

Таслах замын шийдэл

Хэдийгээр хилийн зургийн шийдэл нь маш авсаархан бөгөөд DRY зарчмуудыг сайн баримталдаг боловч тодорхой хязгаарлалт тавьдаг. Жишээлбэл, бидний дэвсгэр нь бүхэлдээ, эсвэл ядаж ирмэгийн дагуу хатуу өнгөөр ​​дүүрэн байх ёстой.

Хэрэв бид бүтэц, хэв маяг, шугаман градиент гэх мэт өөр төрлийн дэвсгэр ашиглахыг хүсвэл яах вэ? Ийм хязгаарлалтгүй өөр нэг арга бий, гэхдээ мэдээжийн хэрэг үүнийг ашиглахад тодорхой хязгаарлалтууд байдаг.

Эд хөрөнгийг санаарай клипний зам"Ромбыг хэрхэн яаж хийх вэ" гэсэн нууцаас? CSS хайчлах замууд нь гайхалтай шинж чанартай: тэдгээр нь хувь хэмжээг (бидний элементийн ерөнхий хэмжээсийг тодорхойлдог арга) үнэмлэхүй утгуудтай холих боломжийг олгодог бөгөөд энэ нь гайхалтай уян хатан байдлыг бий болгодог. Жишээлбэл, налуу булантай (хэвтээ байдлаар хэмжсэн) 20px хэмжээтэй тэгш өнцөгт болгон элементийг тайрах хайчлах замын код дараах байдалтай байна:
дэвсгэр: #58a;
клипийн зам: олон өнцөгт (
20px 0, calc(100% - 20px) 0, 100% 20px,
100% тооцоолол (100% - 20 пиксел), тооцоолол (100% - 20 пиксел) 100%,
20px 100%, 0 кальц(100% - 20px), 0 20px);
Хэдий богино боловч энэ код нь DRY зарчмуудыг дагаж мөрддөггүй бөгөөд хэрэв та урьдчилан боловсруулагч ашиглаагүй бол энэ нь хамгийн том бэрхшээлүүдийн нэг болно. Үнэн хэрэгтээ энэ код нь булангийн хэмжээг өөрчлөхийн тулд найман (!) засвар хийх шаардлагатай тул энэ номонд үзүүлсэн бүх цэвэр CSS шийдлүүдийн WET зарчмын хамгийн сайн дүрслэл юм.

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

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

ӨӨРӨӨ ОРОЛДОЖ ҮЗЭЭРЭЙ!
http://play.csssecrets.io/bevel-corners-clipped

ИРЭЭДҮЙН ЗАСАЛТЫН БУЛАНгууд
Ирээдүйд бид CSS градиент, хайчлах, эсвэл SVG ашиглах шаардлагагүй болно. Шинэ өмч булангийн хэлбэр,орсон CSS дэвсгэр ба хилийн түвшин 4 , биднийг энэ толгойн өвчнөөс аврах болно Энэ нь тариалалтын хэмжээг тодорхойлоход шаардлагатай хилийн радиусын шинж чанартай хослуулан өөр өөр хэлбэрт зүсэгдсэн булангуудын нөлөөг бий болгоход ашиглагдах болно. Жишээлбэл, зургийн бүх тал дээр 15px зүссэн буланг дүрслэхийн тулд дараах энгийн код хангалттай.

хилийн радиус: 15px;
булангийн хэлбэр: налуу;

Мөн уншина уу

Влад Мержевич

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

Бодит байдал дээр энэ бүхэн нь нуугдмал утга бүхий overflow шинж чанарыг ашиглахтай холбоотой юм. Ялгаа нь зөвхөн бидний текстийг өөр өөр харуулахад л оршдог.

Халихыг ашиглаж байна

Overflow шинж чанар нь текстээрээ өөрийгөө харуулахын тулд nowrap гэсэн утгатай хоосон зайг ашиглан текстийг задлах хэрэгтэй. Хэрэв энэ нь хийгдээгүй бол бидэнд шаардлагатай эффект гарахгүй бөгөөд текст дээр зураас нэмж, текстийг бүхэлд нь харуулах болно. Жишээ 1-д заасан загварын шинж чанаруудтай урт текстийг хэрхэн тайрахыг харуулав.

Жишээ 1. Текстийн халилт

HTML5 CSS3 IE Cr Op Sa Fx

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 1.

Цагаан будаа. 1. Overflow шинж чанарыг хэрэглэсний дараа текстийн харагдах байдал

Зургаас харахад ерөнхийдөө нэг сул тал бий - текст нь үргэлжлэлтэй байх нь тодорхойгүй байгаа тул хэрэглэгчдэд энэ талаар мэдэгдэх ёстой. Үүнийг ихэвчлэн градиент эсвэл эллипс ашиглан хийдэг.

Текстэнд градиент нэмэх

Баруун талд байгаа текст дуусахгүй гэдгийг илүү тодорхой болгохын тулд та тунгалаг өнгөнөөс арын өнгө хүртэл градиентийг давхарлаж болно (Зураг 2). Энэ нь текстийг аажмаар татан буулгах нөлөөг бий болгоно.

Цагаан будаа. 2. Градиент текст

Жишээ 2 нь энэ эффектийг хэрхэн үүсгэхийг харуулж байна. Элементийн хэв маяг нь бараг ижил хэвээр байх боловч бид :: дараа нь псевдо элемент болон CSS3 ашиглан градиентыг өөрөө нэмнэ. Үүнийг хийхийн тулд бид контентын өмчөөр хоосон псевдо-элемент оруулж, гол хөтчүүдэд өөр өөр угтвар бүхий градиент хэрэглэнэ (жишээ 2). Градиентын өргөнийг width ашиглан хялбархан өөрчилж болно, мөн та 0.2 утгыг өөрийнхөөрөө сольж ил тод байдлын зэргийг тохируулж болно.

Жишээ 2: Текст дээрх градиент

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Дотор салангид арпеджио нь полиссерийг хувиргадаг бөгөөд энэ нь супер полифоник даавуунд нэг удаагийн босоо тэнхлэг юм.

Энэ арга нь ажиллахгүй байна Интернет хөтөч Explorer 8.0 хүртэлх хувилбар, учир нь энэ нь градиентийг дэмждэггүй. Гэхдээ та CSS3-аас татгалзаж, PNG-24 форматтай зургаар хуучин хэв маягаар градиент хийж болно.

Энэ аргыг зөвхөн энгийн дэвсгэртэй хослуулж болох бөгөөд дэвсгэр зургийн хувьд текстийн дээд талд байрлах градиент мэдэгдэхүйц байх болно.

Текстийн төгсгөлд эллипс

Та мөн градиентийн оронд тайрсан текстийн төгсгөлд эллипс ашиглаж болно. Түүнчлэн, энэ нь text-overflow шинж чанарыг ашиглан автоматаар нэмэгдэх болно. IE-ийн хуучин хувилбаруудыг оруулаад бүх хөтөч үүнийг ойлгодог бөгөөд энэ өмчийн цорын ганц дутагдал нь түүний статус одоогоор тодорхойгүй байгаа явдал юм. CSS3 нь энэ өмчийг багтаасан бололтой, гэхдээ үүнтэй хамт байгаа код нь баталгаажуулалтыг давж чадахгүй.

3-р жишээ нь эллипс нэмдэг утгын эллипс бүхий text-overflow шинж чанарыг ашиглахыг харуулж байна. Текст дээр хулганаа аваачихад бүхэлд нь харуулж, дэвсгэр өнгөөр ​​тодруулна.

Жишээ 3: Текст халих аргыг ашиглах

HTML5 CSS3 IE Cr Op Sa Fx

Ухаангүй байдал нь эсрэг тэсрэг байдлыг үүсгэдэг бөгөөд үүнийг Ли Росс олон туршилтаас харж болох үндсэн хамаарлын алдаа гэж тодорхойлсон.

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 3.

Цагаан будаа. 3. Зууван хэлбэртэй бичвэр

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