การตัดข้อความเดี่ยวหรือหลายบรรทัดตามความสูงโดยเติมจุดไข่ปลา วิธีตัดบรรทัดยาวด้วยจำนวนอักขระ css และ js วิธีแก้ปัญหา วิธีแก้ปัญหาสำหรับข้อความหลายบรรทัด

การเพิ่มจุดไข่ปลาที่ส่วนท้ายของข้อความสามารถทำได้หลายวิธี โดยใช้ CSS และ js ของเรา

ก่อนอื่นเรามาดูปัญหากันก่อน มีเครื่องหมายบล็อก

• ข้อความที่น่าสนใจมากมายเกี่ยวกับสไตล์ เลย์เอาต์ การเขียนโปรแกรม และสิ่งที่น่าสนใจอื่นๆ อีกมากมายเกี่ยวกับเว็บไซต์


• แต่เราจะใส่จุดไข่ปลาได้อย่างไรหากเราไม่สามารถจำกัดขนาดบล็อกได้


• แล้วสคริปต์ js ล่ะ? เขาสามารถทำได้ใช่มั้ย?


• อืม ทำได้แน่นอน เก็บโค้ดไว้ที่นี่ มันจะนับอักขระ Unicode และตัดแต่งหากจำเป็น

ตอนนี้คุณต้องบรรลุเอฟเฟกต์ของการตัดข้อความในแต่ละองค์ประกอบของรายการ นอกจากนี้คุณต้องเพิ่มจุดไข่ปลาด้วย

เมื่อต้องการทำเช่นนี้ เรามาสร้างสไตล์สำหรับคลาส tit กันดีกว่า
.หัวนม(
พื้นที่สีขาว: nowrap; /* ยกเลิกการตัดข้อความ */
ล้น: ซ่อนเร้น; /* ตัดเนื้อหา */
ช่องว่างภายใน: 5px; /* ช่องข้อมูล */
ข้อความล้น: จุดไข่ปลา; /* จุดไข่ปลา */
}

ลักษณะเฉพาะของโซลูชันนี้คือ หากข้อความพอดีกับขนาดบล็อก ก็จะไม่มีการเพิ่มจุดไข่ปลา ซึ่งไม่ใช่วิธีแก้ปัญหาเสมอไป

บ่อยครั้งที่คุณต้องตัดข้อความให้มีความยาวแล้วจึงเพิ่มจุดเท่านั้น
นอกจากนี้ยังมีงานเมื่อจำเป็นต้องเพิ่มจุดไม่ว่าในกรณีใด ๆ (ไม่ว่าข้อความจะยาวแค่ไหนก็ตามอย่างน้อย 3 ตัวอักษร) และหากข้อความยาวเกินขนาดที่กำหนด ก็จำเป็นต้องตัดออก ในกรณีนี้จำเป็นต้องใช้สคริปต์

ชื่อฟังก์ชัน() (
องค์ประกอบต่างๆ, ขนาด, ข้อความ;
var elem = document.getElementsByClassName("tit");
ข้อความ var = elem.innerHTML;
ขนาดวาร์ = 75;
วาร์ n = 70;
สำหรับ (var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
ถ้า(องค์ประกอบ[i].innerHTML.length > ขนาด) (
ข้อความ = องค์ประกอบ [i] .innerHTML.substr (0, n);
}
อื่น(
ข้อความ = องค์ประกอบ [i] .innerHTML;
}
องค์ประกอบ[i].innerHTML = ข้อความ + "...";
}
}
ชื่อ();

เราบอกสคริปต์ว่าองค์ประกอบใดที่ต้องได้รับการประมวลผล
เมื่อต้องการทำเช่นนี้ ในบรรทัด var elem = document.getElementsByClassName("tit"); ระบุคลาสขององค์ประกอบ (ต้องเหมือนกัน)

จากนั้นคุณจะต้องกำหนดขนาดของข้อความก่อนที่จะตัด นี่คือบรรทัดสั้นๆ ของเราที่จะเพิ่มจุดไข่ปลา ตัวแปร var size = 75 มีหน้าที่รับผิดชอบในเรื่องนี้

ตอนนี้สคริปต์ควรผ่านองค์ประกอบทั้งหมดที่มีคลาสที่ต้องการและเพิ่มจุดไข่ปลา
สคริปต์จะตรวจสอบความยาวของแต่ละบรรทัดและตัดทอนข้อความหากเกิน 75 อักขระ หากความยาวน้อยกว่า ก็ให้เพิ่มจุดไข่ปลา (บรรทัด if(elem[i].innerHTML.length > size))

คุณสามารถดูการทำงานของสคริปต์ได้ในหน้าสาธิต เพียงเท่านี้คุณก็รู้วิธีตัดแต่งแล้ว ข้อความยาววิธีการต่างๆ

เราต้องการให้ทุกอย่างบนเว็บไซต์เรียบร้อยอยู่เสมอ แต่ตัวอย่างเช่น คุณมีบล็อกที่มีข้อความที่ต้องพอดีกับขอบเขตที่กำหนด นี่อาจเป็นการประกาศบทความหรือคำอธิบายของผลิตภัณฑ์ ในขณะเดียวกันเราก็มีข้อความ ความยาวตามใจชอบ- แน่นอน คุณสามารถปรับข้อความให้พอดีกับขนาดของฟิลด์ได้อย่างต่อเนื่อง เพื่อไม่ให้มีสิ่งใดเคลื่อนไหว หรือคุณอาจปรับข้อความให้ซ่อนข้อความเพิ่มเติมก็ได้

มีวิธีแก้ไขปัญหา CSS อย่างง่ายสำหรับสิ่งนี้ การใช้ทรัพย์สิน ข้อความล้น: จุดไข่ปลาซึ่งช่วยให้คุณสามารถตัดแต่งเส้นด้วยการทดสอบแบบยาว เพื่อ การตัดสินใจครั้งนี้ใช้งานได้คุณต้องระบุความกว้างของบล็อกหลักและมีคุณสมบัติ ล้นเท่ากัน ที่ซ่อนอยู่หรือ คลิป.

กล่องข้อความ ( text-overflow: จุดไข่ปลา; // ภาพของบล็อกยาวที่มีข้อความล้น: ซ่อนไว้; // ซ่อนความกว้างของข้อความที่ล้น: 100%; // ความกว้างของบล็อกที่มีข้อความ white-space: nowrap; // ห้าม ตัดข้อความ)

อุปกรณ์และเครื่องมือทั้งหมดของพวกเขายังมีชีวิตอยู่ ในรูปแบบใดรูปแบบหนึ่ง

อุปกรณ์และเครื่องมือทั้งหมดของพวกเขายังมีชีวิตอยู่ ในรูปแบบใดรูปแบบหนึ่ง

แต่หากต้องการตัดข้อความหลายบรรทัดใน CSS คุณจะต้องหันไปใช้องค์ประกอบหลอก :ก่อนและ :หลังจาก.

กล่องข้อความ ( ล้น: ซ่อนไว้; ความสูง: 200px; ความสูงบรรทัด: 25px; ) .box-text:before ( เนื้อหา: ""; ลอย: ซ้าย; ความกว้าง: 5px; ความสูง: 200px; ) .box-text > * :first-child ( float: right; width: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: right; ตำแหน่ง: ด้านบน: -25px; ความกว้าง: 3em; ช่องว่างภายใน: 5px; ขนาดพื้นหลัง: 100%; ไปทางขวา, rgba (255, 255, 255, 0), สีขาว 50%

ด้านซ้ายของป่ามืดมิดอยู่ในเงามืด ด้านขวา เปียก เป็นมันเงา แวววาวกลางแสงแดด พลิ้วไหวตามสายลมเล็กน้อย ทุกอย่างบานสะพรั่ง นกไนติงเกลส่งเสียงร้องและกลิ้งไปมา ใกล้แล้ว อยู่ไกลออกไป

ด้านซ้ายของป่ามืดมิดอยู่ในเงามืด ด้านขวา เปียก เป็นมันเงา แวววาวกลางแสงแดด พลิ้วไหวตามสายลมเล็กน้อย ทุกอย่างบานสะพรั่ง นกไนติงเกลส่งเสียงร้องและกลิ้งไปมา ใกล้แล้ว อยู่ไกลออกไป

การตัดมุมไม่ได้เป็นเพียงเกี่ยวกับ วิธีที่รวดเร็วบรรลุเป้าหมาย แต่ยังเป็นตัวเลือกสไตล์ยอดนิยมทั้งในการออกแบบสิ่งพิมพ์และการออกแบบเว็บไซต์ ส่วนใหญ่มักจะเกี่ยวข้องกับการตัดมุมหนึ่งของภาชนะเป็นมุม 45° เมื่อเร็ว ๆ นี้เนื่องจากข้อเท็จจริงที่ว่า skeuomorphism เริ่มสูญเสียพื้นที่แล้ว การออกแบบแบนเอฟเฟกต์นี้ได้รับความนิยมเป็นพิเศษ เมื่อมุมถูกตัดเพียงด้านเดียวและแต่ละมุมใช้ความสูงขององค์ประกอบถึง 50% มันจะสร้างรูปทรงลูกศร ซึ่งมักใช้ในการออกแบบปุ่มและองค์ประกอบการนำทาง breadcrumb

อย่างไรก็ตาม CSS ยังไม่มีเครื่องมือเพียงพอที่จะสร้างเอฟเฟกต์นี้ด้วยบรรทัดเดียวที่เรียบง่ายและตรงไปตรงมา ด้วยเหตุนี้นักพัฒนาจำนวนมากจึงมักจะใช้ ภาพพื้นหลัง: ปิดมุมที่ตัดด้วยรูปสามเหลี่ยม (บนพื้นหลังสีเดียว) หรือสร้างพื้นหลังทั้งหมดโดยใช้รูปภาพตั้งแต่หนึ่งรูปภาพขึ้นไปที่มุมถูกตัดแล้ว แน่นอนว่าวิธีการดังกล่าวไม่ยืดหยุ่นเลย ดูแลรักษายาก และเพิ่มเวลาแฝงเนื่องจากมีคำขอ HTTP เพิ่มเติมและขนาดโดยรวมของไฟล์เว็บไซต์

ตัวอย่างของเว็บไซต์ที่มุมตัด (ด้านซ้ายล่างของช่องค้นหาและหนังสือแบบกึ่งโปร่งใส) เข้ากับการออกแบบได้อย่างลงตัว

หนึ่ง วิธีแก้ปัญหาที่เป็นไปได้เสนอการไล่ระดับสี CSS อันยิ่งใหญ่ให้กับเรา สมมติว่าเราต้องการเพียงมุมตัดเดียว พูดมุมขวาล่าง เคล็ดลับคือการใช้ประโยชน์จากความสามารถในการไล่ระดับสีเพื่อใช้ทิศทางของมุม (เช่น 45 องศา) และตำแหน่งของขอบเขตการเปลี่ยนสีในค่าสัมบูรณ์ ซึ่งจะไม่เปลี่ยนแปลงเมื่อขนาดโดยรวมขององค์ประกอบที่ พื้นหลังเป็นการเปลี่ยนแปลง จากที่กล่าวมาข้างต้น การไล่ระดับสีเชิงเส้นเพียงครั้งเดียวก็เพียงพอสำหรับเรา

เราจะเพิ่มเส้นขอบจางแบบโปร่งใสเพื่อสร้างมุมตัด และเส้นขอบจางอีกอันในตำแหน่งเดียวกัน แต่มีสีที่ตรงกับพื้นหลัง รหัส CSS จะเป็นดังนี้ (สำหรับมุม 15px):

พื้นหลัง: #58a;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (-45deg, โปร่งใส 15px, #58a 0);

ง่ายใช่มั้ย? คุณสามารถดูผลลัพธ์ได้ในรูป

ในทางเทคนิคแล้ว เราไม่จำเป็นต้องประกาศครั้งแรกด้วยซ้ำ เราเพิ่มมันเป็นวิธีแก้ปัญหาเท่านั้น: หากไม่รองรับการไล่ระดับสี CSS การประกาศครั้งที่สองจะถูกละเว้น ดังนั้นอย่างน้อยเราก็จะได้พื้นหลังสีทึบ ตอนนี้ สมมติว่าเราต้องการมุมตัดสองมุม เช่น มุมล่างทั้งสอง การไล่ระดับสีเพียงครั้งเดียวไม่สามารถทำได้ ดังนั้นเราจึงต้องใช้สองสี ความคิดแรกของคุณอาจเป็นดังนี้:

พื้นหลัง: #58a;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (-45deg, โปร่งใส 15px, #58a 0), การไล่ระดับสีเชิงเส้น (45deg, โปร่งใส 15px, #655 0);

อย่างไรก็ตาม สิ่งนี้ไม่ได้ผล ตามค่าเริ่มต้น การไล่ระดับสีทั้งสองจะใช้พื้นที่ทั้งหมดขององค์ประกอบ ดังนั้นจึงบดบังซึ่งกันและกัน เราต้องทำให้พวกมันเล็กลงโดยจำกัดให้แต่ละองค์ประกอบเหลือเพียงครึ่งหนึ่งโดยใช้ขนาดพื้นหลัง:
พื้นหลัง: #58a;

ขนาดพื้นหลัง: 50% 100%;

คุณสามารถดูผลลัพธ์ได้ในรูป

แม้ว่าเราจะใช้พื้นหลังขนาด การไล่ระดับสียังคงทับซ้อนกัน เหตุผลก็คือเราลืมปิดการทำซ้ำพื้นหลัง ดังนั้นแต่ละพื้นหลังจึงถูกทำซ้ำสองครั้ง ด้วยเหตุนี้ พื้นหลังด้านหนึ่งจึงยังคงบดบังอีกด้านหนึ่ง แต่คราวนี้เป็นการทำซ้ำ เวอร์ชั่นใหม่รหัสมีลักษณะดังนี้:
พื้นหลัง: #58a;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (-45deg, โปร่งใส 15px, #58a 0) ขวา, การไล่ระดับสีเชิงเส้น (45deg, โปร่งใส 15px, #655 0) ซ้าย;
ขนาดพื้นหลัง: 50% 100%;

คุณสามารถเห็นผลลัพธ์ได้ในภาพและให้แน่ใจว่ามันอยู่ที่นั่นในที่สุด! - ได้ผล! คุณคงเดาได้แล้วว่าจะใช้เอฟเฟกต์นี้กับมุมทั้งสี่ได้อย่างไร คุณจะต้องมีสี่การไล่ระดับสีและโค้ดที่คล้ายกับต่อไปนี้:

พื้นหลัง: #58a;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (135deg, โปร่งใส 15px, #58a 0) ซ้ายบน,

การไล่ระดับสีเชิงเส้น (-135deg, โปร่งใส 15px, #655 0) ด้านบนขวา

การไล่ระดับสีเชิงเส้น (-45deg, โปร่งใส 15px, #58a 0) ด้านล่างขวา

การไล่ระดับสีเชิงเส้น (45deg, โปร่งใส 15px, #655 0) ซ้ายล่าง;
ขนาดพื้นหลัง: 50% 50%;
พื้นหลังซ้ำ: ไม่ซ้ำ;

คำแนะนำ
เราใช้สีที่แตกต่างกัน (#58a และ #655) เพื่อให้การแก้ไขข้อบกพร่องง่ายขึ้น ในทางปฏิบัติ การไล่ระดับสีทั้งสองจะเป็นสีเดียวกัน
แต่ปัญหาของโค้ดก่อนหน้านี้คือดูแลรักษายาก ต้องมีการแก้ไขห้าครั้งเพื่อเปลี่ยนสีพื้นหลัง และสี่ครั้งเพื่อเปลี่ยนค่ามุม มิกซ์อินที่สร้างขึ้นโดยใช้ตัวประมวลผลล่วงหน้าสามารถลดจำนวนการทำซ้ำได้ นี่คือลักษณะของโค้ดนี้ใน SCSS:
สสส
@mixin มุมเอียง($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
พื้นหลัง: $bg;
พื้นหลัง:
การไล่ระดับสีเชิงเส้น (135 องศา, โปร่งใส $tl, $bg 0)
ซ้ายบน
การไล่ระดับสีเชิงเส้น (225deg, โปร่งใส $tr, $bg 0)
มุมขวาบน
การไล่ระดับสีเชิงเส้น (-45deg, โปร่งใส $br, $bg 0)
ล่างขวา
การไล่ระดับสีเชิงเส้น (45 องศา, โปร่งใส $bl, $bg 0)
ซ้ายล่าง;
ขนาดพื้นหลัง: 50% 50%;
พื้นหลังซ้ำ: ไม่ซ้ำ;
}

จากนั้นสามารถเรียกได้เมื่อจำเป็น ดังที่แสดงด้านล่าง โดยมีอาร์กิวเมนต์ 2-5 ข้อ:
สสส
@ รวมมุมเอียง (#58a, 15px, 5px);
ในตัวอย่างนี้ เราจะจบลงด้วยองค์ประกอบที่มุมบนซ้ายและล่างขวาถูกตัดออก 15px และมุมบนขวาและซ้ายล่างถูกตัดออก 5px ซึ่งคล้ายกับวิธีการทำงานของรัศมีเส้นขอบเมื่อเราระบุ น้อยกว่าสี่ค่า สิ่งนี้เป็นไปได้เพราะเรายังดูแลค่าเริ่มต้นสำหรับอาร์กิวเมนต์ในมิกซ์ SCSS ของเราด้วย และใช่ ค่าเริ่มต้นเหล่านั้นสามารถอ้างอิงถึงอาร์กิวเมนต์อื่นได้เช่นกัน
ลองด้วยตัวคุณเอง!
http://play.csssecrets.io/bevel-corners-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 จะได้รับการปรับขนาดได้อย่างสมบูรณ์แบบโดยไม่คำนึงถึงขนาด - ขอให้โชคดี กราฟิกแบบเวกเตอร์!) ทุกขนาดสามารถบรรจุเป็นขนาดเดียวได้เพื่อให้ทำงานได้สะดวกยิ่งขึ้นและมีค่าที่สั้นลง ค่าของมุมตัดจะเท่ากับ 1 และด้านตรงก็จะเท่ากับ 1 ด้วย ผลลัพธ์ (ขยายเพื่อให้ดูง่ายขึ้น) รหัสที่จำเป็นสำหรับสิ่งนี้แสดงอยู่ด้านล่าง:
เส้นขอบ: โปร่งใสทึบ 15px;

\
\
’);

โปรดทราบว่าขนาดขั้นตอนการหั่นคือ 1 นี่ไม่ได้หมายถึง 1 พิกเซล; ขนาดจริงถูกกำหนดโดยระบบพิกัดของไฟล์ SVG (ซึ่งเป็นสาเหตุที่เราไม่มีหน่วย) หากเราใช้เปอร์เซ็นต์ เราจะต้องประมาณ 1/3 ของรูปภาพด้วยค่าเศษส่วน เช่น 33.34% การใช้ค่าโดยประมาณมักจะมีความเสี่ยงเสมอ เบราว์เซอร์ที่แตกต่างกันค่าต่างๆ อาจถูกปัดเศษให้มีระดับความแม่นยำที่แตกต่างกัน และด้วยการยึดติดกับหน่วยการเปลี่ยนแปลงในระบบพิกัดของไฟล์ SVG เราก็ช่วยตัวเองให้ไม่ต้องปวดหัวที่มาพร้อมกับการปัดเศษทั้งหมดนั้น

อย่างที่คุณเห็น มีมุมตัด แต่ไม่มีพื้นหลัง ปัญหานี้สามารถแก้ไขได้สองวิธี: กำหนดพื้นหลังหรือเพิ่ม คำหลักกรอกการประกาศเส้นขอบภาพเพื่อไม่ให้องค์ประกอบชิ้นตรงกลางถูกละทิ้ง ในตัวอย่างของเรา เราอยากจะกำหนดพื้นหลังแยกต่างหาก เนื่องจากคำจำกัดความนี้จะทำหน้าที่เป็นวิธีแก้ปัญหาชั่วคราวสำหรับเบราว์เซอร์ที่ไม่สนับสนุนโซลูชันนี้

นอกจากนี้ คุณอาจสังเกตเห็นว่าตอนนี้การตัดมุมมีขนาดเล็กลงกว่าเทคนิคก่อนหน้านี้ ซึ่งอาจทำให้สับสนได้ เราตั้งค่าความกว้างของเฟรมเป็น 15px! เหตุผลก็คือในสารละลายไล่ระดับสี 15 พิกเซลเหล่านี้ถูกวัดตามแนวเส้นไล่ระดับสี ซึ่งตั้งฉากกับทิศทางของการไล่ระดับสี อย่างไรก็ตาม ความกว้างของเฟรมไม่ได้วัดเป็นแนวทแยง แต่วัดเป็นแนวนอน/แนวตั้ง

คุณรู้สึกว่าฉันจะไปที่ไหนกับเรื่องนี้? ใช่ ใช่ เป็นทฤษฎีบทพีทาโกรัสที่แพร่หลายซึ่งเราใช้อย่างแข็งขันอีกครั้ง แผนภาพในรูปควรทำให้สิ่งต่าง ๆ ชัดเจนยิ่งขึ้น

กล่าวโดยย่อ เพื่อให้ได้ผลลัพธ์ภาพเดียวกัน เราจำเป็นต้องมีความกว้างของเส้นขอบเป็น 2 เท่าของขนาดที่เราจะใช้ในวิธีการไล่ระดับสี ในกรณีนี้ มันจะเป็นพิกเซลซึ่งเหมาะสมที่สุดที่จะประมาณ 20px เว้นแต่ว่าเราต้องเผชิญกับภารกิจในการทำให้ขนาดเส้นทแยงมุมใกล้เคียงกับ 15px ที่รักมากที่สุด:

เส้นขอบภาพ: 1 url ('ข้อมูล: รูปภาพ / svg + xml, \
\
\
’);
พื้นหลัง: #58a;
อย่างไรก็ตามอย่างที่คุณเห็นผลลัพธ์ไม่ได้เป็นไปตามที่เราคาดหวังไว้

การตัดมุมอย่างอุตสาหะของเราไปอยู่ที่ไหน? อย่ากลัวเลย หนุ่มปาดาวัน มุมยังอยู่ที่เดิม คุณจะเข้าใจได้ทันทีว่าเกิดอะไรขึ้นหากคุณตั้งค่าสีพื้นหลังอื่น เช่น #655
ดังภาพด้านล่างที่แสดงให้เห็น สาเหตุที่มุมของเราหายไปก็เนื่องมาจากพื้นหลัง: พื้นหลังที่เรากำหนดไว้ด้านบนเป็นเพียงการบดบังมุมเหล่านั้น สิ่งที่เราต้องทำเพื่อกำจัดความไม่สะดวกนี้คือการใช้คลิปพื้นหลังเพื่อป้องกันไม่ให้พื้นหลังคืบคลานอยู่ใต้พื้นที่เฟรม:
เส้นขอบ: โปร่งใสทึบ 20px;
เส้นขอบภาพ: 1 url ('ข้อมูล: รูปภาพ / svg + xml, \
\
\
’);
พื้นหลัง: #58a;

ตอนนี้ปัญหาได้รับการแก้ไขแล้ว และสาขาของเราก็ดูเหมือนเดิมทุกประการ นอกจากนี้ ในครั้งนี้เราสามารถเปลี่ยนขนาดของมุมได้อย่างง่ายดายด้วยการแก้ไขเพียงครั้งเดียว เพียงปรับความกว้างของเฟรม เราสามารถสร้างเอฟเฟกต์นี้ให้เคลื่อนไหวได้เนื่องจากความกว้างของเส้นขอบรองรับแอนิเมชั่น!

และการเปลี่ยนพื้นหลังในตอนนี้จำเป็นต้องมีการแก้ไขสองครั้งแทนที่จะเป็นห้าครั้ง นอกจากนี้ เนื่องจากพื้นหลังของเราไม่ได้ขึ้นอยู่กับเอฟเฟกต์ที่ใช้กับมุม เราจึงสามารถไล่ระดับสีหรือรูปแบบอื่นใดได้ ตราบใดที่สีที่ขอบยังคงเป็น #58a

ตัวอย่างเช่น เราใช้การไล่ระดับสีแบบรัศมีจาก hsla(0,0%,100%,.2) ไปจนถึงแบบโปร่งใส เหลือเพียงปัญหาเล็กๆ น้อยๆ เดียวที่ต้องแก้ไข หากไม่รองรับรูปภาพขอบ โซลูชันสำรองจะไม่ถูกจำกัดอยู่เพียงการไม่มีมุมตัด เนื่องจากพื้นหลังถูกครอบตัด จะมีช่องว่างระหว่างขอบของฟิลด์และเนื้อหาน้อยลง เพื่อแก้ไขปัญหานี้ เราจำเป็นต้องกำหนดสีเดียวกันกับเฟรมที่เราใช้สำหรับพื้นหลัง:
เส้นขอบ: 20px ทึบ #58a;
เส้นขอบภาพ: 1 url ('ข้อมูล: รูปภาพ / svg + xml, \
\
\
’);
พื้นหลัง: #58a;
คลิปพื้นหลัง: ช่องว่างภายใน;

ในเบราว์เซอร์ที่รองรับคำจำกัดความของรูปภาพเส้นขอบ สีนี้จะถูกละเว้น แต่ในกรณีที่รูปภาพของเส้นขอบไม่ทำงาน สีเส้นขอบเพิ่มเติมจะให้โซลูชันทางเลือกที่สวยงามยิ่งขึ้น ข้อเสียเปรียบเพียงอย่างเดียวคือเพิ่มจำนวนการแก้ไขที่จำเป็นในการเปลี่ยนสีพื้นหลังเป็นสามสี
ลองด้วยตัวคุณเอง!
http://play.csssecrets.io/bevel-corners

แม้ว่าโซลูชันภาพเส้นขอบจะมีขนาดกะทัดรัดมากและเป็นไปตามหลักการ DRY เป็นอย่างดี แต่ก็มีข้อจำกัดบางประการ ตัวอย่างเช่น พื้นหลังของเราควรจะยังคงเป็นทั้งหมดหรืออย่างน้อยก็ตามแนวขอบที่เติมด้วยสีทึบ

จะเป็นอย่างไรหากเราต้องการใช้พื้นหลังประเภทอื่น เช่น พื้นผิว รูปแบบ หรือการไล่ระดับสีเชิงเส้น? มีวิธีการอื่นที่ไม่มีข้อจำกัดดังกล่าว แม้ว่าแน่นอนว่ามีข้อจำกัดบางประการในการใช้งานก็ตาม

จำคุณสมบัติคลิปพาธจากความลับ “วิธีทำเพชร” ได้ไหม? เส้นทางการตัด CSS มีคุณสมบัติที่น่าทึ่ง: ช่วยให้คุณสามารถผสมผสานได้ ค่าเปอร์เซ็นต์(ซึ่งเราระบุขนาดโดยรวมขององค์ประกอบ) ด้วยขนาดที่แน่นอน ซึ่งให้ความยืดหยุ่นอย่างเหลือเชื่อ ตัวอย่างเช่น โค้ดสำหรับเส้นทางการตัดที่ครอบตัดองค์ประกอบเป็นสี่เหลี่ยมขนาด 20px โดยมีมุมเอียง (วัดในแนวนอน) จะมีลักษณะดังนี้:
พื้นหลัง: #58a;
คลิปพาธ: รูปหลายเหลี่ยม (
20px 0, คำนวณ (100% - 20px) 0, 100% 20px,
คำนวณ 100% (100% - 20px), คำนวณ (100% - 20px) 100%,
20px 100%, 0 คำนวณ (100% - 20px), 0 20px);
แม้ว่าโค้ดนี้จะสั้น แต่โค้ดชิ้นนี้ไม่เป็นไปตามหลักการ DRY และนี่กลายเป็นหนึ่งในปัญหาที่ใหญ่ที่สุดหากคุณไม่ได้ใช้พรีโปรเซสเซอร์ อันที่จริง รหัสนี้เป็นตัวอย่างที่ดีที่สุดของหลักการ WET ของโซลูชันทั้งหมด CSS บริสุทธิ์นำเสนอในหนังสือเล่มนี้ เนื่องจากหากต้องการเปลี่ยนขนาดของมุม คุณต้องทำการแก้ไขมากถึงแปด (!)

ในทางกลับกัน พื้นหลังสามารถเปลี่ยนได้ด้วยการแก้ไขเพียงครั้งเดียว อย่างน้อยเราก็มีสิ่งนั้น ข้อดีอย่างหนึ่งของวิธีนี้คือเราสามารถใช้พื้นหลังใดๆ ก็ได้ หรือแม้แต่ครอบตัดองค์ประกอบทดแทน เช่น รูปภาพ ก็ได้ ภาพประกอบแสดงภาพที่มีสไตล์โดยใช้มุมตัด ไม่มีวิธีการใดก่อนหน้านี้ที่สามารถบรรลุผลนี้ได้ นอกจากนี้ คุณสมบัติคลิปพาธยังรองรับภาพเคลื่อนไหว และเราไม่สามารถสร้างภาพเคลื่อนไหวได้ไม่เพียงแต่การเปลี่ยนแปลงขนาดของมุมเท่านั้น แต่ยังรวมถึงการเปลี่ยนระหว่างรูปร่างต่างๆ อีกด้วย

สิ่งที่คุณต้องทำคือใช้เส้นทางการตัดอื่น นอกเหนือจากความละเอียดและการรองรับเบราว์เซอร์ที่จำกัดแล้ว ข้อเสียของวิธีแก้ปัญหานี้คือ หากเราไม่ตรวจสอบให้แน่ใจว่าช่องว่างภายในนั้นกว้างเพียงพอ ข้อความก็จะถูกตัดออกเช่นกัน เนื่องจากการครอบตัดองค์ประกอบไม่ได้ใช้องค์ประกอบใดๆ เลย เข้าบัญชี ในทางตรงกันข้าม วิธีการไล่ระดับสีช่วยให้ข้อความขยายเกินมุมตัดได้ (เนื่องจากเป็นเพียงส่วนหนึ่งของพื้นหลัง) และวิธีการเส้นขอบรูปภาพก็ทำงานในลักษณะเดียวกับเส้นขอบปกติ โดยจะล้อมข้อความด้วยเส้นขอบใหม่ เส้น.

ลองด้วยตัวคุณเอง!
http://play.csssecrets.io/bevel-corners-clipped

มุมตัดในอนาคต
ในอนาคต เพื่อที่จะตระหนักถึงผลกระทบของการตัดมุม เราจะไม่ต้องหันไปพึ่งมัน การไล่ระดับสี CSS, การตัดหรือ SVG คุณสมบัติรูปทรงมุมใหม่ซึ่งรวมอยู่ใน CSS พื้นหลังและเส้นขอบระดับ 4 จะช่วยเราจากอาการปวดหัวนี้ โดยจะใช้เพื่อสร้างเอฟเฟกต์ของมุมที่ตัดเป็นรูปร่างต่างๆ ร่วมกับคุณสมบัติเส้นขอบรัศมีซึ่งจำเป็น กำหนดปริมาณการปลูกพืช ตัวอย่างเช่น หากต้องการอธิบายมุมที่ตัดขนาด 15px ในทุกด้านของรูปภาพ โค้ดง่ายๆ ต่อไปนี้ก็เพียงพอแล้ว:

รัศมีเส้นขอบ: 15px;
รูปร่างมุม: เอียง;

สวัสดีทุกคน ฉันชื่อ Anna Blok และวันนี้เราจะมาพูดถึงวิธีการครอบตัดรูปภาพโดยไม่ต้องใช้โปรแกรมกราฟิก

ก่อนอื่น บนไซต์ที่เนื้อหาที่มีรูปภาพมีแนวโน้มที่จะไม่ถูกครอบตัดสำหรับบล็อกใดบล็อกหนึ่งโดยเฉพาะ

ตัวอย่างที่เด่นชัด: บล็อกบน WordPress

สมมติว่าคุณต้องการให้ปกบทความของคุณมีอัตราส่วน 1:1 (สี่เหลี่ยมจัตุรัส) การกระทำของคุณ:

เมื่อคุณเยี่ยมชมเว็บไซต์ คุณจะเห็นผลลัพธ์ที่คุณคาดหวัง

แต่สมมติว่าคุณลืมครอบตัดรูปภาพใน Photoshop และดาวน์โหลดรูปภาพแบบสุ่มเป็นหน้าปกจากอินเทอร์เน็ต แล้วจะเกิดอะไรขึ้น! ถูกต้องเค้าโครงจะพัง และหากคุณไม่ได้ใช้ CSS เลย รูปภาพ HD ก็สามารถบล็อกการดูข้อความทั้งหมดได้อย่างสมบูรณ์ ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องทราบวิธีการครอบตัดรูปภาพโดยใช้สไตล์ CSS

มาดูสถานการณ์ต่างๆ ว่าสามารถนำสิ่งนี้ไปใช้อย่างไร ไม่เพียงแต่โดยใช้ CSS แต่ยังรวมถึง SVG ด้วย

ลองครอบตัดรูปภาพที่วางโดยใช้ภาพพื้นหลัง มาสร้างมาร์กอัป HTML กันหน่อย

มาดูสไตล์ CSS กันดีกว่า เมื่อใช้ background-image เราจะเพิ่มรูปภาพ ระบุเฟรมสำหรับรูปภาพของเรา จัดกึ่งกลางรูปภาพโดยใช้ตำแหน่งพื้นหลัง และตั้งค่าขนาดพื้นหลัง:

JPG);

ตำแหน่งพื้นหลัง: กึ่งกลาง;

ความกว้าง:300px;

นอกจากนี้เรายังจะจัดกึ่งกลางภาพของเราให้สัมพันธ์กับวัตถุที่เราจะสร้าง และเราใช้คุณสมบัติที่ค่อนข้างไม่ค่อยได้ใช้: object-fit

กล่อง ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ความกว้าง: 300px; ความสูง: 300px; ) .box img ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; แปลง: แปล (-50%, -50%); ความกว้าง:300px; ความสูง:300px;

ในความคิดของฉันนี่เป็นวิธีที่ดีที่สุด เหมาะสำหรับบล็อกหากคุณใช้รูปภาพที่มีสัดส่วนต่างกันโดยสิ้นเชิงในการโพสต์

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

นอกจากนี้เรายังสามารถสร้างการครอบตัดรูปภาพได้ในขณะนี้หากเราแทรกลงในองค์ประกอบ SVG ลองใช้วงกลมเป็นตัวอย่าง เราสามารถสร้าง SVG โดยใช้แท็ก สร้างแท็กเส้นขอบ svg ที่จะมีแท็กวงกลมและแท็กรูปแบบอยู่ข้างใน ในแท็กรูปแบบเราเขียนแท็กรูปภาพ ในนั้นเราระบุแอตทริบิวต์ xlink:href และเพิ่มรูปภาพ เราจะเพิ่มแอตทริบิวต์ความกว้างและความสูงด้วย แต่นั่นไม่ใช่ทั้งหมด เราจะต้องเพิ่มมูลค่าการเติม เพื่อให้งานของเราถือว่าเสร็จสมบูรณ์ เราจะเพิ่มแอตทริบิวต์เสริม preservAspectRatio ให้กับแท็กรูปภาพ ซึ่งจะช่วยให้เราเติมรูปภาพของเรา “ตั้งแต่ต้นจนจบ” ทั่วทั้งวงกลมได้

ฉันไม่สามารถเรียกวิธีนี้เป็นสากลได้ แต่สามารถใช้ได้ในกรณีพิเศษ ตัวอย่างเช่นหากเราพูดถึงหัวข้อของบล็อก วิธีนี้จะเหมาะกับอวตารของผู้เขียนที่เขียนบทความ

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

ผลลัพธ์:
เราพิจารณาวิธีการครอบตัดรูปภาพบนเว็บไซต์ 3 วิธี: การใช้ background-image การใช้แท็ก img และเชื่อมโยงกับรูปแบบ svg ด้วยการฝัง ภาพแรสเตอร์โดยใช้แท็กรูปภาพ หากคุณทราบวิธีการอื่นในการครอบตัดรูปภาพโดยใช้ SVG ให้แชร์ในความคิดเห็น มันจะมีประโยชน์ไม่เพียงแต่สำหรับฉันเท่านั้น แต่ยังให้คนอื่นรู้เกี่ยวกับพวกเขาด้วย

อย่าลืมถามคำถามเกี่ยวกับเลย์เอาต์หรือการพัฒนาส่วนหน้าจากผู้เชี่ยวชาญใน FrontendHelp ออนไลน์