เรียนรู้วิธีการใช้ CSS เพื่อสร้างตัวพิมพ์ใหญ่ที่น่าสนใจสำหรับย่อหน้าของคุณ แม้จะมีเทคนิคการเปลี่ยนรูปภาพง่ายๆในการใช้ภาพกราฟิกสำหรับฝาครอบเริ่มต้นของคุณ
ลักษณะพื้นฐานของหมวกเริ่มต้น
มีสามรูปแบบพื้นฐานของตัวพิมพ์ใหญ่ในเอกสาร:
- ยก - โดยทั่วไปซึ่งเป็นตัวอักษรตัวแรกที่มีขนาดใหญ่และอยู่ในบรรทัดเดียวกับข้อความปัจจุบัน
- ปรับตัวลดลง - ยังค่อนข้างทั่วไปที่ตัวอักษรตัวแรกมีขนาดใหญ่และหล่นลงมาใต้บรรทัดแรกของข้อความ ข้อความต่อไปนี้จะลอยอยู่รอบ ๆ
- ติดกัน - ที่ตัวอักษรตัวแรกอยู่ในคอลัมน์เดียวข้างส่วนที่เหลือของข้อความ นี่เป็นเรื่องปกติในการพิมพ์มากกว่าการออกแบบเว็บ
ตัวพิมพ์ใหญ่หรือหมวกแบบหล่นจะคุ้นเคยมาก พวกเขาเป็นวิธีที่ดีในการแต่งเนื้อเพลงนานและน่าเบื่อ และด้วยคุณสมบัติ CSS: อักษรตัวแรกคุณสามารถกำหนดวิธีสร้างตัวอักษรตัวแรกของคุณได้อย่างง่ายดาย
สร้างแคชเริ่มต้นแบบง่าย
สิ่งที่คุณต้องทำเพื่อสร้างฝาครอบเริ่มต้นที่ง่ายขึ้นคือการทำให้ตัวอักษรตัวแรกของย่อหน้าของคุณมีขนาดใหญ่ขึ้นด้วยองค์ประกอบปลอมตัวอักษรตัวแรก:
p: อักษรตัวแรก {font-size: 3em; }
แต่เบราว์เซอร์จำนวนมากเห็นว่าตัวอักษรตัวแรกมีขนาดใหญ่กว่าส่วนที่เหลือของบรรทัดในบรรทัดดังนั้นจึงทำให้ชั้นนำเท่ากับสิ่งที่ทำให้รู้สึกสำหรับจดหมายฉบับแรกไม่ใช่ส่วนที่เหลือของบรรทัด โชคดีที่นี้เป็นเรื่องง่ายที่จะแก้ไขด้วยองค์ประกอบบรรทัดแรกปลอมและคุณสมบัติบรรทัดสูง:
p: อักษรตัวแรก {font-size: 3em; }
p: บรรทัดแรก {line-height: 1em; }
เล่นด้วยความสูงของเส้นในเอกสารจนกว่าคุณจะได้ขนาดที่เหมาะสมกับข้อความ
เล่นกับหมวกครั้งแรกของคุณ
เมื่อคุณเข้าใจวิธีสร้างหมวกเริ่มต้นแล้วคุณสามารถแต่งตัวในเสื้อผ้าแฟนซีเพื่อให้โดดเด่นได้ เล่นด้วยสีพื้นหลังเส้นขอบหรืออะไรก็ได้ที่คุณต้องการ สไตล์ที่ค่อนข้างง่ายคือการย้อนกลับสีของแบบอักษรและสีพื้นหลังของคุณสำหรับตัวอักษรตัวแรก:
p: ตัวอักษรตัวแรก {
ขนาดตัวอักษร: 300%;
สีพื้นหลัง: # 000;
สี: #fff;
}
p: บรรทัดแรก {line-height: 100%; }
เคล็ดลับอีกอย่างหนึ่งก็คือการให้ความสำคัญกับบรรทัดแรก นี่อาจเป็นเรื่องยุ่งยากหากใช้ CSS เนื่องจากเส้นตรงกลางของบรรทัดข้อความจะแตกต่างกันถ้ารูปแบบของคุณมีความยืดหยุ่น คุณสามารถเยื้องบรรทัดแรกของคุณได้พอที่จะทำให้ตัวอักษรตัวแรกปรากฏอยู่ตรงกลาง เพียงแค่เล่นกับเปอร์เซ็นต์ใน text-indent ของย่อหน้าจนกว่าจะดูถูกต้อง:
p: ตัวอักษรตัวแรก {
ขนาดตัวอักษร: 300%;
สีพื้นหลัง: # 000;
สี: #fff;
}
p: บรรทัดแรก {line-height: 100%; }
แอดเดรสแคปเริ่มต้นใช้งานได้ดีกับ 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; }
และกราฟิกจะแสดงอย่างถูกต้อง คุณสามารถเล่นด้วยการเยื้องข้อความในย่อหน้าเพื่อให้ได้ข้อความที่สะกดได้ถึงตัวอักษร แต่คุณต้องการให้แสดง
