En smashingmagazine.com han publicado 50 técnicas CSS, realmente es impresionante lo que se puede llegar hacer sobretodo con la esperada CSS3.
Más adelante pondré algunos ejemplos basados en algunas de estas técnicas y las explicaré paso a paso.
Aquí tenéis la noticia completa.

En sentidoweb he visto un artículo dónde explícan como invertir un texto mediante CSS, muy útil para insertar un email y que los spammers no te lo detecten..

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }
</style>
<p><span class="test">moc.tset@tset</span></p>

Muy útil e ingenioso pero al no poder poner un “mailto” no sirve de mucho, para estos casos mejor utilizar jQuery para ocultar el código del email.

Este post es la segunda parte del primer post, ya que se ha mejorado el script.

Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.

//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
	if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
		$("body","html").css({height: "100%", width: "100%"});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$("#cssBackground").length>0) {
		$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$("#cssPopup").css("width",width);
	}
	if (height!=undefined) {
		$("#cssPopup").css("height",height);
		$("#cssPopup").css("overflow","auto");
	}
	$("#cssBackground").slideDown("slow"); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$("#cssPopup").load(URL,function(){
		//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$("#cssPopupContainer").css("top",50);
		ancho=$(window).width();
		$("#cssPopupContainer").slideDown("fast", function () {
			anchopopup=$("#cssPopup").width();
			$("#cssPopupContainer").css("width",ancho);
		});
	});
}

function popupCssHide () {
	$("#cssPopupContainer").slideUp("fast", function () {
		$("#cssBackground").fadeOut("fast",function () {
			$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
			$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition > 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}

La hoja de estilos quedaría de la siguiente manera:

#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}

Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:

<!--[if lt IE 7]>
<style type="text/css" media="all">
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->

Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:

<!--[if IE 7]>
<style type="text/css" media="all">
	#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->

Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:

<?
if ($_GET['page']=="pagina-1") {
	include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
	include ("includes/pagina-2.php");
	}
?>

Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.

Para llamar al popup sería de la siguiente forma:

<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>

También le pasamos el parámetro ’460′ para que nos habrá la ventana a ’460px’.

Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.

Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.

Nueva versión CSS PopUp jQuery y Ajax.

Hemos visto como hacer un PopUp con un iframe transparente utilizando thichbox, os voy a mostrar otro método sin utilizar un iframe, simplemente con capas y con la ayuda de jQuery.
Lo primero que necesitamos es una capa que ocupe toda la pantalla y que tenga una opacidad.

<div id="capaPopUp"></div>

Luego necesitamos la ventana del popup.

<div id="popUpDiv">
	<div id="capaPng">
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales vulputate erat. Nulla facilisi. Sed porta velit. Sed nec mi.
		</div>
		<a href="javascript:void(0);" title="Cerrar" id="cerrar"><img src="wp-content/examples/jquery/css-popup/imagenes/icons/cerrar.gif" title="Cerrar" alt="Cerrar" /></a>
	</div>
</div>

En nuestra hoja de estilos añadimos los siguientes estilos (Comento línea a línea para que sea fácil de entenderlo):

/**************************************************************************
ESTILOS PARA LA VENTANA POPUP 20090323@JCP
***************************************************************************/
#capaPopUp {
	background-color:#000;  	/* Le damos la el color de la opacidad. */
	opacity:0.65; 				/* Este valor mostrará la intensidad de la opacidad. */
	position:absolute; 			/* La posición tendrá que ser absoluta. */
	z-index:9001; 				/* Esta propidad es para añadir la capa superpuesta al nivel 9001. */
	top:0; 						/* Para que posicione la capa al punto '0' del top de la página. */
	left:0; 					/* Para que posicione la capa al punto '0' a la izquieda de la página. */
	width:100%; 				/* El valor por defecto que tendrá que expandirse. */
	height:100%; 				/* El valor por defecto que tendrá que expandirse. */
	display:none;				/* Por defecto estará desactiva */
}
#popUpDiv {
	position:absolute; 			/* La posición tendrá que ser absoluta. */
	z-index:9002; 				/* Esta propidad es para añadir la capa superpuesta al nivel 9002 (antes que la capa 'capaPopUp'). */
	overflow:auto;				/* Esta propiedad la indicamos por si el contenido es más grande que la capa que por defecto salga el 'scroll'. */
	left:50%; 					/* Para posicionar horizontalmente la capa al centro de la página */
	display:none; 				/* Por defecto estará desactiva */
	top:50%; 					/* Para posicionar verticalmente la capa al centro de la página */
}
/**************************************************************************
ESTILOS PROPIOS DEL POPUP 20090323@JCP
***************************************************************************/
#capaContent {
	display:block;
	width:400px; 				/* Necesario para que el script centre la capa horizontalmente en la página */
	height:200px;				/* Necesario para que el script centre la capa verticalmente en la página */
	background-color:#FFF;
}

Para que Internet Explorer haga la opacidad tendremos que insertar un condicional en el ‘head’:

<!--[if IE]>
<style type="text/css" media="all">
	#capaPopUp 	{filter:alpha(opacity=65);}
</style>
<![endif]-->

Este condicional quiere decir: Si eres IE añade esta clase.

jQuery en acción…
Primero, añadimos la librería jQuery en el ‘head. Una vez hecho esto insertamos el script para hacer funcionar nuestra capa PopUp (comento las líneas para que sea más fácil entender el script).

/*
 * jQuery CSS popUp
 * http://dixso.net/
 *
 * Copyright (c) 2009 Julio De La Calle Palanques
 *
 * Date: 2009-03-27 12:34:00 - (Viernes, 27 Mar 2009)
 *
 */

//Variable que almacenará la posición del scroll, por defecto tiene valor 0.
var scrollCachePosition = 0;

$(function() {
	$("#abrirPop").click(function(event) {
		scrollCachePosition = $(window).scrollTop();
		//Envío el scroll a la posición 0 (left), 0 (top), es decir, arriba de todo.
		window.top.scroll(0,0);

		//Si el body es mas grande que la capa 'wrapper' incrementa la altura del body a la capa 'capaPopUp'.
		if ($("body").outerHeight()>$("#wrapper").outerHeight()){
			var altura=$("body").outerHeight();
	    }else{
		//Si la capa 'wrapper' es más grande que el body incrementa la altura de la capa 'wrapper' a la capa 'capaPopUp'.
			var altura=$("#wrapper").outerHeight();
		}
		window.document.getElementById("capaPopUp").style.height=altura+"px";
		event.preventDefault();
		//Muestro la capa con el efecto 'slideToggle'.
		$("#capaPopUp").slideToggle();

		//Calculo la altura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
		var altura=$("#popUpDiv").outerHeight();
		$("#popUpDiv").css("margin-top","-"+parseInt(altura/2)+"px");

		//Calculo la anchura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
		var anchura=$("#popUpDiv").outerWidth();
		$("#popUpDiv").css("margin-left","-"+parseInt(anchura/2)+"px");

		//Muestro la capa con el efecto 'slideToggle'.
		$("#popUpDiv").slideToggle();
	});
	$("#cerrar").click(function(event) {
		event.preventDefault();
		//Cierro las capas con el efecto 'slideToggle'.
		$("#capaPopUp").slideToggle();
		$("#popUpDiv").slideToggle();
		//Si la variable scrollCachePosition es mayor que 0 incrementará la posición del scroll al valor que se almacenó.
		if (scrollCachePosition > 0) {
			window.top.scroll(0,scrollCachePosition);
			//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces sea necesario.
			scrollCachePosition = 0;
		}
	});
});

¿Qué hace el script exactamente?
- Calcula la altura actual de todo el ‘body’ para hacer la opacidad.
- Calcula la altura y anchura de la ventana popUp definida en las CSS para poder centrar la capa horizontal y vertical.
- Almacena en una variable la posición del scroll actual para ser redirigido una vez al cerrar la ventana popUp.
- Añade efectos jQuery para la visualización de la ventana PopUp.

¿Ventajas respecto a un iFrame?
No muchas, teniendo en cuenta que en un iFrame se puede interactuar mejor, pero este script es mucho más rápido que un iFrame ya que llama la venta cuando ya está cargada en el código ‘html’.

También este script es útil cuando la venta popUp tiene mucha altura (El scroll sale en el navegador, lo contrario que en un iFrame, el scroll saldría en la propia ventana). Otra ventaja sería que tenemos el control total del evento, es decir, podemos personalizar nuestra ventana popUp a nuestro gusto.

En el ejemplo veréis que he añadido mucho texto para que salga el scroll y poder ver el script con todas sus funcionalidades, el link para “lanzar” el popUp está bajo de todo.

Nota: Este script funciona con TODOS los navegadores incluido el Internet Explorer 6.

Ejemplo: aquí.
Descarga: aquí.

Como regla general, la mayoría de los desarrolladores web, especialmente los aficionados en usabilidad, dicen que es una mala práctica usar menús desplegables, ya que son confusos, molestos y muchas veces disfuncional.

Desde un punto de vista de diseño, sin embargo, menús desplegables son una excelente opción, ya que puede ayudar a limpiar una concurrida presentación.

Aquí os dejo una buena recopilación de menús desplegables.

Para insertar un iframe y que tenga transparencia hay que añadir lo siguiente en el código html:

<iframe allowtransparency="allowtransparency" style="border:#FFF solid 2px;" src="iframe.php"></iframe>

Nota:
- Para lograr la transparencia es necesario el elemento: allowtransparency=”allowtransparency” para IE, claro.
- El borde que le pongo al iframe es para que se vea mejor el ejemplo (más a bajo).

Én el fichero dónde se llamará el iframe añadimos el siguiente estilo:

body 	{background-color:transparent;} /* fondo transparente para los navegadores NORMALES */

Ejemplo aquí.

Por suerte hay muchos métodos para lograr que Internet Explorer 6 logre coger transparéncia a los formatos png’s.
Aquí os muestro una manera mediante CSS:

#capaPng {
	height:300px;
	width:400px;
	background-image:url(imagenes/img.png) !important;
	background-image:none;
	filter:none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Y en el código html esto:

<div id="capaPng"></div>

Nota:
- Es necesario poner la altura (height) y anchura (width) de la capa para que los navegadores posicionen correctamente el png.
- Los ‘filter’ (para IE6) es necesario poner la ruta absoluta del png, si no insertáis la ruta absoluta no saldrá reflejado el png.

Ejemplo aquí.

El elemento ‘filter’ no es válido según W3C para las hojas de estilos, por lo tanto, esto no sería del todo correcto… ¿Solución?

Añadir esto:

	background-image:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');

En nuestras hojas de estilo IE6 del Browser detect jQuery, de esta forma tendremos nuestra hoja de estilos principal validada y en la hoja de estilos de IE6 insertaremos todos los hack’s que sean necesarios para ver las cosas correctamente.

Ejemplo aquí.

Al crear un formulario y añadir el elemento “select” por defecto IE6 y IE7 (En IE8 ya solventaron el problema) lo muestra con borde, pero claro, hay formularios que queremos que se muestren de otra forma que no con el borde blanco.

Ejemplo de select por defecto en IE6 y IE7:

En el resto de navegadores bastaría con ponerle esto a nuestra hoja de estilos (css):

select {border:none;}

Nos quedaría de la siguiente forma:

Para que nos quedara igual como el resto de los navegadores estándares tendríamos que añadir lo siguiente en nuestra hoja de estilos (css) yo recomiendo añadir el código en una hoja específica para cada navegador (IE6 y IE7).

.capaSelect {
  position:relative;
  width:126px;
  height:18px;
  overflow:hidden;
}
.capaSelect select {
  background:#9999CC;
  position:absolute;
  width:130px;
  top:-2px;
  left:-2px;
}

Y el código html:

<div class="capaSelect">
    <form>
        <select>
            <option>dixso.net</option>
        </select>
    </form>
</div>

Ejemplo aquí.

¿Que necesidad hay en utilizar javascript cuando la solución está en CSS?
El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado apagado (off) y encendido (on) en dos imágenes:
- menu-izq.gif
- menu-der.gif (Esta imagen tiene que ser bastante ancha para que se adapte a todo tipo de palabras.)

Las imágenes miden de alto 84px, así entonces el menú medirá la mitad de la imagen, por posiciones de background definimos el over.

En nuestra hoja de estilos definiremos lo siguiente:

/**************************************************************************
CSS DOCUMENTO - MENÚ ROLLOVER CSS - 20090317@JCP - DIXSO.NET
***************************************************************************/
#menu 			{float:left; width:100%; font-size:12px; border-bottom:1px solid #2763A5;}
#menu ul 		{padding:10px 10px 0 50px; list-style:none;}
#menu li 		{display:inline;}
#menu a 		{float:left; padding:0 0 0 4px; text-decoration:none; background: url(../imagenes/menu-l.gif) no-repeat left top;}
#menu a span 		{float:left; display:block; padding:5px 15px 4px 6px; font-weight:bold; background:url(../imagenes/menu-r.gif) no-repeat right top; color:#FFF;}
#menu a:hover 		{background-position:0% -42px;}
#menu a:hover span 	{background-position:100% -42px;}

Y en nuestro código html definiremos lo siguiente:

<div id="menu">
  <ul>
    <li><a href="#" title="Enlace 1"><span>Enlace 1</span></a></li>
    <li><a href="#" title="Enlace 2"><span>Enlace 2</span></a></li>
    <li><a href="#" title="Enlace 3"><span>Enlace 3</span></a></li>
    <li><a href="#" title="Enlace 5"><span>Enlace 5</span></a></li>
    <li><a href="#" title="Enlace 6"><span>Enlace grande 6</span></a></li>
	<li><a href="#" title="Enlace 7"><span>Enlace 7</span></a></li>
  </ul>
</div>

Ejemplo aquí.
Descarga aquí.

Primero, ¿qué son los Sprites? Se trata de una gran imagen que contiene más imágenes pequeñas dentro. Los Sprites eran usados en los videojuegos antiguos de 2D, esos que tenían pocos colores, para tener cargados a sus personajes y mediante sus algoritmos de programación se movían dentro de esta gran imagen y daba como resultado el personaje moviéndose, corriendo, etc. Este es un ejemplo de sprites del famosísimo juego Mario Bros:

CSS Sprites

Leer más…