Curioso truco para evitar que los spammers lean tu email, ya que lo escribes al revés y mediante CSS lo inviertes.
<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>Reverse Your Email with CSS and Prevent Spam
Vía / @jlantunez
Konstruktors es un lugar dónde podremos encontrar códigos CSS para copiar y pegar. No se trata de ficheros independientes, sino de trozos de código.
Mantener código CSS en ficheros de texto no es difÃcil, y es conveniente teniendo múltiples llamadas HTTP. Si tenemos bien organizados nuestros estilos, con estos trozos de código podremos modificar los estilos sin mayor dificultad.
Los trozos de código se dividen en uso para grid, aspectos básicos de HTML y menús.
Konstruktors
VÃa / Posh CSS
Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseño inicial de la estructura de la página (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseños, 4 estáticos y 4 fluidos. Siendo los 4 diseños para los dos diferentes tipos los siguientes: 1 columna sin navegación, 1 columna con navegación arriba, 2 columnas con navegación izquierda y 2 columnas con navegación derecha.
Lo que se echa en falta es una explicación más detallada, ellos recomiendan ver el código fuente y experimentar con él, el código está algo comentado, pero quizás no sea necesario para gente que se esté iniciando en el diseño web o que pasen de diseño con tablas a diseño sin tablas.
CSSeasy.com
VÃa / Digg
La gente de SitePoint han publicado un gran artÃculo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artÃculo cómo podÃa pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artÃculo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box
Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.
Se trata de añadir una lÃnea indicando el xml-stylesheet en las RSS:
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:
rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}Adding a CSS StyleSheet to your RSS Feed
VÃa / dzone
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. You might think it would be as simple as this:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }Howe …
Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.
10 Coding Guidelines for Perfect Findability and Web Standards