ใส่เงาให้กับตัวอักษร

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

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1355
Joined: 21/05/2019 10:45 am

ใส่เงาให้กับตัวอักษร

Post by jamepiyawat » 24/05/2019 6:05 pm

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

Code: Select all

<html>
    <head>
        <title>เพิ่มเงาตัวอักษร</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h1
            {text-shadow:5px 5px 5px #46b830;}
        </style>
    </head>
    <body>
        <h1>ข้อความของฉัน</h1>
    </body>
</html>

จากcodeจะเห็นได้ว่าเราเปิดstyleแล้วใช้code text-shadow เพิ่อให้เกิดเงาขึ้นมานั้นเองและเรายังสามารถเลือกสีของเงาขนาดของเงาได้ด้วย

ผลลับที่ได้

Selection_403.png
Selection_403.png (16.19 KiB) Viewed 384 times


แค่นี้เราก็สามารถทำให้ตัวอักษรของเราดูเด่นและน่าอ่านขึ้นมาเลยทันทีแถมเป็นcodeง่าย ๆ ไม่ต้องทำความเข้าใจกับมันใหม่ให้เปลี่องเวลาอีกด้วยหวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests