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

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().

La gente de noupe nos muestra un excelente post en el que podemos ver alguna de las propiedades CSS3 que ya tenemos ganas de tener en nuestras manos y las alternativas jQuery con las que podemos obtenerlas actualmente.

1. border-radius

Quizas es la propiedad más nombrada (despues de opacity) de las que están a punto de llegar. Y me parece lógico ya que las soluciones actuales (sin javascript) son engorrosas y desmesuradas. Con jQuery Canvas Rounded Corner podremos mitigar esas ansias de dispone de esta propiedad.

CSS3

#rounded-box {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

jQuery

$('#rounded-box').corners({ radio: 15, borderSize: 2 });

2. border-image

Otra propiedad muy solicitada por la comunidad de diseñadores. Para usarla actualmente, tendremos que recurrir a jQuery borderImage.js.

CSS3

.button{
	-moz-border-image: url("media/button1.png") 0 5;
	-webkit-border-image: url("media/butto1.png") 0 5;
}

jQuery

$('#buttons a, .button a').borderImage('url("media/button0.png") 0 5', 'media/button1.png', 'media/button2.png')

3.Multiple Backgrounds

Sin duda una propiedad que dará mucho juego y que ofrecerá la posibilidad de dejar de ver el <body /> como una pizarra en la que pintamos. Por el momento tenemos que conformarnos con jQuery MultipleBackground.

CSS3

#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}

jQuery

$(function(){
  $('.marioBox').add_layer("#A4D3FF");
  $('.marioBox').add_layer("url('/images/mario_floor.gif') no-repeat bottom");
  $('.marioBox').add_layer("url('/images/mario_bush.gif') no-repeat 10px 167px");
  $('.marioBox').add_layer("url('/images/mario_pipe.gif') no-repeat 180px 183px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 90px 93px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 180px 53px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 20px 73px");
  $('.marioBox').add_layer("url('/images/goomba.gif') no-repeat 70px 214px");
  $('.marioBox').add_layer("url('/images/mario.gif') no-repeat 180px 156px");
});

4. Box shadow y text-shadow

Se acabó el usar <div /> flotantes colocados debajo de otro para obtener una sombra, con la llegada de CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para conseguirlo.

CSS3

h3 { text-shadow: 2px 2px 2px #333; }

jQuery

$("h3").dropShadow({left: 2, top: 2, blur: 1, color: "#03f", swap: true});

5.Opacity

La propiedad CSS3 por excelencia, sin duda es la más mediática de todas las propiedades y con la que se han conseguido maravillas como Lightbox. De ahí que jQuery, sea capaz de usarla nativamente. Aunque plugins como Gradient permite más juego.

CSS3

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

jQuery

$('#main').gradient({
		from:	'fefefe',
		to:		'cddcc3',
		direction:	'horizontal'
	});

Hace ya muchos meses que venimos hablando las CSS Transformations y tambien de los navegadores que poco a poco se van sumando a esta nueva tecnología. Y es que aunque haya un debate bastante acalorado sobre llevar al nivel del diseño o no los movimientos de los elementos, hay que reconocer que son impresionantes.

tyPhoGraphic es la última herramienta con la que usar estas CSS Transformations  será más fácil todavía, aunque le encuentro 2 grandes problemas:

<div effect="zoomin" duration="1700" >2009</div>
<div effect="zoomout" duration="1600"  start="-200">2009</div>
<div effect="wobble" duration="1000" >2009!</div>
<div effect="shake" duration="1200" >2009!</div>

<div effect="shake" duration="1000" start="200" >Happy </div>
<div effect="waggle" duration="1200" >New</div>
<div effect="waggle" duration="1200" >Year!</div>

<div effect="zoomout" duration="800" start="500" >Party </div>

<div effect="zoomout" duration="400" >like </div>
<div effect="zoomin" duration="400" start="-100" >it's </div>
<div effect="zoomin" duration="800" >1999</div>
<div effect="shake" duration="50000" >

Aquí es donde está el primer problema, la inclusión de nuevos atributos a los elementos HTML nos hará que nuestras páginas no validen. El segundo problema, es que únicamente funciona en navegadores con CSS Transformations, lo que navegadores como Firefox 3.0, IE6, IE7, Opera 9.5,.. no funcionará el siguiente ejemplo.

Yo lo he visto con WebKit/iPhone y he tenido la impresión de estar viendo un video Flash.Sin duda es una muestra de lo que podremos hacer en un futuro.
Via