Fri, 19 Mar 2010 02:11:53 -0400 http://www.bligoo.com/ es Unidades de medidas en CSS http://www.pixelchile.com/content/view/218077/Unidades-de-medidas-en-CSS.html#content-top Tue, 24 Jun 2008 07:25:07 -0400 http://www.pixelchile.com/content/view/218077/Unidades-de-medidas-en-CSS.html#content-top John Zárate En CSSLab han publicado una lista de medidas en CSS que siempre un buen diseñador debe tener en cuenta, para los que no, ir con F5 como va quedando :).

Puntos Pixeles Em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%

 

]]> http://www.pixelchile.com/rss/comments/view/218077 Destacando el Leer Más en Bligoo http://www.pixelchile.com/content/view/209262/Destacando-el-Leer-Mas-en-Bligoo.html#content-top Thu, 12 Jun 2008 04:03:44 -0400 http://www.pixelchile.com/content/view/209262/Destacando-el-Leer-Mas-en-Bligoo.html#content-top John Zárate Leer Más CSS

Hace tiempo que quise hacerlo, y nunca lo había hecho, para muchos les va a ser muy útil, ya que los templates que hay para Bligoo disponibles se confuden los links con los links de tags y links del Leer Más... bueno para que esto no ocurra y se vea algo similar a como lo tengo yo, lo que hice fue ver el código fuente del diseño de pixelchile.com y bueno el atributo del enlace class que tiene el link es read-more, ahora vamos al CSS y añadamos info con ese atributo, si quieres puedes añadir el mismo CSS que tengo en mi blog para tu blog bligoo.

a.read-more {

text-decoration: underline overline;

color: red; font-size: 20px;

background: #FFCC00;}

Si quieres cambiarle los colores, busca alguna paleta de colores html como esta, los colores que te agraden y reemplaza los códigos hezadecimales, cambia el color red por alguno que te acomode para el color de letras, el tamaño de letra que esta en 20px, y erl fondo de las letras que esta en FFCC00 que es un amarillo.

Se me olvidaba, para colocar el CSS en tu diseño de bligoo, entra en Personalizar mi sitio, después en Probador Bligoo, luego en el template que esta en uso, lo clickeas, y pones editar, luego entras en CSS, y al final añades el codigo de arriba.

Que te sirva!

]]> http://www.pixelchile.com/rss/comments/view/209262 Template Adelaida para bligoo, liberado a todo el mundo. http://www.pixelchile.com/content/view/168965/Template-Adelaida-para-bligoo-liberado-a-todo-el-mundo.html#content-top Sun, 20 Apr 2008 18:53:22 -0400 http://www.pixelchile.com/content/view/168965/Template-Adelaida-para-bligoo-liberado-a-todo-el-mundo.html#content-top John Zárate Bajo una licencia Creative Commons que es No comercial, pero se permiten obras derivadas, libero un diseño que espero que lo usen mucho, eso si, pasen por este sitio por las actualizaiones, por algunos detalles que se me quedaron.


Creative Commons License
Esta obra está bajo una licencia de Creative Commons.
Descarga el CSS de "Adelaida" V.0.1 - Descarga los Gráficos - Demo
Instalación: Edita alguno de los diseños de Bligoo preferentemente el diseño de Chirimoya Alegre, reemplaza el CSS, y sube los gráficos con los mismos nombres que estan en el archivo .rar en la parte de probador bligoo> el tema que estas editando> archivos extras
Espero un reconociemineto y en su footer (pié de página) agregar diseño por John Zárate y linkearlo a http://www.johnzarate.com (mi sitio esta abajo por hoy, motivos técnicos).
PD. agredesco todas las correcciones al código que le puedan hacer al diseño, las agregare, por eso, los que lo usen tengan ojo a las actualizaciones en este mismo tema. marquenlo como favorito.
]]> http://www.pixelchile.com/rss/comments/view/168965 CODE-SUCKS, diseñando en CSS http://www.pixelchile.com/content/view/168899/CODE-SUCKS-disenando-en-CSS.html#content-top Sun, 20 Apr 2008 17:20:01 -0400 http://www.pixelchile.com/content/view/168899/CODE-SUCKS-disenando-en-CSS.html#content-top John Zárate Recursos CSS básicos para comenzar nuestros diseños, siempre los que sabemosas o menos de CSS, copiamos y modificamos, en esta página que me llamo la atención el nombre :) por eso la posteo aquí, puedes encontrar recursos CSS (layouts), entre algunas cosas que puedes encontrar:

Diseños de ancho fijo. 53 diseñospara descargar.

Diseños de columnas de ancho variable. 42 diseños disponibles.

 

link: code sucks]]> http://www.pixelchile.com/rss/comments/view/168899 Probar el diseño de tu web en distintos navegadores http://www.pixelchile.com/content/view/167285/Probar-el-diseno-de-tu-web-en-distintos-navegadores.html#content-top Fri, 18 Apr 2008 17:50:04 -0400 http://www.pixelchile.com/content/view/167285/Probar-el-diseno-de-tu-web-en-distintos-navegadores.html#content-top John Zárate browsershot.jpg

IE6 (Internet Explorer versión 6, y las otras 5.5, hacia abajo) que mucha gente usa por que no se actualizan al formatear sus equipos con Windows XP, es algo de un 25% al 35% mas o menos que usan a nivel mundial esas versiones de navegadores de IE, el que diseña algún sitio sabe que tiene que meter hacks CSS para que el sitio se vea bien en IE 6, PNG transparentes, etc. Una maldita pesadilla. El que diseña nunca ve su sitio como queda en distintos navegadores, siempre lo ve en Firefox e IE7 es lo más común (o soy el único), en fin. Este sitio lo que hace es ver en distintos navegadores, distintas versiones, distintas plataformas del OS y te genera screenshots de tu sitio y tu puedes ver como queda el diseño de tu sitio. Ahí es cuando empieza a salir humo negro por las orejas y son las trasnochadas que genera el corregir código o no no corregir, sino es adaptar código para IE. Al momento de escribir esto, le estoy haciendo una prueba al sitio para ver como se ve :).

Link: Browsershot

]]> http://www.pixelchile.com/rss/comments/view/167285 Enchulando mi Blog Bligoo http://www.pixelchile.com/content/view/165840/Enchulando-mi-Blog-Bligoo.html#content-top Thu, 17 Apr 2008 05:24:55 -0400 http://www.pixelchile.com/content/view/165840/Enchulando-mi-Blog-Bligoo.html#content-top John Zárate A falta de tiempo ya que tengo varios proyectos web que estoy realizando, mi Bligoo lo he estado enchulando a pinceladas, como lo han visto algunos lectores que me están siguiendo a diario, ojala les guste como esta quedando, eso si, derrepente me da la cosa y cambio radicalmente el diseño, en fin, este diseño lo llamara la versión 0.2 de PixelChile, el "Por aquí no va la cosa" es momentáneo y no pretende aludir ni ganar fama por esa frase este blog, solo es por ocio ya que no se me ocurrió otra frase :)...

Comenten que les parece el diseño, para los que saben CSS, se darán cuenta en el código las cosas que hice son básicas, pero que dan un buen resultado :).

]]> http://www.pixelchile.com/rss/comments/view/165840 29 estilos CSS para decorar tu Google Adsense http://www.pixelchile.com/content/view/165011/29-estilos-CSS-para-decorar-tu-Google-Adsense.html#content-top Wed, 16 Apr 2008 03:37:41 -0400 http://www.pixelchile.com/content/view/165011/29-estilos-CSS-para-decorar-tu-Google-Adsense.html#content-top John Zárate En una web hace tiempo salio el artículo, hoy en día estan malos lso enlaces y muchos quieren los codigos, etc. Yo los recuperare de a poco o si puedo los colocare enseguida todos. Espero sus agradecimientos. Esta es una compilación de recursos para poder hacer más agradable y más adaptado a uestros anuncios el código de Adsense, por legalidad, tengo entendido que es legal hacerlo en CSS.

1- Rounded corners in blue

Adsense CSS

CSS Code

#ad_code { width:516px; text-align:center; background:#FFFFFF url(YOUR-FOLDER/2007/04/bluerounded.png) center center no-repeat; padding:35px 0; }

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #003366
Border Color: #003366
Text Color: #666666
Link Color: #FFFFFF
URL Color: #666666

Image Download


2-CSS Glow Banner Background
ads2.PNG

 

CSS Code

#ad_code { background:#FFFFFF url(YOUR-FOLDER/2007/04/css-glow.png) center center no-repeat; text-align:center; padding:11px 10px 10px 9px; width:487px; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #666666
Border Color: #666666
Text Color: #26AEED
Link Color: #FFFFFF
URL Color: #26AEED

 

Image Download

3-Morning Horizon Full Banner
ads3.PNG

 

CSS Code

#ad_code { background:#FFFFFF url(YOUR-FOLDER/2007/01/horizon.png) center center no-repeat; padding:25px 0; width:468px; text-align:left; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #FFFFFF
Border Color: #FFFFFF
Text Color: #777777
Link Color: #282828
URL Color: #777777

 

Image Download

4- Purple Haze Full Banner

ads4.PNG

CSS Code

#ad_code{ width:490px; padding:15px 10px; text-align:center; background:transparent url(YOUR-FOLDER/2007/01/) center center no-repeat; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #9966CC
Border Color: #9966CC
Text Color: #EEEEEE
Link Color: #000000
URL Color: #EEEEEE

 

Image Download

Download Image


5- Blue Blue Sky Full Banner

ads5.PNG

CSS Code

#ad_code { width:480px; padding:10px; background:transparent url(YOUR-FOLDER/2007/01/bluesky.jpg) center center no-repeat; text-align:center; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #0066CC
Border Color: #0066CC
Text Color: #E1E1E1
Link Color: #FFFFFF
URL Color: #E1E1E1

 

Image Download

Download Image

 

6- Blue & Black Titled Full Banner

ads6.PNG

 

 

CSS Code

#ad_code { width:520px; background:transparent url(YOUR-FOLDER/2006/12/blacknblue-titled.jpg) left center no-repeat; padding:10px 0 10px 22px }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #0099FF
Border Color: #0099FF
Text Color: #FFFFFF
Link Color: #000000
URL Color: #FFFFFF

 

Image Download

Download Image

 

7- Black & Blue Titled Full Banner

ads7.PNG

CSS Code

#ad_code { width:520px; background:transparent url(YOUR-FOLDER/2006/12/blue-titled.jpg) left center no-repeat; padding:10px 0 10px 22px }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #333333
Border Color: #333333
Text Color: #FFFFFF
Link Color: #0099FF
URL Color: #CCCCCC

 

Image Download

Download Image

 

8- Black Gradient Full Banner

ads8.PNG

CSS Code

#ad_code { text-align:center; width:490px; padding:15px; background:transparent url(YOUR-FOLDER/2006/12/adsense2.gif) center center no-repeat; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #333333
Border Color: #333333
Text Color: #FFFFFF
Link Color: #5C9CDD
URL Color: #CCCCCC

 

Image Download

Download Image

Hal Banners

9- Black Horizontal Gradient Half Banner

ads9.PNG

 

 

 

 

 

CSS Code

#ad_code { background:#FFFFFF url(YOUR-FOLDER/2007/05/blackgradient.png) center center no-repeat; width:314px; text-align:center; padding:6px 45px 6px 35px; }

 

HTML Code

<div id=""ad_code">      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

Ad Color Scheme

Background Color: #333333
Border Color: #333333
Text Color: #999999
Link Color: #FFFFFF
URL Color: #999999

 

Image Download

Download Image

 

Los que faltan (20) los subo de a poco, en 2 días aprox. Los tengo todos online, la cosa toma trabajo :).

]]> http://www.pixelchile.com/rss/comments/view/165011 Personalizar listas con CSS http://www.pixelchile.com/content/view/163089/Personalizar-listas-con-CSS.html#content-top Mon, 14 Apr 2008 03:16:20 -0400 http://www.pixelchile.com/content/view/163089/Personalizar-listas-con-CSS.html#content-top John Zárate

Especial para personalizar las listas de nuestro Blogroll de Bligoo, con los enlaces de webs amigas, eso si te tomara unos minutos hacerlo para que quede un resultado como el que sale en la imagen de arriba. La forma en simple, les explicare para bligoo, para WordPress, Blogger, a forma es igual, para webs, ya sabrán los webmasters como hacerlo.

Primero los ejemplos y la descarga: Ver Demo - Descarga Ejemplo

Nuestro CSS:

  1. .mac {
  2. font-size: 11px;
  3. padding-left: 17px;
  4. margin-left: 2px;
  5. margin-bottom: 5px;
  6. background:url(images/macosx.gif) bottom left no-repeat;
  7. List-style:none;
  8. }


  11. .clickideas {
  12. font-size: 11px;
  13. padding-left: 17px;
  14. margin-left: 2px;
  15. margin-bottom: 5px;
  16. background:url(images/cli.gif) bottom left no-repeat;
  17. List-style:none;
  18. }
  19. .pownce {
  20. font-size: 11px;
  21. padding-left: 17px;
  22. margin-left: 2px;
  23. margin-bottom: 5px;
  24. background:url(images/pow.gif) bottom left no-repeat;
  25. List-style:none;
  26. }
  27. .flickr {
  28. font-size: 11px;
  29. padding-left: 17px;
  30. margin-left: 2px;
  31. margin-bottom: 5px;
  32. background:url(images/flickr.gif) bottom left no-repeat;
  33. List-style:none;
  34. }
  35. .wordpress {
  36. font-size: 11px;
  37. padding-left: 17px;
  38. margin-left: 2px;
  39. margin-bottom: 5px;
  40. background:url(images/wordpress.gif) bottom left no-repeat;
  41. List-style:none;
  42. }
  43. .blog {
  44. font-size: 11px;
  45. padding-left: 17px;
  46. margin-left: 2px;
  47. margin-bottom: 5px;
  48. background:url(images/blog.gif) bottom left no-repeat;
  49. List-style:none;
  50. }
  51. .mail {
  52. font-size: 11px;
  53. padding-left: 17px;
  54. margin-left: 2px;
  55. margin-bottom: 5px;
  56. background:url(images/mail.gif) bottom left no-repeat;
  57. List-style:none;
  58. }
  59. .tarjeta {
  60. font-size: 11px;
  61. padding-left: 17px;
  62. margin-left: 2px;
  63. margin-bottom: 5px;
  64. background:url(images/tarjeta.gif) bottom left no-repeat;
  65. List-style:none;
  66. }
  67. .info {
  68. font-size: 11px;
  69. padding-left: 17px;
  70. margin-left: 2px;
  71. margin-bottom: 5px;
  72. background:url(images/info.gif) bottom left no-repeat;
  73. List-style:none;
  74. }

En Bligoo el CSS tienen que entrar a Personalizar Sitio > Eligen su tema, lo editan> Entrarn a CSS, agregan el código CSS de arriba al final. Reemplazan los links de las imagenes por los links de los iconos que quieran y reemplazan los nombres por los que quieran ejemplo si sale .wordpress lo remplzan por .johnzarate por decirlo, sin espacios.

Ahora guardan el tema, y van a mis temas, y ponen usar el que editaron. Después de hecho esto, van a los Bligets, añaden uno de texto, y ediatn en HTML (presionan el botón que sale de HTML en el editor). Agregan:


  2.  
  3. <li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
  4. <li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
  5. <li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
  6. <li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
  7. <li class="flickr">My Photos <a href="http://www.flickr.com/photos/14412260@N08/">Flickr</a></li>
  8. <li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
  9. <li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
  10. <li class="tarjeta">My <a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard</a></li>
  11. <li class="info">More <a href="http://www.xyberneticos.com/index.php/acerca-de/">Info</a></li>
  12.  
  13. </ul>

reemplazan de este último e contenido del class="""""""""""" según ustedes pusieron el el CSS.

Preguntas en los comentarios. Si quieren un hosting de imagenes, aparte del que trae Bligoo, pueden usar, www.Sube.la www.imageshack.us (no megusta), www.godlike.cl

Visto en: Xyberneticos 

 

]]> http://www.pixelchile.com/rss/comments/view/163089 Homero Simpsons completamente en CSS http://www.pixelchile.com/content/view/163043/Homero-Simpsons-completamente-en-CSS.html#content-top Mon, 14 Apr 2008 01:26:48 -0400 http://www.pixelchile.com/content/view/163043/Homero-Simpsons-completamente-en-CSS.html#content-top John Zárate Realmente cuando la vi la ilustración perfecta de Homero Simpsons en CSS quede sorprendido. El manejo de Román Cortés es muy bueno, ya lo había demostrado con el logo de Sigt, ahora con Homero, el popular personaje que muchos quieren censurar, pero todo el resto lo adora. En su blog da la nota del Homero que ha hecho y parece imagen la que sale en su post, pero es el diseño en CSS para los que no saben que en CSS, son hojas de estilo, una forma fácil de explicar, la cara de Homer la hizo en base a números, letras, y signos, con atributos de colores y tamaños. Si quieren ver que letras uso, tienen que en firefox poner Ver> Hoja de estilo> Sin estilo.

Ahora maravillense a través de este link. 

]]> http://www.pixelchile.com/rss/comments/view/163043