Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Una manera ligera y responsive de poner una imagen de fondo a pantalla completa en una web

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.

Formularios con efectos onclick y onfocus de JavaScript pero que utilizan solo HTML y CSS

Imago voragine.net
• Por
Examinando el tema Twentyeleven de WordPress he encontrado una solución bien elegante para hacer formularios sin javascript pero con efectos equivalentes, que funcionan utilizando únicamente HTML y CSS. Con este código obtendrás un formulario del estilo del que puedes usar para comentar en esta página.
Contexto

Cómo generar dinámicamente una hoja de estilos CSS mediante PHP para variar de manera aleatoria los colores

Imago voragine.net
• Por
PHP se usa frecuentemente para generar HTML, pero rara vez para construir de manera dinámica una hoja de estilos CSS. Mediante el uso de variables en las hojas de estilos CSS gestionadas por PHP, podemos crear patrones de diseño abiertos, para luego usarlos según convenga, por ejemplo para variar de manera aleatoria los colores de una web.

Rotar texto con CSS

Imago voragine.net
• Por
Cuando empecé a hacer páginas web, y tras haber trabajado con programas de diseño gráfico, me parecía imposible que no existiese una manera de colocar texto girado noventa grados en una web. Entonces efectivamente no era posible, luego me olvidé siquiera de la posibilidad de hacerlo, y ahora descubro que ya se puede, según con que navegador se esté viendo la web.
Contexto

Los estilos CSS por omisión de los navegadores y cómo resetearlos para controlarlos

Imago voragine.net
[actualizado el ] • Por Enlace permanente

En CSS Newbie explican cómo asignan los navegadores el estilo por omisión a algunos elementos HTML, como el tamaño de los títulos, la separación entre párrafos o el estilo de los items de una lista. Luego dan unas reglas básicas para saltarse estos estilos de los navegadores, lo que se suele hacer reseteando estos estilos para inhabilitar las propiedades que fija cada navegador por sí mismo. Al final del artículo recogen dos ejemplos de reseteo de estilos: el reset.css de yahoo, y el del diseñador Eric Meyer.