Mostrando las entradas con la etiqueta DESIGN. Mostrar todas las entradas
Mostrando las entradas con la etiqueta DESIGN. Mostrar todas las entradas

miércoles, noviembre 16, 2011

La guía defitiva de hacks css

Años y años de probar uno y otro, fallar y acertar, utilizar javascript para corregir la visualización en los sitios en los diversos navegadores, me llevó a tener una colección de hacks (los cuales no son de mi autoría, sino que los he encontrado en diversos blogs) que hoy quisiera compartir para quienes se encuentran en ese momento, buscando y buscando por donde sea un código que nos haga hacer que el navegador muestre nuestra página tal y como la concebimos.
De entrada debo decir que usarlos todos al mismo tiempo es un error; seguramente nuestra hoja de estilos esta mal y es necesario replantearlo.
Los hacks aquí presentados son para ser usados en caso de REALES emergencias, de ser posible no usarlos ya que, la mayoría no pasan la validación en la W3C.
Pero cuando se dan esos casos en los que no sabemos qué sucedió, esta lista ayudará para salir avante de estas situaciones cuando el tiempo (que seguramente así es en todo momento) es crucial.
No son todos los que existen, pero estos son los que a mi me han funcionado, espero a alguien más le sirvan:

HACKS PARA FORZAR A NAVEGADORES A CUMPLIR LAS REGLAS (ESPECIALMENTE IE)
No todos estas reglas cumplen con los estándares de la W3C, por lo que la validación no pasará en algunos casos. Usarse sólo en caso muy necesario.

#selector: clase, id u objeto al que se requiera aplicar la regla (por ejemplo: #container, .main).
atributo: objeto css al que se haga referencia (margin, padding, float, etc.)
propiedad: propiedad del atributo css al que se haga referencia (left, right, 0px, etc.)

REGLA PARA IE6 Y ANTERIORES:
NOTA: Si los objetos se encuentran flotados (float), es necesario utilizar el atributo "zoom: 1" y "display: inline";

* html #selector { atributo: propiedad;}


Para el :hover, :active y :focus en IE6, es necesario incluir el archivo csshover3.htc, el cual se descarga de la página http://peterned.home.xs4all.nl/csshover.html
Descarga la versión 3 y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.


#selector { behavior: url(csshover3.htc);}

Para las transparencias en IE6, es necesario incluir los archivos iepngfix y blank.gif, los cuales se descargan de la página http://www.twinhelix.com/css/iepngfix/
Descarga los archivos y lee las instrucciones, y aqui corrige la dirección relativa hacia el archivo.

#selector { behavior: url(iepngfix.htc); }

Para los bordes redondeados en IE6, es necesario incluir el archivo border-radious.htc, el cual se descarga de la página http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Descarga la última versión y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.
NOTA: Este hack no funciona en los inputs.

#selector { behavior: url(border-radius.htc); }

REGLA PARA IE7 Y ANTERIORES

*:first-child+html #selector { atributo: propiedad; }

REGLAS PARA IE7 UNICAMENTE:

*+html #selector { tributo: propiedad; }

REGLAS PARA IE8, requiere los asteriscos, las diagonales entre el atributo y los dos puntos, así como la diagonal invertida y el 9 al final:

#selector { atributo /*\**/: propiedad \9; }

REGLAS PARA NAVEGADORES A PARTIR DE IE7 (Chrome, Firefox, Safari, IE8, etc.)

html>body #selector { atributo: propiedad; }

REGLAS PARA NAVEGADORES MODERNOS (Incluye IE8+)

html>**/body #selector { atributo: propiedad; }

REGLAS PARA CHROME: 

body:nth-of-type(1) #selector { atributo: propiedad; }

REGLAS PARA FIREFOX:

@-moz-document url-prefix() {
#selector { atributo: propiedad; }
}

REGLAS PARA SAFARI: 

html[xmlns*=""] body:last-child #selector { atributo: propiedad; }

REGLAS PARA SAFARI 3.0 Y OPERA 9: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
#selector { atributo: propiedad;}
}

UNICAMENTE OPERA 9: 

html:first-child #selector { atributo: propiedad; }

OPERA 11:

@media not screen and (1) {
#selector { atributo: propiedad; }
}

martes, octubre 09, 2007

martes, septiembre 18, 2007

Avatares

Y bueno, para empezar en forma (por fin!!!) el proyecto de los avatares, me he dado la tarea de buscar sitios donde se pueden crear avatares, algunos son muy para niñas, pero en fin, servirán para hacer una buena comparación, he aquí la lista:

  • Simpsons Movie: El sitio oficial de la película de los Simpsons. Para crear un avatar con el estilo Simpsons.
  • Simpsonize Me: Sitio de Burger King, básicamente es como el del sitio de los Simpsons, pero con reconocimiento de rostros, se crea avatar a partir de una foto de frente de la persona.
  • Betaface: Empresa que se dedica al reconocimiento de rostros. En línea existen herramientas para distorsionar o reconocer rostros. Los que hicieron Simponize Me.
  • DoppelMe: Para crear avatares con caras grandes y cuerpos pequeños.
  • Doll Maker: Para chicas. Creador de avatares de princesas, muñecas, anime, etc. En lo personal no me gusta, pero en gustos, se rompen géneros...
  • Dream Avatar: Avatares tipo fantasía.
  • Crear avatares: El típo de avatares para el MSN, bueno, aqui en SMART ya es muy conocido... aquí fué donde nació la idea para este proyecto.... y el avatar de la página.
  • meez: Avatares en 3D.
  • Yahoo Avatares: Los avatares que puedes crear si tienes una cuenta de Yahoo.
  • Crear avatares MSN chicas: Pues... nada del otro mundo...
  • Crear avatares MSN chicos: IDEM.
  • Gizmoz: Caracteres animados con fotos... se ve interesante.
  • Mypictr: En realidad no hace avatares, pero recorta fotografías... esto puede ser muy útil si no tienes herramientas como photoshop, fireworks, paint, o similares... o de plano no le haces al diseño o fotos...
  • Gravatar: Tu identidad en internet... no se bien como funciona, porque me dió hu... registrarme... algún día lo hare...jijiji
  • Caricature Maker: Hacer una caricatura... se ve bastante bueno..... hasta me cree una... a ver que les parece




    Avatar Maker


Y bueno, la lista puede seguir, pero creo que con eso tenemos suficiente material....

Cosas sencillas

Pequeñas herramientas para webdesigner/webdevelopers:
Cosas sencillas: Avatar
Cosas sencillas

Bordes redondeados con CSS sin imágenes

Spiffy Corners

Generador de cajas con bordes redondeados en CSS

Si tienes flojera de hacerlos a manita ;), pues puedes usar esta herramienta:
Generador de cajas con bordes redondeados en CSS

Stripe Generator

Generador de líneas diagonales para usar en web:
Stripe Generator

Generador de Favicon

favicongenerator

Prueba tus páginas desde diferentes navegadores

Test your web design in different browsers

Ads of the World

Anuncios de todo el mundo:
Ads of the World