CSS3 - Interfaccia utente

La proprietà dell'interfaccia utente consente di modificare qualsiasi elemento in uno dei numerosi elementi dell'interfaccia utente standard.

Alcune delle proprietà comuni che vengono utilizzate nell'interfaccia utente css3.

Sr.No. Valore e descrizione
1

appearance

Utilizzato per consentire all'utente di creare elementi come elementi dell'interfaccia utente.
2

box-sizing

Consente agli utenti di fissare gli elementi sull'area in modo chiaro.
3

icon

Utilizzato per fornire l'icona nell'area.
4

resize

Utilizzato per ridimensionare gli elementi che si trovano nell'area.
5

outline-offset

Utilizzato per disegnare il dietro il contorno.
6

nav-down

Utilizzato per spostarsi verso il basso quando si preme il pulsante freccia giù nel tastierino.
7

nav-left

Utilizzato per spostarsi a sinistra quando si preme il pulsante freccia sinistra nel tastierino.
8

nav-right

Utilizzato per spostarsi a destra quando si preme il pulsante freccia destra nel tastierino.
9

nav-up

Utilizzato per spostarsi in alto quando si preme il pulsante freccia su nel tastierino.

Esempio di proprietà di ridimensionamento

La proprietà Resize ha tre valori comuni come mostrato di seguito:

  • horizontal
  • vertical
  • both

Utilizzo di both valore nella proprietà resize nell'interfaccia utente 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>

Produrrà il seguente risultato:

CSS3 Outline offset

Fuori linea significa tracciare una linea attorno all'elemento all'esterno del bordo.

<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>

Produrrà il seguente risultato: