aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Via Sentido Web descubro un artículo muy interesante que nos muestra como el ingenio puede ayudarnos a solucionar problemas. En este caso, mediante el uso de la propiedad direction del CSS invertimos nuestro email para mostrarlo correctamente por pantalla.

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

Interesante técnica para evitar el SPAM. Quizás como recomendación recomendaría email con algún punto en el nombre para hacer más dificil la lectura del mismo (xxx.yyy@zzzz.aaa). Incluso deberíamos tener en cuenta a los visitantes que no tengan activas las CSS e informar que ese correo está al revés aunque despues ocultemos el texto mediante CSS para los que si lo tengan activado.

La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.

(Ver Imagen)

El resultado es muy similiar al ofrecido por cualquiera de las versiones de Lightbox, salvo que con esta versión no disfrutaremos de efectos ni de funcionalidades que nos permitan interactuar con la foto (pasar fotos, cambiar tamaño, moverla por pantalla). Sin duda se trata de un experimento CSS muy interesante.

¿Como funciona?

Veamos el código para entender como han conseguido hacer este efecto.

// HTML
// Miniaturas
<a href="#futurebox_img1">
	<img
		src="gr_ninja-attack_med.gif"
		width="100"
		height="102"
		alt="The CSS Ninja"
		id="futurebox01"
	/>
</a>
// Contenedor de imagenes grandes (uno por cada imagen grande)
<div class="overlay" id="futurebox_img1">
	<div class="overlay_container">
		<a href="#close" title="Close future box">
			<img
				src="gr_cssninja_lrg.png"
				alt="The Css Ninja"
				width="600"
				height="639"
			/>
		</a>
	</div>
</div>

// CSS
html, body { height: 100%; }

.overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay .overlay_container
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}

.overlay:target { display: table; }

Como podemos ver la mágia del script es el uso de :target para aplicar el display: table; al fondo de la pantalla (.overlay). Gracias a este pseudo-selector detectamos cuando un enlace-ancla lo está referenciando y al ser este accionado, aplicará el estilo asociado.

Evidentemente por el momento este código, únicamente funcionará en Firefox 1.5+, Safari 3.2+, Chrome 2+ y Opera 9.5+, echarle un vistazo a la demo y vereis lo bien que queda.

Firefox 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los elementos de nuestra web mediante transformaciones de inclinación y tamaño realizado con unas pocas líneas de código.

(Ver Imagen)

Código

// HTML
<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

// CSS
.cube {
 position: absolute;
}

.face {
 position: absolute;
 width: 200px;
 height: 200px;
}

// Tranformaciones 3D
.top {
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

.left {
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
}

.right {
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Por el momento, deberemos usarla con prefijo (-moz), ya que aún no está estandarizado por la W3C. Por el momento tenemos que conformarnos con la beta 4, pero en poco más de un mes tendremos versión definitiva.

Ajaxian nos muestra hoy CSS Gradient Tool. Una herramienta que nos permite aprovecharnos de una característica CSS que actualmente solo está disponible en WebKit.

(Ver Imagen)

Como podemos ver la característica -webkit-gradient, nos permitirá realizar degradados más fácilmente, aunque estos solo podrán ser vistos en los navegadores que usen WebKit (Safari, Chrome, …).

-webkit-gradient(linear, left top, left bottom, from(#146366), to(#4D5366), color-stop(.6,#142633))

CSS Gradient Tool,  se trata de una herramienta que nos permite generar de una forma visual el código CSS necesario para conseguir que estos degradados sean más sencillos de implementar.