เรียนรู้วิธีสร้าง Fancy Initial Caps โดยใช้ CSS และรูปภาพ
เรียนรู้วิธีการใช้ CSS เพื่อสร้างตัวพิมพ์ใหญ่ที่น่าสนใจสำหรับย่อหน้าของคุณ แม้จะมีเทคนิคการเปลี่ยนรูปภาพง่ายๆในการใช้ภาพกราฟิกสำหรับฝาครอบเริ่มต้นของคุณ
ลักษณะพื้นฐานของหมวกเริ่มต้น
มีสามรูปแบบพื้นฐานของตัวพิมพ์ใหญ่ในเอกสาร:
- ยกขึ้น - ที่พบมากที่สุดโดยที่ตัวอักษรตัวแรกมีขนาดใหญ่และอยู่ในบรรทัดเดียวกับข้อความปัจจุบัน
- ลดลง - ยังค่อนข้างทั่วไปที่ตัวอักษรตัวแรกมีขนาดใหญ่และลดลงต่ำกว่าบรรทัดแรกของข้อความ ข้อความต่อไปนี้จะลอยอยู่รอบ ๆ
- ที่อยู่ติดกัน - ที่ตัวอักษรตัวแรกอยู่ในคอลัมน์เดียวข้างส่วนที่เหลือของข้อความ นี่เป็นเรื่องปกติในการพิมพ์มากกว่าการออกแบบเว็บ
ตัวพิมพ์ใหญ่หรือหมวกแบบหล่นจะคุ้นเคยมาก พวกเขาเป็นวิธีที่ดีในการแต่งเนื้อเพลงนานและน่าเบื่อ และด้วยคุณสมบัติ CSS: อักษรตัวแรกคุณสามารถกำหนดวิธีสร้างตัวอักษรตัวแรกของคุณได้อย่างง่ายดาย
สร้างแคชเริ่มต้นแบบง่าย
สิ่งที่คุณต้องทำเพื่อสร้างฝาครอบเริ่มต้นที่ง่ายขึ้นคือการทำให้ตัวอักษรตัวแรกของย่อหน้าของคุณมีขนาดใหญ่ขึ้นด้วยองค์ประกอบปลอมตัวอักษรตัวแรก:
p: อักษรตัวแรก {font-size: 3em; }แต่ เบราว์เซอร์ จำนวนมากเห็นว่าตัวอักษรตัวแรกมีขนาดใหญ่กว่าส่วนที่เหลือของบรรทัดในบรรทัดดังนั้นจึงทำให้ชั้นนำเท่ากับสิ่งที่ทำให้รู้สึกสำหรับจดหมายฉบับแรกไม่ใช่ส่วนที่เหลือของบรรทัด โชคดีที่นี้เป็นเรื่องง่ายที่จะแก้ไขด้วยองค์ประกอบบรรทัดแรกปลอมและคุณสมบัติบรรทัดสูง:
p: อักษรตัวแรก {font-size: 3em; } p: บรรทัดแรก {line-height: 1em; }เล่นด้วยความสูงของเส้นในเอกสารจนกว่าคุณจะได้ขนาดที่เหมาะสมกับข้อความ
เล่นกับหมวกเริ่มแรกของคุณ
เมื่อคุณเข้าใจวิธีสร้างหมวกเริ่มต้นแล้วคุณสามารถแต่งตัวในเสื้อผ้าแฟนซีเพื่อให้โดดเด่นได้ เล่นด้วยสีพื้นหลังเส้นขอบหรืออะไรก็ได้ที่คุณต้องการ สไตล์ที่ค่อนข้างง่ายคือการย้อนกลับสีของแบบอักษรและสีพื้นหลังของคุณสำหรับตัวอักษรตัวแรก:
p: อักษรตัวแรก {font-size: 300%; สีพื้นหลัง: # 000; สี: #fff; } p: บรรทัดแรก {line-height: 100%; }เคล็ดลับอีกอย่างหนึ่งก็คือการให้ความสำคัญกับบรรทัดแรก นี่อาจเป็นเรื่องยุ่งยากหากใช้ CSS เนื่องจากเส้นตรงกลางของบรรทัดข้อความจะแตกต่างกันถ้ารูปแบบของคุณมีความยืดหยุ่น คุณสามารถเยื้องบรรทัดแรกของคุณได้พอที่จะทำให้ตัวอักษรตัวแรกปรากฏอยู่ตรงกลาง เพียงแค่เล่นกับเปอร์เซ็นต์ใน text-indent ของย่อหน้าจนกว่าจะดูถูกต้อง:
p: อักษรตัวแรก {font-size: 300%; สีพื้นหลัง: # 000; สี: #fff; } p: บรรทัดแรก {line-height: 100%; } p {text-indent: 45% ; }Adaptive Initial Caps เป็นแบบ Hard กับ CSS
ตัวพิมพ์ใหญ่ที่อยู่ติดกันอาจเป็นเรื่องยากสำหรับ CSS เนื่องจากเบราว์เซอร์ต่างๆจะแสดงแบบอักษรต่างๆ แนวคิดเบื้องหลังการสร้างหมวกที่อยู่ติดกันใน CSS คือการใช้คุณสมบัติ text-indent ในบรรทัดแรกเพื่อดันออก (ด้านซ้าย) ค่าลบ คุณจำเป็นต้องเปลี่ยนขอบด้านซ้ายของย่อหน้านั้นด้วยจำนวนเงินบางส่วน เล่นกับตัวเลขเหล่านี้จนกว่าย่อหน้าจะดูดี
p {text-indent: -2.5em; margin-left: 3em; } p: ตัวอักษรตัวแรก {font-size: 3em; } p: บรรทัดแรก {line-height: 100%; }การเริ่มต้นเป็นครั้งแรกของแฟนซี
วิธีที่ดีที่สุดในการสร้างจุดเริ่มต้นแฟนซีคือการเปลี่ยนแบบอักษรเป็นแบบอักษรสำหรับครอบครัวที่ตกแต่งมากขึ้น หากคุณใช้ ชุดแบบอักษร ตามด้วย แบบอักษรทั่วไป จะช่วยรับประกันได้ว่าหมวกต้นแบบของคุณจะแสดงได้ดีเพื่อให้ลูกค้าของคุณสามารถมองเห็นได้โดยไม่ต้องเข้าสู่ปัญหาเรื่องการเข้าถึงและการใช้งาน
p: อักษรตัวแรก {font-size: 3em; ครอบครัวอักษร: "Edwardian Script ITC", "Brush Script MT", เล่นหาง; } p: บรรทัดแรก {line-height: 100%; }และตามปกติคุณสามารถใส่คำแนะนำทั้งหมดเหล่านี้ร่วมกันเพื่อสร้างหมวกเริ่มต้นที่โฆษณาจะแสดงตามวรรคของคุณ
การใช้ Cap แบบเริ่มต้นแบบกราฟิก
หากหลังจากนั้นคุณยังไม่ชอบคำแนะนำในหน้าแรกคุณสามารถใช้กราฟิกเพื่อให้ได้ผลลัพธ์ที่แน่นอนที่คุณต้องการ แต่ก่อนที่คุณจะตัดสินใจย้ายไปที่กราฟิกคุณควรทราบถึงข้อเสียของวิธีนี้:
- ลูกค้าที่ไม่มีรูปภาพจะไม่เห็นภาพนิ่งและอาจไม่เห็นข้อความที่ซ่อนอยู่ในภาพ การทำเช่นนี้จะทำให้ไม่สามารถเข้าถึงย่อหน้าได้หรืออ่านยากที่สุด
- รูปภาพจะเพิ่มเวลาในการดาวน์โหลดของหน้าเว็บเสมอ หากคุณมีจำนวนตัวพิมพ์ใหญ่มากคุณสามารถเพิ่มเวลาในการดาวน์โหลดสำหรับสิ่งที่หลาย ๆ คนรู้สึกว่าไม่มีนัยสำคัญ
- เบราว์เซอร์บางตัวจะแสดงทั้งตัวอักษรและรูปภาพที่ซ่อนไว้ซึ่งจะทำให้ข้อความย่อหน้าดูแปลก ๆ
- เป็นการยากที่จะทำให้ตัวเลือกนี้เป็นไปได้โดยอัตโนมัติเนื่องจากคุณจำเป็นต้องรู้ว่าตัวอักษรตัวแรกคืออะไรเพื่อให้คุณใช้กราฟิกที่ถูกต้อง ดังนั้นทุกครั้งที่ย่อหน้าถูกแก้ไขคุณอาจต้องสร้างกราฟิกใหม่
ขั้นแรกคุณต้องสร้างกราฟิกของตัวอักษรตัวแรก ฉันใช้ Photoshop เพื่อสร้างตัวอักษร L ด้วยแบบอักษร "Edwardian Script ITC" ฉันทำมันใหญ่ - 300pt ในขนาด จากนั้นผมก็ตัดภาพลงไปถึงระดับต่ำสุดที่เปลือยเปล่าอยู่รอบ ๆ ตัวอักษรและสังเกตความกว้างและความสูงของภาพ
แล้วฉันก็สร้างคลาส "capL" สำหรับย่อหน้าของฉัน นี่คือที่ที่ฉันกำหนดว่าจะใช้ภาพอะไรนำหน้า (เส้นสูง) และอื่น ๆ
คุณจำเป็นต้องใช้ความกว้างและความสูงของภาพเพื่อกำหนดข้อความย่อหน้าและ padding-paragraph ของย่อหน้า สำหรับภาพ L ของฉันฉันต้องการการเว้นช่องขนาด 95px และ 72px
p.capL {line-height: 1em; ภาพพื้นหลัง: url (capL.gif); background-repeat: ไม่ซ้ำ; text-indent: 95px; padding-top: 72px; }แต่นั่นไม่ใช่ทั้งหมด ถ้าคุณปล่อยให้มีอยู่แล้วตัวอักษรตัวแรกจะถูกทำซ้ำในย่อหน้าแรกด้วยกราฟิกจากนั้นในข้อความ ดังนั้นผมจึงเพิ่มช่วงรอบองค์ประกอบแรกที่มีคลาส "เริ่มต้น" - และบอกเบราว์เซอร์ว่าจะไม่แสดงตัวอักษรดังกล่าว:
span.initial {display: none; }และกราฟิกจะแสดงอย่างถูกต้อง คุณสามารถเล่นด้วยการเยื้องข้อความในย่อหน้าเพื่อให้ได้ข้อความที่สะกดได้ถึงตัวอักษร แต่คุณต้องการให้แสดง