Gráficas mediante CSS

ByLuis

Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):

10 Free CSS Graph Resources

Vía / Intenta

|

Laboratorio: mostrar que thumbnails has visitado

ByLuis

Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

imagenes-visitadas.png

Para hacerlo es sencillo, creas una capa con un tamaño específico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sí.

Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos así para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}
<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

CSS para impresión sin cambiar totalmente el aspecto de la web

ByLuis

Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la línea de diseño que se ve en pantalla.
Vía / Digg

|

Selectores CSS3 que soportará Opera

ByLuis

http://sentidoweb.com/img/2007/01/opera_logo-thumb.png

En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:

  • :root: selecciona el elemento padre del documento, que normalmente será el <html>
  • :not(s): representa a todos los elementos del documento excepto aquellos que NO coincidan con el selector "s" (ej.: not(#menu) ).
  • :nth-child(n): representa al hijo n de un elemento. Ej.: div:nth-child(2) seleccinará todos los elementos div que sean segundo hijo de cualquier elemento (gracias Federico).
  • :nth-of-type(n): representa al hermano n de un elemento. Ej.: div:nth-of-type(2) seleccinará el segundo elemento del div especificado.
  • :first-of-type: representa al primer elemento que es el primer elemento de su tipo dentro de la lista de hijos del elemento padre.
  • :target

Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados

  • :empty : representa a un elemento que no tiene ningún tipo de hijo.
  • :nth-last-child(n): representa a un elemento que tiene n hermanos después de él.
  • :nth-last-of-type(): representa a un elemento que tiene n hermantos del mismo tipo.
  • :last-child: represetna al ultimo hijo de un elemento.
  • :last-of-type: representa al último hermano de su tipo. Sería lo mismo que :nth-last-of-type(1).
  • :only-child: representa a un elemento cuyo padre no tiene ningún otro elemento hijo.
  • :only-of-type: representa a un elemento cuyo padre no tiene otro elemento hijo del mismo tipo.

Vía / Slightly Ajar

12 técnicas básicas de plantillas CSS

ByLuis

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorías, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
csstemplates.png
Se pueden descargar los diseños cuando los visualizas.
12 Basic CSS Templates
Vía / Digg

Dando estilo a los formularios con CSS

ByLuis

Roger Johansson revisa su clásico “styling from controls“, artículo en el que mostraba cómo se ven los estilos CSS aplicados sobre los controles de formularios en diversos navegadores y sistemas operativos.

Demostraba además que intentar que los elementos de formulario se vean igual en todos los navegadores es una tarea imposible.

Roger acaba de publicar una revisión incorporando nuevos navegadores y sistemas operativos y agregando nuevos controles. En total revisa los siguientes controles en 14 combinaciones navegador – sistema operativo:

Una actualización necesaria, un recurso indispensable.

hCard con CSS

ByLuis

En 24 ways nos vuelven a regalar un buen artículo sobre cómo mostrar las hCard con estilos.
Claro, el diseño que han realizado quizás no se amolde al nuestro, pero la técnica que usan está bastante bien: usar una imagen de fondo y luego cuatro imágenes para cada esquina.
hcard.gif
Styling hCards with CSS

|

Laboratorio: crea tu propio CSS Evolution

ByLuis

El otro día hablábamos sobre CSS Evolution, una forma de ver paso a paso el efecto de las CSS sobre nuestra página. Algo que supongo que a la mayoría nos ha gustado y que puede que queramos verlo en nuestra propia web.

cssevolution.png

Os paso el javascript necesario para hacerlo, el cual es posible que no sea del todo eficiente, pero bueno, la falta de tiempo no me ha permitido hacer más, entre otras cosas solo funciona para Firefox.

Lo primero es tener los estilos en un link:

<link rel="stylesheet" type="text/css" media="screen" href="sw-large.css" />

Una vez cargada la página, mostrándose con estilos, se desactivará la etiqueta link y luego se recuperará el texto de todos lo estilos, para volver a activar la etiqueta e ir añadiendo los estilos uno a uno cada cierto tiempo.

// Donde almaceno los estilos para luego ir incluyéndolos uno a uno
var antiguas;
function ini() {
// Se podría hacer para que cogiera todos los links
var link = document.getElementsByTagName("link")[0];
link.disabled = true;
// Avisa para que no te pille despistado
alert("COMENZAR");
// Recupera los textos de todos los estilos
var reglas = document.styleSheets[0].cssRules;
antiguas = new Array();
for (var i=0; i<reglas.length; i++) {
antiguas[i] = reglas[i].cssText;
}
// Quita todos los estilos
for (var i=0; i<reglas.length; i++) {
document.styleSheets[0].deleteRule(0);
}
// Inserta todos los estilos uno a uno
setTimeout("insertaCSS(0)", 500);
link.disabled = false;
}
// Añade los estilos
function insertaCSS(i) {
document.styleSheets[0].insertRule(antiguas[i], i);
if (i+1<antiguas.length) {
setTimeout("insertaCSS("+(i+1)+")", 500);
} else {
alert("FIN");
}
}
window.onload = function() {
ini();
};

Es posible que estéis algún rato sin ver cambios, depende de si vuestros estilos son generales o algo concretos, por lo que no afectarán a ciertas partes de la página.

Por cierto, he encontrado un fallo a la hora de recuperar el texto de los estilos, que cuando el texto es algo así:

p {
color: blue;
}

Debido a la línea vacía, devuelve un estilo undefined. Bueno, tampoco lo he mirado con detenimiento, pero creo que si se da ese error.

Ejemplo