gafeman viciao2k3 logo viciao2k3
 
¿que estoy haciendo?   follow me
escribiendo posts como un cabron para tener contentos a mis queridos lectores en mis vacaciones
 chica del dia  —  la novia de tu mejor amigo
 
Suscribete →  
431  fans y una planta carnivora
 
Todos los articulos de la categoria Diseño
Actualizado hace 1 horas
Noticias del dia
0

mi web preferida de tipos de letra

Tag: Diseño    Por: gafeman @ 9 Julio, 2007    Lecturas: 738   

Os recomiendo dafont.com

¿Por qué?

  • tienen mas de 7000 tipos de letra
  • las fuentes son gratuitas
  • el top 100

Tipos de letra que me han gustado:

Pulsa en las imagenes para ir al perfil de cada fuente

el-font-gohtic

rezland

Antes me gustaba mucho Abstract Fonts, pero como encontraba muchas fuentes de pago, busque otro sitio y encontré por casualidad dafont

1

experiencias con PNG

Tag: Diseño    Por: gafeman @ 25 Junio, 2007    Lecturas: 920   

si sois diseñadores web, con firefox 2 y internet explorer 7 no os teneis que preocupar por las transparencias alpha.
Pero la cosa cambia en internet explorer 6, en este ulitmo los pngs aparecen con un fondo de color y no precisamente el transparente

Para ello hay 2 soluciones, mediante CSS o con un javascript.

yo recomiendo hacerlo mediante CSS ya que he notado que en javascript las sombras no aparecen, pero la pega es que en css tienes que crear un estilo para cada elemento que contenga un PNG

ejemplo para el metodo css:

en el css principal tengo:

CSS:
  1. #logo{
  2. width:343px;
  3. height:268px;
  4. position:absolute;
  5. z-index:2;
  6. left:2%;
  7. top:18px;
  8. background:url(images/gafelogo.png) no-repeat;
  9. }

y en un fichero png.css el siguiente codigo:

CSS:
  1. #logo{
  2. background-image: none;
  3. filter: none !important;
  4. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/themes/satori/images/gafelogo.png');
  5. }

luego para que solo se aplique en Internet explorer 6 poner esto antes de la etiqueta </head>:

HTML:
  1. <!--[if lt IE 7]>
  2. <link rel="stylesheet" href="http://www.viciao2k3.net/blog/wp-content/themes/satori/png.css" type="text/css" media="screen"></link> <![endif]-->

pasos para el metodo con javascript:

  1. descargar fichero pngfix.js
  2. subir al servidor
  3. poner el siguiente codigo en el header de tu theme, antes de la etiqueta </head>:
    HTML:
    1. <!--[if lt IE 7]>
    2. <script defer type="text/javascript" src="/pngfix.js"></script>
    3. <![endif]-->

programa para exportar imagenes a png?

MeTaL_oRgY de la web metal.ize me recomendo el Adobe Fireworks CS3

curiosidades:

el logo y la mascota de la cabecera son pngs, los guarde directamente en el formato Fireworks PNG, grave error por mi parte, no cometais el mismo error

¿Porque digo error?

  • Los PNGs no son transparentes ni con el javascript mencionado anteriormente
  • ocupan mucho mas pongo mi caso:
    • letras viciao2k3 antes: 67.83 KB, ahora en png plano 5.38 KB
    • logotipo antes: 91.2 KB, ahora en png plano 12.9 KB

pasos para guardar en png plano y con transparencia alpha:

  1. cuando salga la ventana de guardar como..., seleccionamos el formato png plano
  2. se activara un boton opciones, pulsamos sobre el
  3. nos aseguramos que esta en PNG-8
  4. Luego abajo encontrareis en una casilla de seleccion, por defecto Sin transparencia, lo cambiais a Transparencia alfa
background by eboy