CROSS-BROWSING

Para hacer pruebas de diseño y responsive design, nada mejor que emular los distintos navegadores y sus versiones, para ello, utilizo las siguientes 2 herramientas online.

http://spoon.net/browsers/ <-- No posee internet explorer, pero es para testeos rapidos
http://browsershots.org/ <-- Sirve para linux y es muy completo.

Efectos de intercambio de imágenes por acciones del click con solo HMTL

Hace poco descubrí que existía una manera con solo atributos HTML para hacer efectos para las imágenes, no puedo decir que sean anticuados, pero no esta más conocerlos:

onmouseover="this.src='01.png';" Cuando uno se posa encima de la imagen

onmouseout="this.src='00.png';" Cuando se Aleja el mouse  

Con esta simple estructura que se agregara a la etiqueta <img> se logra el tan querido efecto hover, no olvidemos 2 cosas: 

1. Después del evento debe ir la sintaxis: this.src='URL'

2. La idea es volver al estado inicial y esto no lo hace automaticamente por lo que es bueno agregar el evento onmouseout

No quiere decir que sean los únicos atributos que se puede usar ya que hay bastantes como experimentar.

ondblclick="this.src='04.png';" Cuando se hace doble clic a la imagen
onclick="this.src='03.png';" Cuando se hace clic
onmousedown="this.src='02.png';" Cuando se hace click a la imagen


Para poder ver un ejemplo en funcionamiento les regalo el código, que utilice para emplear este evento.

<img src="http://midominio.co/imagenes/imagen-boton.png" 
onmouseover="this.src='http://midominio.co/imagenes/imagen-boton-hover.png';" onmouseout="this.src='http://midominio.co/imagenes/imagen-boton.png';" 
height="120" width="160" style="display: block; margin-left: auto; margin-right: auto; padding-top: 10px;"/>

Este tipo de sustitución de imágenes, lograrlas con css o algún lenguaje frontend (jquery en mi caso) es la mejor opción, ya que el cambio lo podemos hacer dinamicamente, sin embargo, en caso de que estemos limitados a no poder hacer uso de archivos externos o scripts, puede ser la mejor opción. Un ejemplo concreto puede ser en Aulas Virtuales como Moodle, donde los docentes editores estan limitados, de esta forma con solo estudiar un poco el código anterior, en la opción de edición "html" pueden crear efectos "hover" muy sencillos.

Scrollbar

De esta forma se puede cambiar el estilo a la barra de desplazamiento.

Inspiración y fuente:

http://cssdeck.com/labs/css3-webkit-vertical-scrollbars

Formularios

Aplicando estilos a los placeholder en los input:

chrome	input::-webkit-input-placeholder{    color:red; }
mozzila	input:-moz-input-placeholder{    color: red; }
Microsoft	input:-ms-input-placeholder{    color: red; }

Este dato me fue revelado por: http://www.csslab.cl/2013/10/23/dando-estilos-a-placeholder/

Inspiración

Bit.ly: Posee una pagina de "error:404" lo mas de genial y sencillo, cuando pones el mouse se mueve como agua. (10-2013)

20cosasqueaprender: Te aventura en un cuento acerca de la web, el efecto "pasar la hoja" de forma correcta. (10-2013)

Recopilacion: Enlaces a Webicons

Recopilación de enlaces a sitios con proyectos que incluyen iconos para la web o tipografías dingbat de iconos o logos:

http://pfefferle.github.io/openwebicons/
http://fortawesome.github.io/Font-Awesome/

Terminos CSS para busquedas

Estas son algunas de la terminologías que normalmente son asociadas con CSS:

FAVICON: Es el icono de las pestañas y favoritos, significa favorite-icon y se pronuncia "favaicon".
NAVICON: Es el icono de menu (aun no estandar), nació por el auge movil.

SCROLLBAR: Barra de Navegación:

CROSS-BROWSER: Entrecruzar los navegadores (o algo así). Se denomina a las tecnicas para realizar pruebas de diseño en los diferentes navegadores y sus versiones.