Tip CSS : Text Shadow Effects (เอฟเฟ็คเงาของตัวอักษร)

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

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

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Tip CSS : Text Shadow Effects (เอฟเฟ็คเงาของตัวอักษร)

โพสต์โดย pprn » 11/07/2018 2:46 pm

    CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ

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

รูปแบบโค้ด


    อธิบายโค้ด
      - xpx ตัวเลข x คือ ตัวเลขที่สามารถกำหนดได้ว่าจะใส่เลขอะไรก็ได้
      - Text_edit คือ ข้อความที่ต้องการจะใส่เงาลงไป

ตัวอย่างโค้ด

    แบบที่ 1


    ผลลัพธ์แบบที่ 1

    12.JPG
    12.JPG (14.24 KiB) เปิดดู 64 ครั้ง

    แบบที่ 2

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
       text-shadow: 3px 3px red;
    }
    </style>
    </head>
    <body>

    <h1>Text-shadow effect!</h1>

    </body>
    </html>

    ผลลัพธ์แบบที่ 2

    1-3.JPG
    1-3.JPG (14.25 KiB) เปิดดู 64 ครั้ง

    แบบที่ 3

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    h1 {
        text-shadow: 2px 2px 5px red;
    }

    </style>
    </head>
    <body>

    <h1>Text-shadow effect!</h1>

    </body>
    </html>

    ผลลัพธ์แบบที่ 3

    1-4.JPG
    1-4.JPG (12.84 KiB) เปิดดู 64 ครั้ง

    แบบที่ 4

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
        text-shadow: 0 0 3px #FF0000;
    }
    </style>
    </head>
    <body>

    <h1>Text-shadow effect!</h1>

    </body>
    </html>

    ผลลัพธ์แบบที่ 4

    1-5.JPG
    1-5.JPG (12.53 KiB) เปิดดู 64 ครั้ง

    แบบที่ 5

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }
    </style>
    </head>
    <body>

    <h1>Text-shadow effect!</h1>

    </body>
    </html>

    ผลลัพธ์แบบที่ 5

    1-6.JPG
    1-6.JPG (11.1 KiB) เปิดดู 64 ครั้ง


----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน