Guiabreve» CSS http://www.guiabreve.com por Víctor Falcón Wed, 08 Sep 2010 01:03:27 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Como crear Cintas 3D solo con CSS3 http://www.guiabreve.com/como-crear-cintas-3d-solo-con-css3.htm http://www.guiabreve.com/como-crear-cintas-3d-solo-con-css3.htm#comments Sun, 11 Jul 2010 12:27:30 +0000 Víctor Falcón http://www.guiabreve.com/?p=1687
Previsualización — Descargar

Las Cintas o Ribbons (en ingles) son cada vez más usados por los desarrolladores webs. El efecto, cuando se hace bien queda muy vistoso y solo requiere de dos imágenes y un poco de CSS para desarrollarlo y hacerlo compatible con cualquier navegador.

Con CSS3 podremos crear este efecto sin usar ninguna imagen. El único problema es que, al menos por ahora, Internet Explorer no es capaz de mostrarlo.

El código lo he sacado de PvmGarage y lo explico a continuación:

HTML básico de la Cinta

[COPIAR]
Código HTML (Copiar):
  1. <div class="bubble">
  2.       <div class="rectangle"><h2>Cinta 3D en CSS3</h2></div>
  3.       <div class="triangle-l"></div> <!-- Left triangle -->
  4.       <div class="triangle-r"></div> <!-- Right triangle -->
  5. </div>

Como vemos nos hacen falta tres divs: Uno para la cinta en sí y otros dos para cada triángulo de los laterales que son los que dan ese efecto 3D. También nos hace falta otro div como caja principal para que la cinta haga ese efecto de que se mete detrás de él.

CSS

[COPIAR]
Código CSS (Copiar):
  1. .bubble {
  2.     clear: both;
  3.     margin: 0px auto;
  4.     width: 450px;
  5.     background: #fff;
  6.     -moz-border-radius: 2px;
  7.   -khtml-border-radius: 2px;
  8.   -webkit-border-radius: 2px;
  9.     border: 1px #BABABA solid;
  10.     position: relative;
  11.     z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
  12. }
  13.  
  14. .rectangle {
  15.     background: #a91c16;
  16.     height: 50px;
  17.     width: 480px;
  18.     position: relative;
  19.     left:-15px;
  20.     top: 30px;
  21.     float: left;
  22.     -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  23.   -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  24.   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  25.     z-index: 100; /* the stack order: foreground */
  26. }
  27.  
  28. .triangle-l {
  29.     border-color: transparent #6a120d transparent transparent;
  30.     border-style:solid;
  31.     border-width:15px;
  32.     height:0px;
  33.     width:0px;
  34.     position: relative;
  35.     left: -30px;
  36.     top: 65px;
  37.     z-index: -1; /* displayed under bubble */
  38. }
  39.  
  40. .triangle-r {
  41.     border-color: transparent transparent transparent #6a120d;
  42.     border-style:solid;
  43.     border-width:15px;
  44.     height:0px;
  45.     width:0px;
  46.     position: relative;
  47.     left: 450px;
  48.     top: 35px;
  49.     z-index: -1; /* displayed under bubble */
  50. }

Como vemos son muy importantes las propiedades z-index para poner los triángulos por debajo de la cinta además de las propiedades border-color de los triángulos que son las que le dan esa forma. También tenemos que jugar con la posición de estos para colocarlos en el sitio adecuado y que den ese efecto 3D.

Y con esto ya tendremos hecha nuestra cinta. Como ya he dicho en IE no se ve, lo cual es una pena, quizás en la siguiente versión: Internet Explorer 9.

Una ventaja a parte de la velocidad y de no usar ninguna imagen ni código javascript es que el código es completamente valido.

]]> http://www.guiabreve.com/como-crear-cintas-3d-solo-con-css3.htm/feed 0 Tooltips solo con CSS3 http://www.guiabreve.com/tooltips-solo-con-css3.htm http://www.guiabreve.com/tooltips-solo-con-css3.htm#comments Sat, 10 Jul 2010 18:33:54 +0000 Víctor Falcón http://www.guiabreve.com/?p=1681 A la hora de agregar Tooltips a nuestra web hay muchas opciones, todas ellas basadas en Javascritp, pero hasta ahora nunca había visto una opción que solo usará CSS3, como esta.

[COPIAR]
Código CSS (Copiar):
  1. a {
  2.   color: #900;
  3.   text-decoration: none;
  4. }
  5.  
  6. a:hover {
  7.   color: red;
  8.   position: relative;
  9. }
  10.  
  11. a[title]:hover:after {
  12.   content: attr(title);
  13.   padding: 4px 8px;
  14.   color: #333;
  15.   position: absolute;
  16.   left: 0;
  17.   top: 100%;
  18.   white-space: nowrap;
  19.   z-index: 20px;
  20.   -moz-border-radius: 5px;
  21.   -webkit-border-radius: 5px; 
  22.   border-radius: 5px; 
  23.   -moz-box-shadow: 0px 0px 4px #222; 
  24.   -webkit-box-shadow: 0px 0px 4px #222; 
  25.   box-shadow: 0px 0px 4px #222; 
  26.   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
  27.   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  28. }

Como vemos el código es bastante sencillo y usa el atributo title de los enlaces para mostrar como texto del tooltip. Usando CSS3 podríamos añadir algunas animaciones, pero esto es lo básico.

El resultado lo podeis ver en esta imagen.

]]> http://www.guiabreve.com/tooltips-solo-con-css3.htm/feed 1 Mejora la legibilidad de los textos con CSS http://www.guiabreve.com/mejora-la-legibilidad-de-los-textos-con-css.htm http://www.guiabreve.com/mejora-la-legibilidad-de-los-textos-con-css.htm#comments Wed, 07 Jul 2010 16:44:23 +0000 Víctor Falcón http://www.guiabreve.com/?p=1677 Mediante la propiedad text-rendering (que no conocía) podremos mejorar la legibilidad de los textos. text-rendering puede tomar los siguientes valores:

  • optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.
  • auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed para los de mayor tamaño.
  • optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
  • geometricPrecision – Da prioridad a la geometría del texto.

Por ahora esta propiedad solo funciona en Firefox 3 en adelante, además de Safari 5 y Chrome. Como siempre nos falta Internet Explorer y no estoy seguro de la compatibilidad de Opera (me extrañaría mucho que no se compatible).

]]> http://www.guiabreve.com/mejora-la-legibilidad-de-los-textos-con-css.htm/feed 0 Crea tu propio esquema elástico CSS personalizado http://www.guiabreve.com/crea-tu-propio-esquema-elastico-css-personalizado.htm http://www.guiabreve.com/crea-tu-propio-esquema-elastico-css-personalizado.htm#comments Wed, 30 Jun 2010 18:35:57 +0000 Víctor Falcón http://www.guiabreve.com/?p=1652 Siempre me ha gustado 960 Grid System para maquetar mis diseños que normalmente tienen dimensiones fijas.

Por otra parte muchas veces es necesario, e incluso aconsejable usar diseños elásticos que se adapten a la ventana del navegador y a la resolución de cada usuario. Para ello podemos utilizar Tiny Fluid Grid, una herramienta online que nos permite crear nuestro propio framework CSS personalizado en el que podremos definir el número de columnas, la separación de cada columna y el ancho máximo y mínimo.

Una vez que lo hallamos personalizado a nuestro gusto podremos descargarlo o previsualizarlo para ver como se comporta.

Vía: Kabytes

]]> http://www.guiabreve.com/crea-tu-propio-esquema-elastico-css-personalizado.htm/feed 0 Drawter: Dibuja y obtén el código CSS y HTML http://www.guiabreve.com/drawter-dibuja-y-obten-el-codigo-css-y-html.htm http://www.guiabreve.com/drawter-dibuja-y-obten-el-codigo-css-y-html.htm#comments Thu, 11 Mar 2010 16:38:07 +0000 Víctor Falcón http://www.guiabreve.com/?p=1303

Esta página creada con JavaScript y jQuery ayudara a los diseñadores a crear páginas de forma sencilla y 100% visual. Simplemente dibujaremos las distintas áreas y etiquetas en el área de dibujo y el solo se encargara de generar el HTML y CSS para crear un diseño que luzca igual que nuestro dibujo.

Una vez que tengamos todo "dibujado" en Drawter podremos entrar al modo de edición donde podremos personalizar aún más las propiedades de cada elemento. Tipo de letra, tamaño, color, color de fondo, contenido y prácticamente cualquier propiedad y atributo.

Visto en el Tumblog de ThemeForest

]]> http://www.guiabreve.com/drawter-dibuja-y-obten-el-codigo-css-y-html.htm/feed 0 Presentation Cycle: Presentaciones dinámicas con barra de progreso http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm#comments Mon, 25 Jan 2010 22:05:36 +0000 Víctor Falcón http://www.guiabreve.com/?p=1166 Presentation Cycle es un plugin de jQuery creado por Gaya Kessler que nos hará presentaciones o transiciones de imágenes con texto y una barra de progreso.

En el ejemplo podemos ver el funcionamiento de este plugin en 3 diferentes formas, la básica, una minimalista y otra aún mas minimalista.

Para implementarlo en una página debemos de incluir en el header las hojas de estilo y archivos del script y del jQuery:

[COPIAR]
Código HTML (Copiar):
  2.     <!-- Stylesheets-->
  3.     <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
  4.  
  5.     <!-- Scripts -->
  6.     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  7.     <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
  8.     <script type='text/javascript' src='js/presentationCycle.js'></script>
  9. </head>

Despúes en el body donde queramos incluimos el container:

[COPIAR]
Código HTML (Copiar):
  1. <div id="presentation_container" class="pc_container">
  2.             <div class="pc_item">
  3.                 <div class="desc">
  4.                     <h1>Server Park</h1>
  5.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  6.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  7.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  8.                     ligula ut nunc.
  9.                 </div>
  10.                 <img src="images/slide1.jpg" alt="slide1" />
  11.             </div>
  12.             <div class="pc_item">
  13.                 <div class="desc">
  14.                     <h1>iPhone Apps</h1>
  15.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  16.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  17.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  18.                     ligula ut nunc.
  19.                 </div>
  20.                 <img src="images/slide2.jpg" alt="slide2" />
  21.             </div>
  22.  
  23.             <!-- Introducimos más elementos si queremos, Aqui hay dos. -->
  24.  
  25.         </div>

Como vemos todo está contenido por <div id="presentation_container" class="pc_container"> y luego cada elemento es un <div class="desc"> con un div para la descripción que contiene el titulo en un h1 y la descripción en sí. Además hay una imagen que será el fondo.

Ahora solo nos falta añadir lo siguiente justo después del presentation_container y listo.

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript">
  2.             presentationCycle.init();
  3.         </script>

Si hemos subido todos los archivos y los hemos añadido en el header de forma correcta ya debería de funcionar.

Para más información consultar la página del autor donde explica (en ingles) como utilizar el script y además como personalizarlo.

]]> http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm/feed 0 Creando un Plugin para WordPress http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm#comments Thu, 14 Jan 2010 23:27:07 +0000 Víctor Falcón http://www.guiabreve.com/?p=1146 Yo ya he creado alguna vez un plugin para WordPress, pero nunca he hecho una entrada sobre como crearlo. En esta entrada vamos a crear un plugin para WordPress sencillo para empezar con algo básico facil de entender.

Nuestro plugin será sencillo. Simplemente sustituirá [abbr="Descripción"]Palabra[/abbr] por <abbr title="Descripción">Palabra</abbr>. Además añadirá unas pocas lineas de CSS a la página para que se vea todo correctamente.

Esto no es más que una pequeña implementación de BBCode. Siguiendo este ejemplo literalmente podremos añadir más elementos a nuestros post fácilmente. Si le echamos más imaginación podremos crear cualquier plugin.

El código.

Cabecera.

Todos los plugins en WordPress al igual que los themes deben tener una cabecera que contendrá la información básica del plugin.

[COPIAR]
Código PHP (Copiar):
  1. /*
  2.     Plugin Name: GoodABBR
  3.     Plugin URI: http://wordpress.org/extend/plugins/good-abbr/
  4.     Description: Make more easy to add abbreviations and descriptions to post
  5.     Author: Victor Falcon
  6.     Version: 1.0
  7.     Author URI: http://www.guiabreve.com/
  8. */
  9.  
  10. /*
  11.     en_EN
  12.     To add a abbreviations top post use [abbr="Description"]Word[/abbr]
  14.     es_ES
  15.     Para añadir una abreviatura en nuestros post usaremos [abbr="Descripcion"]Palabra[/abbr]
  16. */

Lo imprescindible es el primer bloque de comentarios donde está el Nombre del Plugin, la URL del mismo, una pequeña descripción. Nombre del autor, versión del plugin y URl del autor.

El resto son unas cuantas instrucciones extras para su uso.

La magia. Sustituyendo nuestro tag.

Ahora toca crear la función que hará que todos la sustitución de la que hablamos arriba. Tenemos que hacer que todos los [abbr="Descripción"]Palabra[/abbr] de las entradas pasen a <abbr title="Descripción">Palabra</abbr>.

En la función simplemente usamos preg_replace() para remplazar en el texto de la entrada nuestro tag por el código html correspondiente.

La clave esta en la última linea. Lo que hacemos es usar el metodo filtros que nos da WordPress con el que modificamos la información mostrada por pantalla. En este caso modificamos la función the_content que es la que contiene el texto de las entradas.

[COPIAR]
Código PHP (Copiar):
  1. // Search and Replace in posts
  2. function search_abbr ($content = '') {
  3.     return preg_replace('/\[abbr="(.*?)"\](.*?)\[\/abbr\]/', '<ABBR class="goodabbr" title="$1">$2</ABBR>', $content);
  4. }
  5. add_filter('the_content', 'search_abbr');

Dejando lo bonito. Añadiendo algo de CSS.

La mayoría de los navegadores tratan correctamente los abbr y los muestran bastante bien pero otros no. Por estos navegadores añadimos esta pequeña hoja de estilo que nos asegura que se vean correctamente en todos los navegadores.

Simplemente hemos creado una función que contiene las 3 lineas que añadiremos en la cabecera del blog. Luego usando add_action las añadimos en la función wp_head.

[COPIAR]
Código PHP (Copiar):
  1. <?php
  2. // Adding the style to make it more awe... [wait] ...some!
  3. function add_style() {  ?>
  4. <style type="text/css" media="screen">
  5.     .goodabbr{cursor: help;border-bottom: 1px dotted #333;}
  6. </style>
  7. <?php }
  8. add_action('wp_head', 'add_style');
  9. ?>

Es importante que usemos nombres de funciones originales para que no se repitan en otros plugin ya que nos podría dar problemas al tener varios plugins instalados. También, recordad que en el Codex de WordPress podréis encontrar mucha información que os será de ayuda.

Espero que os sirva de ayuda para comenzar a hacer pruebas y crear vuestros propios plugins. Aqui os dejo el código completo del plugin para que hagáis pruebas.

En los próximos días intentaré publicar como subir nuestro plugin al Directorio de plugins de WordPress.

]]> http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm/feed 0 Herramientas para Organizar Código http://www.guiabreve.com/herramientas-para-organizar-codigo.htm http://www.guiabreve.com/herramientas-para-organizar-codigo.htm#comments Mon, 14 Dec 2009 17:53:19 +0000 Víctor Falcón http://www.guiabreve.com/?p=1063 Organizar el código muchas veces es algo tedioso aúnque muy necesario e importante. Francisco nos recomienda 3 herramientas para organizar nuestro HTML, CSS y PHP de forma sencilla.

]]> http://www.guiabreve.com/herramientas-para-organizar-codigo.htm/feed 0 Enlaces para el Sábado http://www.guiabreve.com/enlaces-para-el-sabado.htm http://www.guiabreve.com/enlaces-para-el-sabado.htm#comments Sat, 10 Oct 2009 13:30:47 +0000 Víctor Falcón http://www.guiabreve.com/?p=912
  • WordPress MU dejará de existir en breve. Está previsto que para la versión 2.9 (o 3.0) se unifiquen.
  • 9 plugins que WordPress debería incorporar por defecto.
  • @font-face en profundidad. Todo sobre esta propiedad de CSS3 que nos permitirá usar nuestras fuentes en nuestros diseños.
  • Spoon. Prueba cualquier navegador web sin instalarlo.
    • ]]>     http://www.guiabreve.com/enlaces-para-el-sabado.htm/feed 0     Página de prueba HTML para testear nuestro CSS http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm#comments Wed, 24 Jun 2009 21:45:24 +0000 Víctor Falcón http://www.guiabreve.com/?p=863 En Snipplr podemos ver los fragmentos de código que usan otros diseñadores. Algunos de ellos son realmente buenos como este que he encontrado hoy.

    Es sencillo. Simplemente es una página HTML en la que encontraremos aquellos elementos más comunes y asi podremos probar nuestra hoja de estilo CSS y comprobar que elementos hemos definido, cuales no y cuales están bien y cuales no. Todo ello desde una solo página de un solo viztazo.

    A continuación os dejo el código aunque también podeís verlo en snipplr.

    [COPIAR]
    Código HTML (Copiar):
    1. <!-- Sample Content to Plugin to Template -->
    2. <h1>CSS Basic Elements</h1>
    3. The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
    4.  
    5. <hr />
    6. <h1 id="headings">Headings</h1>
    7. <h1>Heading 1</h1>
    8. <h2>Heading 2</h2>
    9. <h3>Heading 3</h3>
    10. <h4>Heading 4</h4>
    11. <h5>Heading 5</h5>
    12. <h6>Heading 6</h6>
    13. <small><a href="#wrapper">[top]</a></small>
    14.  
    15. <hr />
    16. <h1 id="paragraph">Paragraph</h1>
    17. <img style="width: 250px; height: 125px; float: right;" src="images/css_gods_language.png" alt="CSS | God's Language" />
    18.  
    19. Lorem ipsum dolor sit amet, <a title="test link" href="#">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
    20.  
    21. Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
    22.  
    23. <small><a href="#wrapper">[top]</a></small>
    24.  
    25. <hr />
    26. <h1 id="list_types">List Types</h1>
    27. <h3>Definition List</h3>
    28. <dl> <dt>Definition List Title</dt> <dd>This is a definition list division.</dd> </dl>
    29. <h3>Ordered List</h3>
    31.     <li>List Item 1</li>
    32.     <li>List Item 2</li>
    33.     <li>List Item 3</li>
    34. </ol>
    35. <h3>Unordered List</h3>
    37.     <li>List Item 1</li>
    38.     <li>List Item 2</li>
    39.     <li>List Item 3</li>
    40. </ul>
    41. <small><a href="#wrapper">[top]</a></small>
    42.  
    43. <hr />
    44. <h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
    46. <legend>Legend</legend>
    47.  
    48. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
    49.  
    51. <h2>Form Element</h2>
    52. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.
    53.  
    54. <label for="text_field">Text Field:</label>
    55.  
    56. <input id="text_field" type="text" />
    57.  
    58. <label for="text_area">Text Area:</label>
    59.  
    60. <textarea id="text_area"></textarea>
    61.  
    62. <label for="select_element">Select Element:</label>
    63.  
    64. <select name="select_element"> <optgroup label="Option Group 1"></optgroup> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <optgroup label="Option Group 2"></optgroup> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
    65.  
    66. <label for="radio_buttons">Radio Buttons:</label>
    67.  
    68. <input class="radio" name="radio_button" type="radio" value="radio_1" /> Radio 1
    69.  
    70. <input class="radio" name="radio_button" type="radio" value="radio_2" /> Radio 2
    71.  
    72. <input class="radio" name="radio_button" type="radio" value="radio_3" /> Radio 3
    73.  
    74. <label for="checkboxes">Checkboxes:</label>
    75.  
    76. <input class="checkbox" name="checkboxes" type="checkbox" value="check_1" /> Radio 1
    77.  
    78. <input class="checkbox" name="checkboxes" type="checkbox" value="check_2" /> Radio 2
    79.  
    80. <input class="checkbox" name="checkboxes" type="checkbox" value="check_3" /> Radio 3
    81.  
    82. <label for="password">Password:</label>
    83.  
    84. <input class="password" name="password" type="password" />
    85.  
    86. <label for="file">File Input:</label>
    87.  
    88. <input class="file" name="file" type="file" />
    89.  
    90. <input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
    91.  
    92. </form>
    93.  
    94. </fieldset>
    95.  
    96. <small><a href="#wrapper">[top]</a></small>
    97.  
    98. <hr />
    99. <h1 id="tables">Tables</h1>
    100. <table border="0" cellspacing="0" cellpadding="0">
    103. <th>Table Header 1</th>
    104. <th>Table Header 2</th>
    105. <th>Table Header 3</th>
    106. </tr>
    108. <td>Division 1</td>
    109. <td>Division 2</td>
    110. <td>Division 3</td>
    111. </tr>
    112. <tr class="even">
    113. <td>Division 1</td>
    114. <td>Division 2</td>
    115. <td>Division 3</td>
    116. </tr>
    118. <td>Division 1</td>
    119. <td>Division 2</td>
    120. <td>Division 3</td>
    121. </tr>
    122. </tbody></table>
    123. <small><a href="#wrapper">[top]</a></small>
    124.  
    125. <hr />
    126. <h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
    127. Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr>
    129. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></pre>
    130. <blockquote>"This stylesheet is going to help so freaking much."
    131. -Blockquote</blockquote>
    132. <small><a href="#wrapper">[top]</a></small>
    133. <!-- End of Sample Content -->

    ]]>     http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm/feed 3