Generando partículas con HTML5

Me he topado con un fantástico ejemplo visual que muestra potencial del nuevo HTML5. El ejemplo muestra un sistema de partículas luminosas que puede personalizarse ajustando infinidad de valores  que definen el color, tamaño, cantidad y tipo de movimiento de las partículas.

generando-particulas-html5

Incluso se puede mover el conjunto arrastrando las partículas con el ratón.

Web : www.mrspeaker.net

Visto en wwwhatsnew.com

Comprimir, crear y limpiar hojas de estilo CSS online

Os presento 12 herramientas online para crear, comprimir y limpiar las hojas de estilo CSS.

  1. flumpCakes Online CSS Optimiser/Optimizer
  2. Styleneat – CSS Organizer
  3. Clean CSS – Optmize and Format your CSS
  4. CSS Compressor – Online Code Compressor
  5. Code Beautifier – CSS Formatter and Optimiser
  6. CSS SuperScrub
  7. Online CSS Optimiser
  8. CSS Compressor – CSS Drive
  9. CSS Analyser
  10. CSS Redundancy Checker
  11. CSS Code Formatter and Optimizer – CSS Portal
  12. Yui Compression

Visto en wwwhatsnew.com

Eliminar el Cellspacing y Cellpadding de las tablas HTML con CSS

Existen un par de atributos en las tablas HTML que no son fáciles de quitar.
He tenido bastantes quebraderos de cabeza desencadenados por el cellspacing y el cellpadding que siempre acompaña a las tablas.
Si queremos que aparezcan sin espacios de ningún tipo entre las celdas de las tablas, podemos hacerlo de manera sencilla desde css.

Sin css sería así:

<table cellspacing="0" cellpadding="0"></table>

Pero a día de hoy carece de sentido ya que con css lo hacemos todo mucho más dinámico.
Si deseamos que todas nuestras tablas carezcan de espacios entre celdas simplemente modificamos los atributos de las etiquetas genéricas, table y td:

table {border-collapse:collapse; border: none;}
td {padding: 0;}

Si por el contrario desamos concretar la tabla y celdas definimos dos clases en nuestra hoja de estilos:

table.tabla_sin {
border-collapse:collapse;
border: none;
}
td.celda_sin {
 padding: 0;
}

Tan solo nos queda agregar las clases a los implicados y listo.

<table class="tabla_sin">
<tbody>
<tr>
<td class="celda_sin">bla bla bla</td>
<td class="celda_sin">bla bla bla</td>
<td class="celda_sin">bla bla bla</td>
</tr>
</tbody>
</table>