La propiedad scroll-margin de CSS es una de esas en las que he pensado desde hace años como una que debería existir. Y no sé cómo no he dado con ella hasta ahora, a pesar de que está disponible desde el lanzamiento de CSS3. Gran descubrimiento, aunque sea tardío.
scroll-margin permite definir el margen de un elemento respecto a los límites relativos del elemento que los contiene. Quién no ha necesitado esto cuando se utilizan anchors y se crea un menú con enlaces que llevan a distintas secciones --distintas alturas en el scroll-- de la página actual.
Pequeño snippet de CSS para conseguir una web con una imagen de fondo a pantalla completa. La solución funciona en todo tipo de dispositivos, escritorio y móviles.
html, body { overflow: hidden; height: 100%;}
body {margin: 0; padding: 0; background: #ffffff url("bg.png") repeat-x 50% 50% / contain;}
El último parámetro de background, / contain, es background-size y define cómo se comporta la imagen en diferentes proporciones de pantalla. Dos valores interesantes son contain y cover.
Para centrar un elemento de unas dimensiones concretas, por ejemplo de 100px de alto y 200px de ancho, en el centro de la página podemos usar los siguientes atributos de CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Cómo maquetar texto en varias columnas con CSS. Básicamente las órdenes de CSS para controlar las columnas son cuatro: column-count que deternina el número de columnas, column-width su ancho, column-gap el espacio entre ellas y column-rule que define un borde entre columnas.