ใส่เงาให้กรอบรูปภาพ ใส้ตัวข้อความลงในรูปภาพ

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

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

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

ใส่เงาให้กรอบรูปภาพ ใส้ตัวข้อความลงในรูปภาพ

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

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

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

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style> 
            div
                {width:300px;
                height:100px;
                background-color:green;
                -moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
                box-shadow: 10px 10px 5px #888888;}
        </style>
    </head>
    <body>
        <div>กล่องข้อความของฉัน</div>
    </body>
</html>

จาก code จะเห็นได้ว่าเราสร้างกล่องขนาด 300px * 100px และพื้นหลังเป็นสีเขียว จากนั้นก็เป็นคำสั่ง ขนาดของเงาและความเอียงของเงานั้นเอง


ผลลับที่ได้
Selection_402.png
Selection_402.png (3.01 KiB) Viewed 1046 times


เท่านี้เราก็สามารถสร้างกล่องข้อความที่มีตัวอักษรแบบเด่นเด่นได้แล้ว

ศึกษาข้อมูลเพิ่มเติมได้ที่
Google Search Adsense Map eart firefox
CSS Knowledge
ความรู้ทั่วไป
ถาม - ตอบ คอมพิวเตอร์
พูดคุยเรื่องทั่วไป จับฉ่าย

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 50