Easywd.lv Kā izveidot mājas lapu

CSS3 lietotāja interfeiss

Lietotāju novērtējums:  / 1
SliktākaisLabākais 


CSS3 User Interface

CSS3 ir jaunas lietotāja interfeisa funkcijas, piemēram, izmēru maiņas elementi, iezīmē, un kārbas izmēriem.

Šajā nodaļā Jūs uzzināsiet par šādiem lietotāja interfeisa īpašības:

  • mainīt
  • izklāstīt-ofseta

Browser Support

Tabulā skaitļi precizē pirmo pārlūka versiju, kas pilnībā atbalsta īpašumu.

Numbers seko -webkit- vai -moz- norādīt pirmo versiju, kas strādāja ar prefiksu.

Property     
resize Not supported 4.0 5.0
4.0 -moz-
4.0 15.0
outline-offset Not supported 4.0 5.0
4.0 -moz-
4.0 9.5

CSS3 mērogošanas

Izmainīsiet īpašuma nosaka, vai ir vai nav elements ir ar maināmu lietotājs.

Tas div elements ir resizable lietotājs (strādā Chrome, Firefox, Safari un Opera).

Nākamajā piemērā ļauj lietotājam mainīt tikai platumu <div> elementu:

Piemērs

div {
    resize: horizontal;
    overflow: auto;
}

Izmēģiniet to pats »

Nākamajā piemērā ļauj lietotājam mainīt tikai augstumu <div> elementu:

Piemērs

div {
    resize: vertical;
    overflow: auto;
}

Izmēģiniet to pats »

Nākamajā piemērā ļauj lietotājam mainīt gan augstumu un platumu <div> elementu:

Piemērs

div {
    resize: both;
    overflow: auto;
}

Izmēģiniet to pats »

CSS3 Outline Nobīde

Kontūra-ofseta īpašums piebilst atstarpi starp izklāstu un malas vai robežas elementa.

Kontūras atšķiras no robežām divos veidos:

  • Izklāsts ir līnija novilkta ap elementiem, ārpus pierobežas malas
  • Izklāsts nav aizņem vietu
  • Kontūra var būt ne-taisnstūra
Tas div ir izklāstu 15px ārpus pierobežas malas.

Nākamajā piemērā izmanto kontūras-kompensēt īpašumus, lai pievienotu 15px atstarpi starp robežu un izklāstu:

Piemērs

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

Izmēģiniet to pats »

CSS3 User Interface Properties

Tabulā ir uzskaitīti visi lietotāja interfeisa īpašības:

PropertyDescription
box-sizing Allows you to include the padding and border in an element's total width and height
nav-down Specifies where to navigate when using the arrow-down navigation key
nav-index Specifies the tabbing order for an element
nav-left Specifies where to navigate when using the arrow-left navigation key
nav-right Specifies where to navigate when using the arrow-right navigation key
nav-up Specifies where to navigate when using the arrow-up navigation key
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user