31 oct 2013

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)

28 oct 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.

Enlaces a otros blog de puro estilo.css

Estos son los enlaces a los blog sobre css en español que son de inspiración, seguramente encontraran mejor contenido en ellos que en este.

ksesocss: http://ksesocss.blogspot.com/
csslab: http://www.csslab.cl

25 oct 2013

VINCULOS

ESTADOS

Los enlaces en la web tienen diferentes estados, los flasheros pueden comprender esto como los estados de un botón (normal, sobre y presionado).

Sin embargo los estados, se añaden con css usando las siguientes seudoclases:

a:link { } /* Estado normal */
a:visited { } /* Estado de ya cliqueado*/
a::focus { } Ni idea todavía
;a:hover { } /*Estado cuando se posa el mouse sobre el enlace (en móvil no tiene sentido) */
a:active { } /*Estado cuando se hace click sobre enlace, solo visible por unos momentos*/

Los que muchos no saben (y me incluía) es el orden en que se deben colocar en la hoja de estilos y es que por la características "cascadas" del CSS estos comando se sobreponen unos a otros causando interferencias si no se emplean en el orden que coloque anteriormente.

Quien me saco de la duda fue Ralph G. Shulz, demosle un like a su libro.

ERRORES CONOCIDOS y SUGERENCIAS

Bordes azul "fantasmas" /*Solo IE*/

Como cosa rara, Internet Explorer añade a las imágenes en algunas versiones de su navegador un borde "fanstama". Yo lo soluciono simplemente colocando el selector universal (*) seguido por la etiqueta <img> dandole un border igual a 0 y none, aunque este ultimo solo debería bastar.

* img {border: 0 none;}



FAVICON

Colombiano pronuncielo así: Fav-Aicon

FAVICON: El icono de las pestañas, la imagen al lado de la URL en los favoritos, el icono (en algunos navegadores) al lado de la url en la barra de direcciones.

Esta es la forma sencilla de colocar en tu pagina web, editando en el Head off course:


link rel="shortcut icon" href="favicon.ico" ;