Escrito por J.F. el Lunes, 31 de Marzo del 2008 a las 17:42
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:
HTML:
-
-
-
<em style="left: 100px">50%
</em>
-
</span>
-
</p>
Se puede conseguir el mismo ejemplo utilizando algún tipo de lista, como ésta que propone el autor:
HTML:
-
-
-
<em style="left: 100px">50%
</em>
-
</span>
-
</dd>
El código CSS incluido por el autor en el ejemplo que se puede descargar desde su página es la siguiente:
CSS:
-
dl, dt, dd{margin:0;padding:0;}
-
-
dd{
-
width:216px;
-
height:41px;
-
background:url(bg_bar.gif) no-repeat 0 0;
-
position:relative;
-
}
-
dd span{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bar.gif) no-repeat 0 0;
-
top:8px;
-
left:8px;
-
overflow:hidden;
-
text-indent:-8000px;
-
}
-
dd em{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bg_cover.gif) repeat-x;
-
top:0;
-
}
-
-
/* SINGLE PROGRESS BAR */
-
-
.progressBar{
-
width:216px;
-
height:41px;
-
background:url(bg_bar.gif) no-repeat 0 0;
-
position:relative;
-
}
-
.progressBar span{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bar.gif) no-repeat 0 0;
-
top:8px;
-
left:8px;
-
overflow:hidden;
-
text-indent:-8000px;
-
}
-
.progressBar em{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bg_cover.gif) repeat-x 0 0;
-
top:0;
-
}
Para más información, y ver más claro su uso no dudes en ver la demo o descargarte el archivo de ejemplo.
Categoria: Recursos, CSS
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.
Enlaces: | Layouts 750px | Layouts de 950px
Categoria: Recursos, CSS
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:
Categoria: Recursos, Manuales, CSS, Javascript
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:
HTML:
-
<div id="column-1" class="container">
-
<div class="overlay"></div>
-
-
-
</div>
-
</div>
Ahora veamos el código CSS correspondiente a las clases utilizadas arriba:
CSS:
-
#column-1 {
-
position: relative;
-
float: left;
-
width: 500px; /* remember to set a width */
-
}
-
-
.overlay{
-
position: absolute;
-
top: 0; /* These positions makes sure that the overlay */
-
bottom: 0; /* will cover the entire parent */
-
left: 0;
-
width: 100%;
-
background: #000;
-
opacity: 0.65;
-
-moz-opacity: 0.65; /* older Gecko-based browsers */
-
filter:alpha(opacity=65); /* For IE6&7 */
-
}
-
-
#column-1 .content {
-
width: 460px;
-
padding: 20px;
-
}
-
-
.content {
-
position: relative;
-
}
Y el hack para IE6:
CSS:
-
* html #column-1 .overlay {
-
height: expression(document.getElementById("column-1").offsetHeight);
-
}
Enlaces: | Demo | Vía | Autor original
Categoria: CSS
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 |
Vía: | IncubaWeb
Categoria: Manuales, CSS
Escrito por J.F. el Miércoles, 19 de Diciembre del 2007 a las 16:26
Muy útil a la hora de crear nuestras hojas de estilos nos puede resultar ésta tabla de equivalencias:
| Pts |
Px |
Em |
Porcentaje |
| 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% |
| 26pt |
35px |
2.2em |
220% |
| 27pt |
36px |
2.25em |
225% |
| 28pt |
37px |
2.3em |
230% |
| 29pt |
38px |
2.35em |
235% |
| 30pt |
40px |
2.45em |
245% |
| 32pt |
42px |
2.55em |
255% |
| 34pt |
45px |
2.75em |
275% |
| 36pt |
48px |
3em |
300% |
Vía: | WebAdictos
Categoria: CSS
