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

Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio.

(Ver Imagen)

Para probarlo necesitaremos la última versión de WebKit (r45824 o superior) y acceder a esta demo.

Me gustaría tener el pedazo de máquina que debe tener el que ha grabado el video para poder verlo así de fluido, por desgracia no he podido verlo de esa forma, pero ya despunta como una nueva forma de ver Internet.

Via email he recibido un par de artículos interesantes que me parece interesante compartir:

1. Pautas de diseños en Photoshop [peivem.com]
2. Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar]
3. Honda Insight [Vimeo] (Via Hans Christian)

Si quieres compartir algo, solo tienes que hacermelo saber

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.

Hace ya más de un año hablamos de una serie de propuestas para CSS3 que el equipo de WebKit estaba haciendo sobre las CSS Transformations. A lo largo del año, hemos visto algunas aplicaciones de estas propiedades que ya podemos encontrar en algunos navegadores. La última viene de manos de Paul Hayes, y via Ajaxian, descubro que está montando cubos 3D con CSS transformations.

(Ver Imagen)

¿Como están hechos?

Para comprender la importancia de esas nuevas funcionalidades del CSS3, veamos como están montados estos cubos que hasta el momento únicamente funcionan sobre Safari, Chrome y Firefox 3.5. Y para los demás navegadores requieren una buena dosis de Javascript.

HTML

El HTML, osea la estructura del cubo es muy sencilla y cada uno de ellos tiene algo similar a esto.

<div class="cube">
        <div class="topFace">
                <div>
                        Content
                </div>
        </div>
        <div class="leftFace">
                Content
        </div>
        <div class="rightFace">
                Content
        </div>
</div>

CSS (Aplicamos la mágia)

El CSS  además de definir el tamaño de las caras del cubo nos define el efecto de 3D que hemos de aplicar a cada una de ellas.

.cube {
	position: relative;
	top: 200px;
}

.rightFace,
.leftFace,
.topFace div {
	padding: 10px;
	width: 180px;
	height: 180px;
}

.rightFace,
.leftFace,
.topFace {
	position: absolute;
}

.leftFace {
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	background-color: #ccc;
}

.rightFace {
	-webkit-transform: skewY(-30deg);
	-moz-transform: skewY(-30deg);
	background-color: #ddd;
	left: 200px;
}

.topFace div {
	-webkit-transform: skewY(-30deg) scaleY(1.16);
	-moz-transform: skewY(-30deg) scaleY(1.16);
	background-color: #eee;
	font-size: 0.862em;
}

.topFace {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	top: -158px;
	left: 100px;
}

Yo no veo nada de Javascript, lo que hace que el navegador se encargue de generar estos efectos de una forma más rápida y eficiente. Un avance hacia una nueva Internet, sin duda.

En Dezinerfolio recogen todas (o casi) las opciones de las que disponemos para emular la propiedad font-face de CSS3 que nos permitirá usar fuentes descargables y no depender de las que el usuario tenga instaladas en su máquina.

Ejemplo

<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Listado de opciones

1. sIFR 2.0
2. cufón
3. P+C DTR
4. FLIR
5. SIIR
6. DTR
7. sIFR 3
8. Typeface.js
9. IFR
10. PHP+CSS DTR
11. CSS Image Replacement [static]
12. swfir

Ajaxian nos muestra Sly, un selector CSS3 realmente sorprendente creado por Harald Kirschner.

(Ver Imagen)

La imagen habla por si sola, los resultados son realmente increibles. Siendo más de la mitad más rápido que Slick (el selector de MooTools), casi 3 veces más rápido que Prototype e incluso mucho más rápido que Sizzle de jQuery. Y todo en 3kb.

Los que quieran ver el código, verán que se ha usado la filosofía de MooTools, osea limpio y claro. Una gozada leerlo.

Actualización

Cuando estuve viendo los resultados de Sly, pensé que sería interesante ver un cara a cara contra Peppy y Sizzle (solo el selector) así que configuré SlickSpeed para ver que tal se porta. Además, he añadido la versión nativa que hace uso de document.querySelectorAll().