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>

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