Capa de Transparencia

[pzin]

La capa con transparencia no tiene mayor dificultad:

Código CSS:

div#identificacion {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255,255,255,0.3);
  z-index: 1000;
}
 

Puedes usar tanto rgba() como hsla() para darle un color de fondo, el último valor indica el nivel del canal alfa, que va de 0 a 1.

Luego en ese elemento puedes meter tu formulario lo que quieras.

Para hacerlo puramente en CSS, puedes ponerle un valor para ocultar por defecto esa capa de identificación:

Código CSS:

display: none;
 

Y crear un enlace del tipo:

Código HTML:

<a href="#identificacion">Login</a>
 

Luego para mostrar ese login simplemente usas la pseudo clase :target:

Código CSS:

div#identificacion:target {
  display: block;
}