การจัดรูปแบบลิงก์ เคล็ดลับบางประการเกี่ยวกับวิธีลบลิงก์ที่ขีดเส้นใต้ใน HTML โดยใช้ CSS

งาน

สารละลาย

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

หากต้องการสร้างเส้น ให้ใช้คุณสมบัติ border-bottom ด้วยค่าขีดกลางและเพิ่มลงในตัวเลือก A เพื่อให้แน่ใจว่าการขีดเส้นใต้ไม่ได้นำไปใช้กับลิงก์ทั้งหมด คุณควรระบุคลาสที่ไม่ซ้ำ หรือเรียกคลาสนั้นว่า dot คุณต้องลบการขีดเส้นใต้เดิมออกจากลิงก์โดยใช้คุณสมบัติตกแต่งข้อความที่มีค่า none (ตัวอย่างที่ 1)

ตัวอย่างที่ 1: เส้นประขีดเส้นใต้

HTML5 CSS 2.1 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างจะแสดงในรูป 1.

ความหนาของเส้นและสีขีดเส้นใต้ของลิงก์จะถูกตั้งค่าผ่านคุณสมบัติเส้นขอบด้านล่างด้วย

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

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

ในตัวอย่างนี้ เราจะลบขีดเส้นใต้ออกจากลิงก์ จากนั้นจึงเพิ่มหรือลบออกเมื่อวางเมาส์ไว้

ตัวอย่าง HTML และ CSS: วิธีลบและเพิ่มขีดเส้นใต้จากลิงก์

คำอธิบายของตัวอย่าง

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

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

ตัวอย่าง HTML และ CSS: ขีดเส้นใต้ลิงก์แบบประ

คำอธิบายของตัวอย่าง

1. ขั้นแรก เราจะลบการขีดเส้นใต้มาตรฐานออกจากลิงก์ทั้งหมด เนื่องจากเราจะใช้วิธีการที่ไม่เป็นมาตรฐาน จากนั้นเราจะเพิ่มเส้นขอบด้านล่างให้กับลิงค์แรกโดยใช้คุณสมบัติ CSS และทำให้มันเป็นเส้นประ นี่จะเป็นขีดเส้นใต้ของเรา หากต้องการลบการขีดเส้นใต้เมื่อคุณวางเมาส์เหนือลิงก์ เราจะใช้คลาสหลอกและทำให้พื้นหลังของเฟรมเหมือนกับพื้นหลังของหน้า กล่าวคือ เราเพียงซ่อนมันไว้ ตามทฤษฎีแล้ว จะดีกว่าถ้าทำให้พื้นหลังของเฟรมโปร่งใส แต่ IE6 เข้าใจผิดความหมายนี้
2. ด้วยลิงก์ที่สอง เราทำแบบเดียวกับลิงก์แรก แต่เราแค่ลากเส้นทึบ หากต้องการเพิ่มระยะห่างจากข้อความถึงขีดเส้นใต้ เราจะให้ลิงก์มีระยะขอบด้านล่างเล็กน้อยโดยใช้คุณสมบัติ CSS
3. ลิงก์ที่สามของเรามีขีดเส้นใต้หลายสี ดังนั้นเราจะเพิ่มโดยใช้ ภาพพื้นหลัง- สำหรับสิ่งนี้ เราใช้รูปภาพขนาดเล็ก ซึ่งเราเชื่อมต่อผ่าน CSS วางตำแหน่งพื้นหลังที่ด้านล่างของลิงก์ (0 100%) และอนุญาตให้ทำซ้ำในแนวนอนเท่านั้น (ซ้ำ-x) ขีดเส้นใต้พร้อมแล้ว แต่ใกล้กับข้อความมากเกินไป เพื่อแก้ไขปัญหานี้ เราจึงเพิ่มการเยื้องเล็กน้อยลงในลิงก์ด้านล่าง ตอนนี้ก็แค่นั้น
4. ใน IE6 และ IE7 แบบเก่า อาจมีปัญหาในการแสดงขีดล่างในลิงก์แรกและลิงก์ที่สอง หากต้องการแก้ไขปัญหานี้ ให้เพิ่มคุณสมบัติ Zoom :1 ซึ่งรวมถึงสิ่งที่เรียกว่า เค้าโครง คุณสมบัตินี้ไม่ถูกต้องและมีเพียงเบราว์เซอร์เหล่านี้เท่านั้นที่เข้าใจ ดังนั้นจึงควรเปิดใช้งานจะดีกว่า ความคิดเห็นแบบมีเงื่อนไข.

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

คำอธิบายของตัวอย่าง

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

คำอธิบายของตัวอย่าง

1. ทุกอย่างง่ายมาก - เมื่อใช้คุณสมบัติ CSS เราจะเพิ่มเฟรมที่ต้องการให้กับลิงก์ใต้เคอร์เซอร์ อย่างไรก็ตาม โปรดทราบว่าเราได้เพิ่มเฟรมเดียวกันทุกประการให้กับลิงก์ปกติ แต่เราทำให้ลิงก์นั้นเป็นสีเดียวกับพื้นหลังของหน้า นั่นคือเราเพียงซ่อนเฟรมในขณะนั้น ทำเช่นนี้เพื่อที่ว่าเมื่อคุณวางเคอร์เซอร์ของเมาส์ ลิงก์จะไม่เริ่ม "กระโดด" เนื่องจากการวาดเฟรม

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

ตัวอย่าง HTML และ CSS: การสร้างลิงก์ 3 มิติ

คำอธิบายของตัวอย่าง

1. การใช้คุณสมบัติ CSS ทำให้เราเพิ่มเฟรมให้กับลิงก์ และด้วยความช่วยเหลือในการกำหนดสีของมัน ในเวลาเดียวกัน เราระบุเฉดสีอ่อนสำหรับเส้นขอบด้านซ้ายและด้านบน และเฉดสีเข้มสำหรับด้านล่างและด้านขวา ต้องขอบคุณการกระจายสีที่เราได้รับลิงก์ที่ดูเหมือนปุ่มสามมิติ
2. เพื่อให้ดูเหมือนว่ามีการกดปุ่มเมื่อคุณเลื่อนเคอร์เซอร์ของเมาส์ เราจะกลับสีเส้นขอบของลิงก์ด้วยคลาสหลอก หากต้องการเอฟเฟกต์การคลิกเพิ่มเติม ให้ตั้งค่าตำแหน่งสัมพันธ์ (CSS :relative) และสร้างออฟเซ็ตขึ้นหนึ่งพิกเซล (CSS :-1px)
3. เพื่อให้ทุกอย่างสวยงามอย่างแท้จริง เราจึงตั้งค่าข้อความและสีพื้นหลังของลิงก์ใต้เคอร์เซอร์ให้เข้มกว่าปกติเล็กน้อย พร้อม.

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

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

คำอธิบายของตัวอย่าง

1. ในการย่อโค้ดให้สั้นลง เราใช้สองคลาสในลิงก์ - "ลิงก์" (ที่มีคุณสมบัติทั่วไป) และ "รูปภาพ", "เสียง", "วิดีโอ" (ส่วนตัวสำหรับแต่ละลิงก์) ประเด็นนี้อธิบายโดยละเอียดใน ชั้นเรียนการอ้างอิงซีเอสเอส
2. ไอคอนของเรามีขนาด 50x50 พิกเซล และจะปรากฏบนลิงก์เป็นพื้นหลัง (CSS) ซึ่งเราจะจัดให้อยู่ตรงกลางด้านบน (50% 0) และป้องกันไม่ให้มีการจำลอง (ไม่ทำซ้ำ)
3. เราเพิ่มช่องว่างภายใน (CSS) ให้กับลิงก์ เพื่อไม่ให้ข้อความในลิงก์ติดกับขอบ ในเวลาเดียวกัน เราทำให้การเยื้องด้านบนเท่ากับความสูงของไอคอน เพื่อไม่ให้ข้อความทับซ้อน เนื่องจากไอคอนของเราเป็นพื้นหลัง
4. หากมีข้อความในลิงก์น้อยมาก รูปภาพไอคอนจะถูกตัดออกที่ด้านข้าง เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น เราได้ตั้งค่าลิงก์ให้มีความกว้างขั้นต่ำ (CSS) เพื่อให้เท่ากับความกว้างของไอคอนเป็นอย่างน้อย ในกรณีของเรา เราจำเป็นต้องมีความกว้างขั้นต่ำ 50px แต่เราตั้งค่าไว้ที่ 40px เนื่องจากจะมีการเพิ่มอีก 10px เนื่องจากการเสริมด้านข้าง
5. เพื่อให้ความกว้างขั้นต่ำใช้งานได้ เราจะแปลงลิงก์เป็นบล็อกอินไลน์ (CSS: inline-block)

IE6 จะต้อง "รักษา" เล็กน้อย:

1. IE6 ไม่เข้าใจคุณสมบัติความกว้างขั้นต่ำ แต่จะตีความคุณสมบัติ CSS ว่าเป็นความกว้างขั้นต่ำ ดังนั้นเราจึงใช้วิธีง่ายๆสำหรับมัน สับซึ่งจะแก้ไขปัญหานี้

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

ในการดำเนินการนี้ ก่อนอื่นเราจะตัดภาพเปล่าหลายภาพออกเป็นสองชุด - สำหรับลิงก์ปกติและลิงก์ใต้เคอร์เซอร์ สำหรับเรา การมี/ไม่มีเงาในภาพจะแตกต่างกันออกไป

คำอธิบายของตัวอย่าง

เราจะไม่อาศัยเทคโนโลยีการปัดเศษหากจำเป็น คุณสามารถอ่านเกี่ยวกับเรื่องนี้ได้ในส่วนที่เกี่ยวข้องของไซต์

1. การใช้คุณสมบัติ CSS :inline-block เราสร้างลิงก์แบบอินไลน์บล็อก โดยเฉพาะอย่างยิ่ง นี่เป็นสิ่งจำเป็นเพื่อให้เราสามารถให้ลิงก์มีความสูงที่แน่นอนซึ่งตรงกับความสูงของรูปภาพได้
2. ลบขีดเส้นใต้และจัดข้อความให้อยู่ตรงกลาง (CSS:center) โดยทั่วไป ในกรณีของเรา ไม่จำเป็นต้องจัดข้อความให้อยู่ตรงกลาง เนื่องจากลิงก์จะปรับขนาดของข้อความในลิงก์ และไม่มีที่ไหนเลยที่จะจัดแนวได้ แต่ถ้าคุณต้องการเพิ่มความกว้างของลิงก์ (เช่น สูงสุด 150px) การจัดตำแหน่งนี้จะมีประโยชน์
3. ที่จะเปลี่ยนแปลง รูปร่างลิงก์เมื่ออยู่ใต้เคอร์เซอร์ของเมาส์ - เพิ่มตัวเลือกเพิ่มเติมให้กับสไตล์ด้วยคลาสหลอก CSS ซึ่งเราจะระบุส่วนต่างๆ ของรูปภาพ แต่ไม่มีเงา

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

1. สาระสำคัญของการเปลี่ยนแปลงคือด้วยความช่วยเหลือของการแสดงออก เราจะรวมสองแท็กเดียวกันไว้ในลิงก์ แต่ไม่มีแอตทริบิวต์ที่มีสไตล์เท่านั้น แต่เราเพิ่มคลาส “left_bok” และ “right_bok” ให้กับแท็ก และเพิ่มสไตล์ให้กับแท็กเหล่านั้นและเขียนไว้ด้านล่าง สไตล์เหล่านี้เกือบจะเหมือนกับในโค้ด CSS หลักทุกประการ แต่ที่นี่รูปภาพทั้งหมดถูกใช้เป็นพื้นหลังของแท็ก

มุมโค้งมนของลิงก์ (ตัวเลือกที่สอง)

ลองดูอีกตัวอย่างหนึ่งของการปัดเศษมุมของลิงก์ แต่ใช้รูปภาพสี่มุมแยกกัน

คำอธิบายของตัวอย่าง

เราจะไม่พูดถึงการปัดเศษในที่นี้เช่นกัน เราจะสรุปเฉพาะประเด็นที่โดดเด่นเท่านั้น

1. การใช้คุณสมบัติ CSS :inline-blok เราจะแปลงลิงก์เป็นบล็อกอินไลน์ จากนั้นเราจะลบการขีดเส้นใต้ออก เพิ่มกรอบ และจัดข้อความให้อยู่ตรงกลาง
2. เนื่องจากองค์ประกอบหลอกที่เราปัดเศษมุมนั้นอยู่ภายในลิงก์ เนื้อหาจึงอยู่ตรงกลางด้วย ดังนั้นมุมรูปภาพที่เพิ่มโดยคุณสมบัติ CSS จะไม่ถูกวางไว้ที่มุมตามที่เราต้องการ เพื่อแก้ไขปัญหานี้ เราเพิ่ม :left เข้าไป เพื่อส่งคืนค่าที่เบราว์เซอร์ใช้เป็นค่าเริ่มต้น

ด้วยการถือกำเนิดของ CSS3, HTML5 และการรวมแบบอักษรของเว็บเข้าด้วยกัน ไซต์ต่างๆ จึงมีไดนามิก สวยงาม และมีความก้าวหน้าทางเทคโนโลยีมากขึ้นในกระบวนการพัฒนา หลายๆ คนไม่ชอบขีดเส้นใต้ลิงก์ และฉันก็เข้าใจมันในระดับหนึ่ง แม้ว่าเส้นที่ค่อนข้างหนาจะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของไซต์และแยกแยะลิงก์จากข้อความปกติได้ แต่จะทำให้อ่านยากหน่อย

กับการมาถึงของรูปแบบ RGBA(แดง เขียว น้ำเงิน อัลฟ่า)ใน CSS3 ปัญหานี้ถือว่าแก้ไขได้ ด้วยการใช้รูปแบบการแสดงสีขั้นสูง ขณะนี้นักออกแบบเว็บไซต์สามารถใช้ความโปร่งใสระดับอัลฟ่าสำหรับสีได้

ต่างจากคุณสมบัติความทึบตรงที่สามารถนำไปใช้กับแบบอักษร เส้นขอบ และพื้นหลังของบล็อกได้โดยไม่ต้องเปลี่ยนความโปร่งใสของเนื้อหาบล็อก ค่าสี RGBA เป็นแบบต่อเนื่อง ค่าสี RGB ที่มีเพียงช่องอัลฟา - ซึ่งกำหนดความทึบของวัตถุ

ไวยากรณ์

ค่าสี RGBA กำหนดโดย: RGBA (แดง เขียว น้ำเงิน อัลฟา)
พารามิเตอร์อัลฟ่าแสดงถึงตัวเลข ตั้งแต่ 0.0(โปร่งใสอย่างสมบูรณ์) มากถึง 1.0(ทึบแสงโดยสมบูรณ์)

ความเข้ากันได้

เบราว์เซอร์รองรับค่าสี RGBA: IE9+, Firefox 3+, Chrome, Safari และ Opera 10+

ใครเป็นผู้ดำเนินการ

Lebedev Studio, สำนักออกแบบ Artyom Gorbunov, Ilya Birman ใช้ประโยชน์จากโอกาสนี้ทันที... การขีดเส้นใต้ลิงก์ยังคงอยู่บนเว็บไซต์ของพวกเขา แต่มันก็ดูหรูหรายิ่งขึ้น

รหัสตัวอย่าง

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

A:link ( color: #0060a0; border-bottom: 1px solid; border-bottom-color: rgba(0,96,160,0.2); ) a:hover ( color: #d04000; border-bottom-color: rgba(255,218,202) ,0.5);

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

มีหลายวิธีในการจัดรูปแบบการขีดเส้นใต้ คุณอาจจำบทความ “การสร้างลิงค์ขีดเส้นใต้บนสื่อ”. Medium ไม่ได้พยายามทำอะไรที่ผิดธรรมดา แต่พวกเขาต้องการสร้างขีดเส้นใต้ที่น่าสนใจในข้อความ

ขีดเส้นใต้สีดำบางๆ โดยมีช่องว่างรอบๆ ตัวอักษรพร้อมคำบรรยายภาพด้านล่าง - ทำงานโดย Marcine Witchery จากบทความ การสร้างลิงก์ขีดเส้นใต้บนสื่อ

ขีดเส้นใต้มาตรฐานที่ดีซึ่งมีขนาดที่ดีและช่วยให้สามารถขีดเส้นใต้ได้ ดีกว่าค่าเริ่มต้นของเบราว์เซอร์ส่วนใหญ่มาก ปรากฎว่า Medium ต้องเผชิญกับความท้าทายมากมายตลอดเส้นทาง และแม้ผ่านไปสองปี สไตล์การขีดเส้นใต้ที่ดีก็ยังทำให้เกิดปัญหามากมาย

เป้าหมาย

ทำไมไม่ใช้แค่การตกแต่งข้อความ: ขีดเส้นใต้ล่ะ? หากเรากำลังพูดถึงสถานการณ์ในอุดมคติ ขีดล่างควร:

อยู่ต่ำกว่าเส้นฐาน

ข้ามตัวอักษรตัวล่าง

เปลี่ยนสีความหนาและรูปแบบ

ไปที่ บรรทัดใหม่;

ทำงานกับพื้นหลังใดก็ได้

ฉันคิดว่าเป็นไปได้โดยสิ้นเชิงที่เราต้องการสิ่งเหล่านี้ทั้งหมดจากขีดล่าง แต่เท่าที่ฉันรู้ว่า ไม่มีวิธีที่เป็นธรรมชาติในการทำสิ่งเหล่านี้ทั้งหมดใน CSS

แนวทาง

แล้วเรามีวิธีการขีดเส้นใต้ข้อความอย่างไร? ฉันจำสิ่งต่อไปนี้:

ตกแต่งข้อความ;

ภาพพื้นหลัง;

ตัวกรอง SVG;

ขีดเส้นใต้.js (ผ้าใบ);

ตกแต่งข้อความ-*

เรามาดูรายการทั้งหมดและพิจารณาข้อดีข้อเสียของแต่ละวิธีกัน

คุณสมบัติการตกแต่งข้อความ

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

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

ข้อดี

ใช้งานง่าย;

อยู่ต่ำกว่าเส้นฐาน

ข้ามผู้สืบทอดตามค่าเริ่มต้นใน Safari และ iOS

ข้ามไปที่บรรทัดใหม่

ใช้งานได้กับพื้นหลังใด ๆ

ข้อเสีย

ไม่ข้ามตัวอักษรจากมากไปน้อยในเบราว์เซอร์อื่น

สี ความหนา และรูปแบบไม่สามารถเปลี่ยนแปลงได้

คุณสมบัติขอบล่าง

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

ข้อเสียที่ใหญ่ที่สุดคือระยะห่างจากข้อความที่ขีดเส้นใต้ ขีดเส้นใต้อยู่ใต้ตัวอักษรจากมากไปน้อย ปัญหานี้สามารถแก้ไขได้หากคุณสร้างองค์ประกอบ inline-block และลดความสูงของบรรทัด แต่คุณจะสูญเสียความสามารถในการข้ามไปยังบรรทัดใหม่ เหมาะสำหรับบรรทัดเดียว แต่ไม่มีอีกแล้ว

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

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

ข้อดี

สามารถใช้ ทรัพย์สินการเปลี่ยนแปลงและสีและความหนาเคลื่อนไหว

ข้ามไปที่บรรทัดใหม่ตามค่าเริ่มต้นหากองค์ประกอบนั้นไม่ใช่แบบอินไลน์บล็อก

ข้อเสีย

เส้นอยู่ไกลมากและเคลื่อนย้ายลำบาก

จำเป็นต้องใช้คุณสมบัติที่ไม่จำเป็นมากเกินไปเพื่อทำให้การขีดเส้นใต้ดูดี

ข้อความที่เน้นไม่ดีเมื่อใช้ข้อความเงา

คุณสมบัติกล่องเงา

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

เคล็ดลับเงาข้อความแบบเดียวกันนี้สามารถใช้เพื่อจำลองการข้ามข้อความไฮไลต์ด้านล่างของตัวอักษรได้ หากสีของเส้นแตกต่างจากข้อความหรือบางเพียงพอก็ไม่น่าจะมีปัญหา เช่นเดียวกับการตกแต่งข้อความ

ข้อดี

สามารถวางไว้ใต้เส้นฐานได้

คุณสามารถข้ามคำบรรยายภาพโดยใช้ข้อความเงา

คุณสามารถเปลี่ยนสีและความหนาได้

ข้ามไปที่บรรทัดใหม่

ข้อเสีย

ไม่สามารถเปลี่ยนสไตล์ได้

ใช้ไม่ได้กับพื้นหลังทั้งหมด

คุณสมบัติภาพพื้นหลัง

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

การสาธิตด้านล่างไม่ได้ใช้การไล่ระดับสีเชิงเส้น หากต้องการสร้างเอฟเฟกต์สุดเจ๋ง คุณสามารถใช้รูปภาพของคุณเองได้

ข้อดี

สามารถวางอยู่ใต้เส้นฐานได้

คุณสามารถข้ามคำบรรยายภาพด้านล่างได้โดยใช้ข้อความเงา

คุณสามารถเปลี่ยนสี ความหนา (แม้แต่ครึ่งพิกเซล) และสไตล์ได้

ทำงานร่วมกับรูปภาพที่กำหนดเอง

ข้ามไปที่บรรทัดใหม่

ใช้งานได้กับพื้นหลังใดๆ ก็ได้ตราบใดที่คุณไม่ใช้เงาข้อความ

ข้อเสีย

ขนาดภาพอาจแตกต่างกันไปขึ้นอยู่กับ ความละเอียดที่แตกต่างกันเบราว์เซอร์ และระดับการซูม

ฟิลเตอร์ SVG

นี่คือวิธีที่ฉันเล่นด้วย คุณสามารถสร้างองค์ประกอบตัวกรอง SVG แบบอินไลน์ที่จะวาดเส้น และขยายข้อความเพื่อปกปิดส่วนของเส้นที่ควรมีความโปร่งใส ตัวกรองสามารถกำหนดรหัสและอ้างอิงใน CSS โดยใช้ตัวกรอง: url('#svg-underline')

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

และนี่คือลักษณะที่ปรากฏบน Chrome และ Firefox:

มีปัญหาการสนับสนุนใน IE, Edge และ Safari การทดสอบการรองรับตัวกรอง SVG ใน CSS เป็นเรื่องยาก คุณสามารถใช้กฎ @supports กับตัวกรองได้ แต่จะตรวจสอบว่าลิงก์ใช้งานได้หรือไม่ และไม่ได้ใช้ตัวกรองหรือไม่ วิธีการของฉันค่อนข้างหยาบบนเบราว์เซอร์ ดังนั้นควรระวังเป็นสองเท่า

ข้อดี

อยู่ต่ำกว่าเส้นฐาน

ข้ามผู้นำระดับล่าง

คุณสามารถเปลี่ยนสี ความหนา และสไตล์ได้

ทำงานบนพื้นหลังใดก็ได้

ข้อเสีย

ไม่ข้ามไปที่บรรทัดใหม่

ไม่สามารถใช้งานได้ใน IE, Edge และ Safari แต่คุณสามารถระบุการตกแต่งข้อความเป็นทางเลือกได้ ขีดเส้นใต้ใน Safari จะดูดีด้วยตัวมันเอง

Underline.js (แคนวาส)

Underline.js เป็นไลบรารีที่น่าทึ่ง ฉันประทับใจกับสิ่งที่ Wenting Zhang สามารถทำได้กับ JS และความใส่ใจในรายละเอียด หากคุณยังไม่เห็นการสาธิตเทคโนโลยี Underline.js ให้หยุดสักครู่แล้วลองดู มีสุนทรพจน์ออนไลน์เก้านาทีที่ยอดเยี่ยมเกี่ยวกับหลักการทำงาน ฉันจะเล่าให้คุณฟังอย่างรวดเร็วตอนนี้ ขีดเส้นใต้ถูกวาดโดยใช้ผืนผ้าใบ อย่างแน่นอน แนวทางใหม่ซึ่งทำงานได้ดีอย่างน่าประหลาดใจ

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

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

คุณสมบัติ ข้อความ-ตกแต่ง-*

จำตอนที่ฉันบอกว่าเราจะลงรายละเอียดเพิ่มเติมเกี่ยวกับบางสิ่งบางอย่างในภายหลังได้ไหม ทีนี้เรามาทำสิ่งนี้กันดีกว่า คุณสมบัติการตกแต่งข้อความทำงานได้ดีด้วยตัวมันเอง แต่เราสามารถเพิ่มคุณสมบัติทดลองสองสามรายการเพื่อเพิ่มมูลค่าได้ มุมมองที่ดีที่สุด:

ข้อความตกแต่งสี

การตกแต่งข้อความ-ข้าม

สไตล์การตกแต่งข้อความ

อย่าดีใจล่วงหน้า คุณรู้เกี่ยวกับการสนับสนุนเบราว์เซอร์

คุณสมบัติสีตกแต่งข้อความ

คุณสมบัติ text- decoration-color ช่วยให้คุณสามารถเปลี่ยนสีขีดเส้นใต้แยกจากสีข้อความได้ คุณสมบัตินี้ยังรองรับเบราว์เซอร์ที่ดีอีกด้วย ใช้งานได้ใน Firefox และนำหน้าใน Safari มีข้อเสียคือ หากคุณไม่ล้างบรรทัดรอบๆ คำบรรยายภาพ ใน Safari บรรทัดนั้นจะวางทับข้อความ ไฟร์ฟอกซ์:

คุณสมบัติข้อความตกแต่งข้าม

คุณสมบัติ text- decoration-skip มีหน้าที่ในการข้ามบอลลูนส่วนท้ายในข้อความที่ขีดเส้นใต้

ที่พักไม่ได้มาตรฐานและปัจจุบันใช้งานได้เฉพาะใน Safari เท่านั้น หากต้องการทำงานในเบราว์เซอร์อื่น คุณต้องใช้คำนำหน้า –webkit- ใน Safari คุณสมบัตินี้จะเปิดใช้งานตามค่าเริ่มต้น ซึ่งเป็นสาเหตุที่ขีดเส้นใต้ข้ามส่วนท้าย แม้แต่บนไซต์ที่ไม่ได้ระบุคุณสมบัตินี้

หากคุณใช้ Normalize คุณจำเป็นต้องรู้สิ่งนี้ เวอร์ชันล่าสุดปิดการใช้งานคุณสมบัติสำหรับการทำงานปกติในเบราว์เซอร์ทั้งหมด หากคุณต้องการขีดเส้นใต้ที่เกือบจะมหัศจรรย์เหล่านั้นกลับมา คุณต้องเปิดใช้งาน คุณสมบัตินี้.

คุณสมบัติสไตล์การตกแต่งข้อความ

คุณสมบัติรูปแบบการตกแต่งข้อความมีชุดการขีดเส้นใต้ชุดเดียวกันกับคุณสมบัติรูปแบบเส้นขอบ แต่ยังเพิ่มด้วย รูปลักษณ์ใหม่- หยัก. ค่าที่เป็นไปได้:

ขณะนี้คุณสมบัติรูปแบบข้อความตกแต่งใช้งานได้เฉพาะใน Firefox ด้านล่างนี้เป็นภาพหน้าจอ:

ชุดขีดเส้นใต้สีเดียว คล้ายกันไหม?

เกิดอะไรขึ้น?

คุณสมบัติ text- ตกแต่ง-* นั้นใช้งานง่ายกว่าคุณสมบัติอื่นๆ สำหรับการจัดรูปแบบการขีดเส้นใต้ อย่างไรก็ตาม หากคุณพิจารณาข้อกำหนดต่างๆ ที่เรานำเสนอก่อนหน้านี้ คุณจะสังเกตเห็นว่าการใช้คุณสมบัติเหล่านี้ คุณไม่สามารถเปลี่ยนความหนาและตำแหน่งได้ หลังจากการวิจัยเล็กน้อย ฉันพบคุณสมบัติทั้งสองนี้:

ข้อความขีดเส้นใต้ความกว้าง

ข้อความขีดเส้นใต้ตำแหน่ง

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

ข้อสรุป

ดังนั้นวิธีที่ดีที่สุดในการขีดเส้นใต้ข้อความคืออะไร? ทุกอย่างขึ้นอยู่กับปัจจัยต่างๆ

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

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

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

ข้อความที่ขีดเส้นใต้ใน HTML ถูกเน้นโดยใช้แท็ก คุณ HTML (จากคำว่า ขีดเส้นใต้- มันถูกใช้ดังต่อไปนี้ (ส่วนที่ต้องการของข้อความอยู่ระหว่างแท็ก ):

เครื่องมือสร้างเว็บไซต์ "นูเบ็กซ์"

แต่ รหัสนี้ถือว่าไม่ถูกต้อง ดังนั้นจึงมีประสิทธิภาพและถูกต้องกว่ามากในการใช้สไตล์ CSS ในการตกแต่งข้อความ

ขีดเส้นใต้ข้อความ - CSS

ดังที่เราได้กล่าวไปแล้วในบทความ การตกแต่งข้อความได้รับการตั้งค่าโดยใช้คุณสมบัติ การตกแต่งข้อความ- ข้อความที่ขีดเส้นใต้ถูกระบุโดยพารามิเตอร์ ขีดเส้นใต้:

เครื่องมือสร้างเว็บไซต์ นูเบ็กซ์"

คุณสามารถขีดเส้นใต้ข้อความโดยใช้ CSS ได้มากกว่าแค่เส้นทึบ มาดูกันว่าคุณสามารถใช้ตัวเลือกใดในการขีดเส้นใต้ข้อความ:

• ขีดเส้นใต้ข้อความด้วยเส้นประ CSS:

  เครื่องมือสร้างเว็บไซต์ นูเบ็กซ์"

• ขีดเส้นใต้ด้วยจุด:

  เครื่องมือสร้างเว็บไซต์ นูเบ็กซ์"

• เส้นประคู่:

  เครื่องมือสร้างเว็บไซต์ นูเบ็กซ์"

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