CSS3 - ส่วนต่อประสานผู้ใช้

คุณสมบัติอินเทอร์เฟซผู้ใช้ช่วยให้คุณสามารถเปลี่ยนองค์ประกอบใด ๆ เป็นหนึ่งในองค์ประกอบส่วนติดต่อผู้ใช้มาตรฐานต่างๆ

คุณสมบัติทั่วไปบางอย่างที่ใช้ในส่วนต่อประสานผู้ใช้ css3

ซีเนียร์	มูลค่าและรายละเอียด
1	appearance ใช้เพื่อให้ผู้ใช้สร้างองค์ประกอบเป็นองค์ประกอบส่วนติดต่อผู้ใช้
2	box-sizing อนุญาตให้ผู้ใช้แก้ไของค์ประกอบบนพื้นที่ได้อย่างชัดเจน
3	icon ใช้เพื่อแสดงไอคอนบนพื้นที่
4	resize ใช้เพื่อปรับขนาดองค์ประกอบที่อยู่บนพื้นที่
5	outline-offset ใช้ในการวาดโครงร่างด้านหลัง
6	nav-down ใช้เพื่อเลื่อนลงเมื่อคุณกดปุ่มลูกศรลงในปุ่มกด
7	nav-left ใช้เพื่อเลื่อนไปทางซ้ายเมื่อคุณกดปุ่มลูกศรซ้ายในปุ่มกด
8	nav-right ใช้เพื่อเลื่อนไปทางขวาเมื่อคุณกดปุ่มลูกศรขวาในปุ่มกด
9	nav-up ใช้เพื่อเลื่อนขึ้นเมื่อคุณกดปุ่มลูกศรขึ้นในปุ่มกด

ตัวอย่างคุณสมบัติการปรับขนาด

คุณสมบัติการปรับขนาดมีค่าร่วมกันสามค่าดังที่แสดงด้านล่าง -

horizontal
vertical
both

การใช้ both ค่าในคุณสมบัติการปรับขนาดในส่วนต่อประสานผู้ใช้ css3 -

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint.com</div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

CSS3 Outline offset

Out line หมายถึงการลากเส้นรอบองค์ประกอบที่ด้านนอกของเส้นขอบ

<html>
   <head>
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>TutorialsPoint</div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -