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.

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.

Cómo centrar un elemento exactamente en el centro, con CSS

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

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:

Contexto

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.

Reseteando estilos CSS

Imago voragine.net
[actualizado el ] • Por
Cada navegador asigna a las principales marcas HTML unas propiedades de estilo por defecto. Ésto es uno de los factores que provocan que el diseño de una página web no se visualice igual en todos los navegadores. Para que un diseño web tienda a ser homogéneo en todos los navegadores, lo que se conoce como cross browsing, es necesario resetear todos los estilos para poder controlarlos a gusto. Existen miles de CSS para conseguir esto, casi cada diseñador tiene el suyo. En anieto2k he encontrado uno bastante completo.