website stats » CSS | Solo Código |

Chuleta completa sobre CSS

Escrito por J.F. el Domingo, 25 de Mayo del 2008 a las 13:42

Nunca viene mal una buena chuleta CSS:

Chuleta CSS

Enlaces: | Autor | Descargar

Comentarios (4)

Categoria: Manuales, CSS

Barras de progreso con CSS

Escrito por J.F. el Lunes, 31 de Marzo del 2008 a las 17:42

Barras de progreso con CSS

Interesante forma de incorporar a nuestra página web una barra de progreso, simplemente mediante CSS y un gif animado. El código es muy sencillo, simplemente hemos de tener presente que el ancho máximo serían 200px, por tanto si queremos un 50%, tendríamos que darle al elemento un ancho de 100px en el atributo style. Con un ejemplo se ve claramente:

TEXTO PLANO
HTML:
  1. <p class="progressBar">
  3. <em style="left: 100px">50%</em>
  4. </span>
  5. </p>

Se puede conseguir el mismo ejemplo utilizando algún tipo de lista, como ésta que propone el autor:

TEXTO PLANO
HTML:
  3. <em style="left: 100px">50%</em>
  4. </span>
  5. </dd>

El código CSS incluido por el autor en el ejemplo que se puede descargar desde su página es la siguiente:

TEXTO PLANO
CSS:
  1. dl, dt, dd{margin:0;padding:0;}
  2.  
  3. dd{
  4. width:216px;
  5. height:41px;
  6. background:url(bg_bar.gif) no-repeat 0 0;
  7. position:relative;
  8. }
  9. dd span{
  10. position:absolute;
  11. display:block;
  12. width:200px;
  13. height:25px;
  14. background:url(bar.gif) no-repeat 0 0;
  15. top:8px;
  16. left:8px;
  17. overflow:hidden;
  18. text-indent:-8000px;
  19. }
  20. dd em{
  21. position:absolute;
  22. display:block;
  23. width:200px;
  24. height:25px;
  25. background:url(bg_cover.gif) repeat-x;
  26. top:0;
  27. }
  28.  
  29. /* SINGLE PROGRESS BAR */
  30.  
  31. .progressBar{
  32. width:216px;
  33. height:41px;
  34. background:url(bg_bar.gif) no-repeat 0 0;
  35. position:relative;
  36. }
  37. .progressBar span{
  38. position:absolute;
  39. display:block;
  40. width:200px;
  41. height:25px;
  42. background:url(bar.gif) no-repeat 0 0;
  43. top:8px;
  44. left:8px;
  45. overflow:hidden;
  46. text-indent:-8000px;
  47. }
  48. .progressBar em{
  49. position:absolute;
  50. display:block;
  51. width:200px;
  52. height:25px;
  53. background:url(bg_cover.gif) repeat-x 0 0;
  54. top:0;
  55. }

Para más información, y ver más claro su uso no dudes en ver la demo o descargarte el archivo de ejemplo.

Comentarios (1)

Categoria: Recursos, CSS

Layouts para tu web de 750px y 950 px

Escrito por J.F. el Lunes, 24 de Marzo del 2008 a las 16:59

Ya hemos hablado en alguna ocasión sobre las resoluciones en las páginas web, asi que si has leído el artículo comprenderás las ventajas y desventajas de diseñar para diferentes resoluciones de pantalla.

Te decidas por el tamaño que te decidas, nunca vienen mal disponer de unos layouts sobre los cuales poder apoyarte a la hora de crear una plantilla para tu diseño. Pensando en elaborar diseños de medidas fijas, puedes optar por utilizar o layouts de 750px, o layouts de 950px. En ambos links encontrarás multitud de diseños muy variados, con diferente número y composición de columnas, para que escojas el diseño que más te guste.

CSS Layouts

Enlaces: | Layouts 750px | Layouts de 950px

Comentarios (2)

Categoria: Recursos, CSS

5 tutoriales para menús CSS 2.0

Escrito por J.F. el Lunes, 25 de Febrero del 2008 a las 14:48

Interesantes tutoriales que me encuentro para realizar menús CSS al estilo 2.0, de algunos conocidos servicios de la web:

Comentarios (1)

Categoria: Recursos, Manuales, CSS, Javascript

Columnas transparentes con CSS

Escrito por J.F. el Lunes, 18 de Febrero del 2008 a las 17:20

Si quieres realizar columnas con transparencias, pero quieres evitarte el quebradero de cabeza de andar jugando con imágenes png y las diferentes versiones de los navegadores, aquí un código para realizar columnas transparentes con CSS. Usando algunos hacks y técnicas avanzadas, el resultado conseguido es increíble. Simplemente hemos de usar el siguiente código HTML:

TEXTO PLANO
HTML:
  1. <div id="column-1" class="container">
  2.    <div class="overlay"></div>
  3.    <div class="content">
  4.      <h2>Content</h2>
  5.    </div>
  6.  </div>

Ahora veamos el código CSS correspondiente a las clases utilizadas arriba:

TEXTO PLANO
CSS:
  1. #column-1 {
  2.  position: relative;
  3.  float: left;
  4.  width: 500px; /* remember to set a width */
  5.  }
  6.  
  7.  .overlay{
  8.  position: absolute;
  9.  top: 0; /* These positions makes sure that the overlay */
  10.  bottom: 0;  /* will cover the entire parent */
  11.  left: 0;
  12.  width: 100%;
  13.  background: #000;
  14.  opacity: 0.65;
  15.  -moz-opacity: 0.65; /* older Gecko-based browsers */
  16.  filter:alpha(opacity=65); /* For IE6&amp;7 */
  17.  }
  18.  
  19.  #column-1 .content {
  20.  width: 460px;
  21.  padding: 20px;
  22.  }
  23.  
  24.  .content {
  25.  position: relative;
  26.  }

Y el hack para IE6:

TEXTO PLANO
CSS:
  1. * html #column-1 .overlay {
  2. height: expression(document.getElementById("column-1").offsetHeight);
  3. }

Enlaces: | Demo | Vía | Autor original

Escribir comentario

Categoria: CSS

Aprende a diseñar en CSS desde cero

Escrito por J.F. el Lunes, 21 de Enero del 2008 a las 17:42

Tutorial que pretende enseñar desde cero como implementar el diseño de una plantilla para tu página web desde cero, sin conocimientos, aplicando las reglas CSS. El objetivo es que aprendas a armar una estructura sobre la que cimentar tu página web, y que sea compatible en todos los navegadores. Son 12 pasos a través de los cuales, se abordan diferentes aspectos como color, estilos, navegadores antiguos, etc. Bastante recomendable para novatos.

Enlace: | Aprende CSS desde cero | Traducción en español
Vía: | IncubaWeb

Comentarios (3)

Categoria: Manuales, CSS

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |