website stats » CSS | Solo Código |

Equivalencias entre px, em, pt y % en CSS

Escrito por J.F. el Wednesday, 19 de December 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

Escribir comentario

Categoria: CSS

47 formularios AJAX+CSS

Escrito por J.F. el Thursday, 13 de December del 2007 a las 16:02

Si lo tuyo no es diseñar contenido propio, y necesitas unformulario elegante, seguro que entre los 47 que ofrecen en ésta página alguno debe de gustarte. Están elaborados con AJAX+CSS, y son bastante bonitos.

Menú

Enlace: | 47 formularios AJAX+CSS

Comentarios (2)

Categoria: AJAX,CSS,General,Recursos

Iconize, iconos para tus links

Escrito por J.F. el Tuesday, 11 de December del 2007 a las 16:56

Iconize es una forma de generar links con iconos bastante curiosa. Simplemente, en función de la extensión en la que acabe un vínculo, le agregará un icono u otro. Si el vínculo apunta a un archivo pdf, al lado se mostrará un icono identificativo de un pdf, si es un feed, se mostrará un icono rss, y así con un montón de extensiones diferentes (imágenes, vídeos, documentos de word, presentaciones,etc).

Iconize

Sin duda una forma muy fácil de adornar nuestros enlaces, ayudando al visitante a identificar a qué tipo de documento le llevan los vínculos. La forma de hacer uso de Iconize es tan simple como incluir la hoja de estilos y tener la carpeta llamada icons:

TEXTO PLANO
CSS:
  1. <link rel="stylesheet" type="text/css" media="screen" href="iconize.css" />

Así de simple. Si echamos un vistazo a la hoja de estilos, veremos qué tipo de expresiones utilizan para identificar la extensión del archivo al que apuntan nuestros vínculos, y como en cada caso cambian la imagen a mostrar. Aquí puedes ver un fragmento de la hoja de estilos:

TEXTO PLANO
CSS:
  1. a[href$='.pps'] {
  2.     padding: 5px 20px 5px 0;
  3.     background: transparent url(icons/icon_pps.gif) no-repeat center right;
  4. }
  5.  
  6. a[href$='.pdf'] {
  7.     padding: 5px 20px 5px 0;
  8.     background: transparent url(icons/icon_pdf.gif) no-repeat center right;
  9. }
  10.  
  11. a[href$='.xpi'] {
  12.     padding: 5px 20px 5px 0;
  13.     background: transparent url(icons/icon_plugin.gif) no-repeat center right;
  14. }
  15.  
  16. a[href$='.fla'], a[href$='.swf'] {
  17.     padding: 5px 20px 5px 0;
  18.     background: transparent url(icons/icon_flash.gif) no-repeat center right;
  19. }

Es compatible practicamente con todos los navegadores, excepto con Internet Explorer 6 y versiones anteriores.
Enlace: | Iconize | Descargar

Escribir comentario

Categoria: CSS,Recursos

Validador XHTML-CSS

Escrito por J.F. el Thursday, 6 de December del 2007 a las 12:55

XHTML-CSS es un validador muy útil que nos permitirá al mismo tiempo conocer si una página es válida tanto en XHTML como en CSS, al mismo tiempo. Simplemente introducimos la url, y nos saldrán ambos informes, detallándonos los fallos y warnings. Sin duda muy útil para webmasters:

XHTML-CSS

Enlace: | XHTML-CSS

Escribir comentario

Categoria: CSS,General,HTML,Recursos

Elegante caja elaborada con CSS

Escrito por J.F. el Tuesday, 4 de December del 2007 a las 15:39

Navegando y curioseando pro la red como siempre, me he encontrado con ésta caja elaborada con CSS y la ayuda de una imagen que puede ser muy útil para la elaboración de menús de restaurante.

Caja CSS

Tan solo hace uso de una imagen, y puedes observar el elegante resultado con el siguiene ejemplo:

TEXTO PLANO
HTML:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Dotted Leaders</title>
  5. <style type="text/css">
  6. * {margin:0;padding:0}
  7. h1,h2{padding:10px 20px 0}
  8. #wrap{
  9.     width:500px;
  10.     border:1px solid #eff2df;
  11.     margin:0 20px;
  12.     float:left;
  13.     background:#809900;
  14.     display:inline;/*Ie double margin fix*/
  15. }
  16. #wrap ul{
  17.     padding:20px 40px;
  18.     list-style:none;
  19.     float:left;
  20.     border:1px solid #4c7300;
  21.     position:relative;
  22.     left:-2px;
  23.     top:-2px;
  24.     background:#eff2df;
  25.     color:#4c7300;
  26. }
  27. #wrap li{
  28.     line-height:1.2;
  29.     margin:-.9em 0 0 0;
  30.     position:relative;
  31.     float:left;
  32.     width:100%;
  33.     text-align:left;
  34.     border-bottom:1px dotted #000;
  35.     clear:both;
  36. }
  37. * html #wrap li{
  38.     border:none;
  39.     background: url(dotted-leader.gif) repeat-x left bottom;
  40. }
  41. #wrap li span{
  42.     background:#eff2df;
  43.     padding:1px 0 1px 5px;
  44.     color:#000;
  45.     position:relative;
  46.     top:.4em;
  47.     left:1px;/* ie rounding error*/
  48.     float:right;
  49. }
  50. #wrap li em{
  51.     margin:0 ;
  52.     position:relative;
  53.     top:1.6em;
  54.     padding:0 5px 0 0;
  55.     background:#eff2df;
  56. }
  57. #wrap p{padding:0 5em 0 0}
  58.  
  59. </style>
  60. </head>
  62. <h1>Caja CSS</h1>
  63. <h2>Lore Ipsum</h2>
  64. <div id="wrap">
  65.     <ul>
  66.  
  67.         <li>
  68.             <p><em>Lorem ipsum dolor sit amet </em></p>
  69.             <span>£8.99</span></li>
  70.         <li>
  71.             <p><em>In porta nisl id nisl varius ullamcorper</em></p>
  72.             <span>£9.99</span></li>
  73.         <li>
  74.  
  75.             <p><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></p>
  76.             <span>£10.00</span></li>
  77.         <li>
  78.             <p><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></p>
  79.             <span>£11.00</span></li>
  80.         <li>
  81.             <p><em>Donec sed felis sit amet risus</em></p>
  82.  
  83.             <span>£12.00</span></li>
  84.         <li>
  85.             <p><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></p>
  86.             <span>£13.99</span></li>
  87.         <li>
  88.             <p><em>Etiam ante ligula,</em></p>
  89.             <span>£14.00</span></li>
  90.  
  91.         <li>
  92.             <p><em>Fusce condimentum</em></p>
  93.             <span>£15.00</span></li>
  94.         <li>
  95.             <p><em>Morbi nibh velit, sodales eu</em></p>
  96.             <span>£16.00</span></li>
  97.         <li>
  98.  
  99.             <p><em>Etiam ante ligula,</em></p>
  100.             <span>£14.00</span></li>
  101.         <li>
  102.             <p><em>Fusce condimentum</em></p>
  103.             <span>£15.00</span></li>
  104.         <li>
  105.             <p><em>Morbi nibh velit, sodales eu</em></p>
  106.  
  107.             <span>£16.00</span></li>
  108.     </ul>
  109. </div>
  110.  
  111.  
  112. </div>
  113. </body>
  114. </html>

No olvides guardarte la imagen necesaria.
Enlace: | Autor original y demo

Escribir comentario

Categoria: CSS,Recursos

Menú drop down realizado sólo con CSS

Escrito por J.F. el Wednesday, 28 de November del 2007 a las 15:24

Encontrar un menú desplegable hecho solo con CSS sin la ayuda de Javascript es bastante difícil, pero en Pixelpreads han creado uno, sin el uso de Javascript, y con un código bastante simple. Aquí tienes el código CSS:

TEXTO PLANO
CSS:
  1. body{font-family:georgia;}
  2. #container{width:500px;margin:auto;font-size:11pt;}
  3.  
  4. #menu{position:absolute;margin-top:10px;}
  5. #menu ul .item{display:none;}
  6. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  7.  
  8. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  9. #menu ul:hover .item a:hover{color:#999;}
  10.  
  11. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  12. .clear{clear:both;height:10px;}

Aquí un ejemplo de su uso. ¡Ojo! No es compatible con Internet Explorer 6.

TEXTO PLANO
HTML:
  2.  
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>css drop down</title>
  6. <style type="text/css">
  7. body{font-family:georgia;}
  8. #container{width:500px;margin:auto;font-size:11pt;}
  9.  
  10. #menu{position:absolute;margin-top:10px;}
  11. #menu ul .item{display:none;}
  12. #menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
  13.  
  14. #menu ul:hover .item a{color:#fff;text-decoration:none;}
  15. #menu ul:hover .item a:hover{color:#999;}
  16.  
  17. #menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
  18. .clear{clear:both;height:10px;}
  19. </style>
  20.  
  21. </head>
  23. <div id="container">
  24. <h1>css drop down</h1>
  25.  
  26. <div id="menu">
  27.  
  28. <ul id="item1">
  29. <li class="top">menu item</li>
  30. <li class="item"><a href="#">menu item 1</a></li>
  31. <li class="item"><a href="#">menu item 2</a></li>
  32. <li class="item"><a href="#">menu item 3</a></li>
  33. </ul>
  34.  
  35. <ul id="item2">
  36. <li class="top">menu item</li>
  37. <li class="item"><a href="#">menu item 1</a></li>
  38.  
  39. </ul>
  40.  
  41. <ul id="item3">
  42. <li class="top">menu item</li>
  43. <li class="item"><a href="#">menu item 1</a></li>
  44. <li class="item"><a href="#">menu item 2</a></li>
  45. </ul>
  46.  
  47. <ul id="item4">
  48. <li class="top">menu item</li>
  49. <li class="item"><a href="#">menu item 1</a></li>
  50. <li class="item"><a href="#">menu item 2</a></li>
  51.  
  52. <li class="item"><a href="#">menu item 3</a></li>
  53. <li class="item"><a href="#">menu item 4</a></li>
  54. </ul>
  55.  
  56. </div>
  57. </div>
  58. </body>
  59. </html>

Enlace: | Ver demo

Comentarios (1)

Categoria: 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 |