Selectores CSS 2 para Internet explorer 7+

Ya que Últimamente Internet Explorer 6 esta siendo decantado por la mayoría de los usuarios, hay selectores de css2 que podes hacer uso habitual solucionando o haciéndonos mas fácil la vida del maquetador!

Sintaxis Descripción ie6 ie7 ie8
A > B Elementos B que sean hijos de X
Ejemplo:
h1>p{
color:#FF0000;
}
Todos los parrafos que esten luego de un titulo seran de color rojo.
No Si Si
.clase1.clase2.clase3 Utilizacion de multiples clases.
Ejemplo:
<p class=”clase1 clase2 clase3″>Hola</p>
No Si Si
A[href] Elementos que tengan el atributo especificado
Ejemplo:
<a href=”xxx”>
No Si Si
A+B Este a diferecnia de A>B aplica los cambios solo al primer hermano.
Ejemplo:
h1+p{
color:#FF0000;
}
Solo sera rojo el primer parrafo despues de un titulo
No Si Si
A:hover B Elemento y hijo de X en el momento del over sobre éste.
Ejemplo:

tr:Hover td{
Color:#FF0000;
}

No Si Si
X:first-child:hover Se aplica al situarse sobre el primer elemento hijo de X
td:first-child:hover{
Color:#FF0000;
}
No Si Si
X:hover Se aplica al situarse sobre el elemento
Ejemplo:
a:hover{
Color:#FF0000;
}
No Si Si
X:first-child Elemento X que es el primer hijo de su elemento padre
tr td:first-child{
Color:#FF0000;
}
No Si Si
X:focus Elementos que estén en foco
a:focus{
Color:#FF0000;
}
No No Si
#X:before
#X:after
Generan contenido antes o después del elemento X No No Si

Estilizar formularios con css

Esta es una excelente aplicasion realizada por badboy para estilizar o adornar mejor nuestros formularios usando CSS y Java el resultado son formularios muy agradables a la vista y personalizables si es que nos animamos a modificar un poquito el código y las imagenes, muy recomensable si queres despedirte de los habituales y aburridos formulario.

http://www.badboy.ro/articles/2005-07-23/niceforms_preview/

Generador de cajas con bordes redondeados

Bueno como el titulo lo dice es tal cual, solo elegimos los colores que vamos a usar y listo nos regala la div con los bordes redondeados listos para usar en nuestra web, muy interezante para aquellos que comienzan y pueden de esta manera viendo el codigo entender como se hace ;)

http://www.neuroticweb.com/recursos/css-rounded-box/index.php?color=FFFFFF&fondo=F2F2F2

Calculadora y conversor de pixel a em

Cuantas veces nos encontramos de que necesitamos trabajar con valores relativos para las dimensiones de un nuevo sitio, y sobretodo cuando usamos ccs con div. Estos valores relativos (em) nos pueden acarrear dolores de cabeza por las pruebas que debemos hacer hasta conseguir las proporciones adecuadas si es que no somos muy duchos en el tema.

Navegando por ahí encontre esta curiosa calculadora que nos realiza el trabajo de conversión de una manera mas fácil, ahorrandonos muchos dolores de cabeza. Aquí el link: http://riddle.pl/emcalc/

Centrar película flash en el navegador

Muchas veces nos encontramos con el problema de como resolver este simple requerimiento de nuestros clientes que es centrar el sitio al medio de nuestro navegador sin importar la resolución en el cual se este mostrando.

Para resolver esto lo que vamos a hacer es simplemente usar un poquito de ccs y veremos que no es tan complicado y nos ayudara mucho a la hora de desarrollar nuestros sitios.

Lo primero que heremos sera crear una nueva hoja de estilos, o usar la que ya tenemos si es que estamos usando una. Las hojas de estilos es un simple archivo de texto que guardaremos con la extensión “mihoja.css”.
Para vincular nuestra hoja de estilos con nuestro html debemos agregar esta linea en el HEAD:

  1. <link href="css/centrar.css" rel="stylesheet" type="text/css">

, esta linea vincula nuestro css que esta en la carpeta CSS.

En ella vamos a colocar las siguientes líneas.:

  1. body{
  2. text-align:center;
  3. }
  4. /* el body es el cuerpo de nuestro html, y el text-align: center se refiere a que los contenidos dentro del body se aliñen al centro*/
  5.  
  6. #contenido{
  7. margin-top: -100px;
  8. margin-left: -100px;
  9. position: absolute;
  10. top: 50%;
  11. left: 50%;
  12. }
  13.  
  14. /*con este conjunto lo que haremos es crear una id para luego aplicarsela a una div, como podemos ver los margin top y left le pusimos -100px que es la mitad de lo que mide nuestra película, lo que resta de importante es que luego le estamos indicando que su posición tanto top (superior) y left (izquierda) sean de un 50%. De esta manera logramos sacar el punto central de nuestra película, la cual se posicionara automáticamente al centro de nuestro navegador.*/

El siguiente paso seria colocar en nuestro html una div a la cual le asignaremos la id “contenido”, así que por lo tanto lo único que debemos hacer es colocar los siguiente entre nuestra película flash

  1. <div id="contenido">mi película flash</div>

Lo mejor de este ejemplo es que te descargues los archivos y veas insitu como estan hechos pero como puedes ver es bastante simple y no hay muchos secretos. Esta manera de centrar nuestras películas en flash es valido para IE y Firefox.