Posts Tagged ‘ css ’

pseudoclases dinamicas, :hover :active :focus, como darle mas interactividad a los links con CSS


con CSS y un poco de imaginacion podemos darle mucha mas nteractidad a nuestros documentos html, en este caso para los estados sobre, activado, y focus.

  • la pseudoclase :hover entra en actividad cuando un puntero esta sobre el link o elemento sin activarlo
  • la pseudoclase :active entra en actividad en el momento que el usuario presiona el mouse sobre el elemento, hasta que lo suelta
  • la pseudoclase :focus se activa cuando se hace foco sobre un elemento, como por ejemplo cuando nos ponemos a rellenar yy escribir dentro de un formulario
  • a:hover{color:red;}
    a:visited {color:blue;}

    un elemento puede combinar muchas pseudo clases a la vez

    CSS 2.1 no define si el padre del elemento en cuestion esta hover o active, es indiferente
    a:hover tiene que ser puesto despues de a:link y a:visited, de lo contrario las caracteristicas de hover bañaran el link entero por el tema de la cascada
    ejemplos
    a:focus { background: yellow }
    a:focus:hover { background: white }

    Anuncios

pseudoclases css :link y :visited, como darle formato a links en css


los navegadores normalmente muestran los links de dos formas, separando los ya visitados, de los no visitados

  • La pseudoclase:link solicita los eslabones que aún no han sido visitados.
  • La pseudoclase:visited se aplica una vez que el eslabón ha sido visitado por el usuario.

Los dos estados son mutuamente exclusivos.

La el lenguaje del documento determina cuales elementos son links Por ejemplo, en HTML4, las pseudoclases de eslabón se aplican a los elementos con un atributo de “href”. Así, las dos declaraciones CSS siguientes 2.1 tienen un efecto similar:

a:link { color: red }
:link { color: red }

en el siguiente link
external link (A class=”external” href=”http://out.side/”>external link</A)
para el estado visitado
a.external:visited { color: blue }


mandame a Menéame


mandame a Fresqui


mandame a Twitter

Mejores diseños para seo


HTML es un estándar propuesto por el Consorcio W3C, y se pretende conseguir que todos los documentos web sean compatibles en cualquier navegador (no solamente en ordenadores, sino también en cualquier dispositivo).

CSS son las siglas de “Cascade StyleSheet”, y especifica la forma del diseño de los documentos. Una misma página web (un mismo documento HTML, por ejemplo) puede ser vista de diferente forma en un PC que un PDA, gracias a diferentes hojas de estilo CSS.

Sigue leyendo

15 técnicas css, incluye esconder texto para seo con css


fuente: elWebmaster.com

1. El posicionamiento absoluto dentro de un elemento posicionado relativamente

Poner un elemento absolutamente posicionado dentro de un elemento en posición relativa se traducirá en la posición calculada sobre su antepasado más cercano posicionado. Esta es una excelente técnica para conseguir que un elemento se pose en un determinado lugar en que lo necesites, por ejemplo, una insignia de cabecera.

Sigue leyendo

Que es y para que sirve un framework css


¿Qué es un framework CSS?

todo lo que tenes que saber acerca de frameworks para css, para agilizar el tiempo y los resultados escribiendo tus css

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

Sigue leyendo

Sencillo truco para una css mucho mas limpia.


Copia el siguiente código en tu hoja de estilo y te mostrará todas las posiciones de las capas, por niveles, interesante opción si estas depurando div/css, borralo al terminar o ponlo en una hoja diferente y despues borra el linkeado

también puedes mantener el maquetado por un lado, las opciones tipográficas por otro, este estilo por otro y asi, según te convenga.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

Como hacer barras de navegación css, rápido y efectivo


En esta oportunidad les voy a hacer un  review de este pequeño programa de blumentals, muy especifico por cierto, solo se usa para hacer botones y menues CSS, todo pequeño, pero a la vez es la solución mas grande en el ahorro del tiempo factor clave para muchos, veamos que potencia real tiene este peque:

Sigue leyendo