asd

17

Abr

Selectores CSS 2 para Internet explorer 7+

Publicado por: LeoBaraldi

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
categorias: CSS Coment.: -

19

Jun

Maquetar sitios con css

Publicado por: LeoBaraldi

Si se te complica la hora de maquetar con css, aca tenes esta herramienta que lo hace por vos.

http://csscreator.com/tools 

categorias: CSS , HTML - XHTM , Recursos Coment.: -

19

Abr

Estilizar formularios con css

Publicado por: LeoBaraldi

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/

categorias: CSS , Diseño Web , HTML - XHTM , Recursos Coment.: -

19

Abr

Generador de cajas con bordes redondeados

Publicado por: LeoBaraldi

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

categorias: CSS , Diseño Web , Recursos Coment.: -

16

Dic

Calculadora y conversor de pixel a em

Publicado por: LeoBaraldi

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/

categorias: CSS Coment.: -

16

Dic

Centrar película flash en el navegador

Publicado por: LeoBaraldi

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:

Clic para ver Texto Plano
HTML:
  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.:

Clic para ver Texto Plano
CSS:
  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

Clic para ver Texto Plano
HTML:
  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.

descargar archivos
categorias: CSS Coment.: 1

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi