Ene 15, 2009

Escrito por Joselite | 0 Comentarios

Menú Descriptivo con CSS

Esta es una buena manera de reducir el peso de tu página Web, ya que éste menú no usa Javascript, se hace todo con CSS. Ver demo

  1. Creamos una lista con una pequeña descripción del contenido que contiene el vínculo del botón del menú.


    2. ?Ver código HTML
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

     <div class="baseofmenu">  
 <ul class="boxedmenu">  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci t leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Entertainment</small>Celeb Gossip</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Technology</small>Softwares</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Sports</small>Live Cricket</a></li>  
 </ul>  
 </div>


  2. Éste es el CSS que convierte nuestra lista en un menú / desplegable.
    3. ?Ver código CSS
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

    <br \>
 body {  
     font-family:Georgia, "Times New Roman", Times, serif;  
 }  
 .baseofmenu{  
     height:104px;  
     background-color:#99CC33;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     width: 760px;  
 }  
 .boxedmenu {  
     list-style-type:none;  
     display:block;  
     margin: 0px;  
     padding: 0px 5px 0px 5px;  
     position: absolute;  
     width: 750px;  
 }  
 .boxedmenu li{  
     display:inline  
 }  
 
 /* Styling A link START */  
 .boxedmenu li a, .boxedmenu li a:link, .boxedmenu li a:visited{  
     display: inline;  
     text-decoration:none;  
     font-size: 25px;  
     background-color: #339966;  
     color: #a3e9c6;  
     margin: 10px 5px;  
     padding: 10px;  
     letter-spacing: 3px;  
     border: 1px solid #306F4F;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     float:left;  
     width: 29%;  
 }  
 .boxedmenu li a:hover, .boxedmenu li a:active{  
     background-color: #206442;  
     border-color: #a3e9c6;  
     color: #fff;  
 }  
 /* Styling A link END */  
 
 /* Styling SMALL text item START */  
 .boxedmenu small{  
     display:block;  
     font-size:16px;  
     background-color: #206442;  
     padding: 0px 10px;  
     margin: 0px -10px 5px -10px;  
     line-height: 25px;  
     color: #339966;  
     letter-spacing: 8px;  
 }  
 .boxedmenu li a:hover small, .boxedmenu li a:active small{  
     background-color: #339966;  
     color: #206442;  
 }  
 /* Styling SMALL text item END */  
 
 /* Styling Paragraph within each menu item START */  
 .boxedmenu li a p {  
     font-size: 11px;  
     padding: 5px;  
     margin: 0px;  
     display: none;  
 }  
 .boxedmenu li a:hover p, .boxedmenu li a:active p{  
     display: block;  
 }  
 /* Styling Paragraph within each menu item END */

Visto en: Witty Sparks

Leer Más
Dic 31, 2008

Escrito por Joselite | 1 Comentario

Barra de Progreso con Javascript y CSS

Primero el HTML con las capas de la barra y el %:

?Ver código HTML
1
2
3
4

<div class="progress-bar" >  
    <div id ="sample" class="bar">75%</div>  
</div>  
<div id ="percentage"></div>


Ahora ponemos el css correspondiente para los contenedores anteriores:

?Ver código CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*Container*/  
.progress-bar {  
    border: 1px solid #56577A;  
    /*width of the progress bar container*/  
    width: 200px;  
    margin: 5px;  
    padding: 1px;  
    background: #fff;  
    float: left;  
}  
 
/*Progress Bar*/  
.bar {  
    height: 15px;  
    font-size: 11px;  
    /* indent the text off the screen as we don’t want to see the text anymore.*/  
    text-indent:-9000px;  
}


Código Javascript en el código HTML:

?Ver código JAVASCRIPT
1
2
3
4

<script src="progressbar.js" type="text/javascript"></script>   
<script type="text/javascript">  
  window.onload = function() {initialize()}  
</script>


Creamos un archivo llamado progressbar.js, donde definiremos la función initialize(), que se llamará al cargar la página. El código del archivo progressbar.js es el siguiente:

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function initialize() {  
    divId = 'sample';  
    thedivId = document.getElementById(divId);  
    var percentage = thedivId.innerHTML;  
    //Set the Progress Bar color  
    thedivId.style.backgroundColor="#BF5852";  
    brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));  
}
 
function brim(Id,start,percentage) {  
    if (document.getElementById) {  
         o = document.getElementById(Id);  
             if (start <= percentage) {  
                setWidth(o, start);  
                start += 1;  
                //Show progression percentage near the progress bar  
                document.getElementById('percentage').innerHTML = (start -1) + "%";  
                window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);  
             }  
   }  
}  
 
function setWidth(o, start) {  
    o.style.width = start+"%";  
}

Visto en: JCargoo

Leer Más
Dic 6, 2008

Escrito por Joselite | 0 Comentarios

Embellecer tus imágenes con CSS

Si deseas modificar tus imágenes y hacerlas más bonitas, con más diseño y estilo tal vez esto te sea útil. Es muy sencillo ya que no hay que usar photoshop, solamente deberás usar CSS. Describiremos como mostrar un efecto sombra en las imágenes, un efecto de doble borde, enmarcado de la imágen, añadir una marca de agua y añadir una leyenda a una imágen.

Leer Más
Nov 28, 2008

Escrito por Joselite | 0 Comentarios

Compresor de CSS y de Javascript

Aquí os dejo una lista de programas para validar, comprimir y optimizar CSS y JS (Javascript). Recordad que siempre debeis hacer backup de vuestros archivos originales, ya que en algunos casos me he encontrado con que “varían” algunos estilos de la hoja .css y algunas librerías JS dejan de funcionar.

  • Robson: Compresor de css online. Interfaz muy sencilla, simplemente debes subir un archivo o copiar el código y elegir las opciones de compresión.
  • CSS Formater: Otro compresor de css online con una interfaz sencilla y con bastantes opciones de compresión.
  • Rapid CSS: Software para crear hojas de estilo, validador de CSS y HTML y compresor de css. El mejor de todos los que he probado, a pesar de que es Shareware.
  • JsMin: Optimizador de JS. Simplemente debes descargarte el archivo .exe y copiarlo en la raíz de tu disco. Copias el fichero JS a comprimir, entras en modo consola consola y ejecutas el .exe pasandole como parámetros el nombre del fichero origen y destino.

    jsmin <fulljslint.js >jslint.js

Leer Más
Oct 31, 2008

Escrito por Joselite | 1 Comentario

Crear cajas redondedas con imágenes y css

Spanky Corners es una aplicación Online que nos permite crear tablas con bordes redondeados a través de imágenes y CSS. Lo único que necesitamos es definir el color de fondo de la página(Background color), el color de fondo de la caja(Foreground color) y el radio de curbatura de las esquinas. Con todo ello, la aplicación nos generará automáticamente un Zip que contendrá todas las imágenes, el CSS y un archivo de ejemplo para probar el código generado. Espero os sea de gran utilidad.

Leer Más