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

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

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

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

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

โพสต์โดย jamepiyawat » 24/05/2019 4:17 pm

บางครั้งที่เราจะเป็นจะต้องทำหน้าเว็บหน้าหนึ่งให้มีตัวอักษรอยู่ในกล่องสีเพื่อที่จะทำให้ตัวอักษรของเราเด่นขึ้นไปอีกวันเรามีวิธีที่จะทำให้ตัวอักษรของเราเด่นขึ้นไปด้วน 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) เปิดดู 167 ครั้ง




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

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

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

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

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