Skip to main content

Disseny de Formularis i Posicionament

Aquest capítol cobreix les propietats més visuals i interactives per personalitzar formularis i entendre com posicionar elements a la pantalla de manera precisa.

Estilització de Formularis​

background-color​

Defineix el color de fons d’un element.

input {
  background-color: blue;
}

border-radius​

Defineix les punteres arrodonides. Accepta un valor o quatre valors (en sentit horari).

input {
  border-radius: 10px;
}

input {
  border-radius: 10px 40px;
}

input {
  border-radius: 40px 40px 40px 0;
}

cursor​

Defineix com es veu el cursor sobre l’element.

button {
  cursor: pointer;
}

box-shadow​

Aplica una ombra a l’element. La sintaxi és:

box-shadow: offset-x offset-y blur-radius spread-radius color;

Exemples:

box-shadow: 10px 5px 5px 0px red;
box-shadow: 60px -16px teal;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px red, -1em 0 0.4em olive;

outline​

Aplica una línia al voltant d’un element, sense afectar la mida total (a diferència del border).

outline: 5px solid red;

Comparació amb border:

outline: 5px solid red;
border: 5px solid black;

Posicionament amb position​

La propietat position controla com es col·loquen els elements dins la pàgina.
Afecta com responen a top, right, bottom, left.

static (valor per defecte)​

  • L’element segueix el flux natural
  • No respon a top, left, etc.
div {
  position: static;
}

relative​

  • Es posiciona relativament a si mateix
  • Manté l’espai original
div {
  position: relative;
  top: 55px;
  left: 55px;
}

absolute​

  • Es posiciona respecte del primer pare amb position diferent de static
  • Es treu del flux del document
div {
  position: absolute;
  top: 0;
  left: 0;
}

fixed​

  • Es posiciona respecte a la finestra del navegador
  • No es mou amb l’scroll
div {
  position: fixed;
  top: 0;
  left: 0;
}

sticky​

  • Es comporta com relative fins que arriba a un punt, i llavors es queda fixat
  • Molt útil per a headers que es queden enganxats
div {
  position: sticky;
  top: 0;
}

Aquest capítol et dona eines visuals i estructurals per crear formularis atractius i entendre com col·locar elements amb flexibilitat i precisió a la teva pàgina.