Contenido

Técnicas CSS3 que podemos conseguir con jQuery

24 feb

+ 11

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'
	});

Bordes redondeados con CSS Sprites

29 dic

+ 5

CSSGlobe publica un fantástico tutorial de como crear bordes redondeados con Sprites. Mientras esperamos a border-radius podemos usar esta alternativa que seguro nos sacará de algún problemilla

tyPhoGraphic, transformaciones CSS

29 dic

+ 2

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

Whatever:hover, selector :hover para todos los navegadores

22 dic

+ 7

Whatever:hover, es una herramienta con la que podremos disfrutar del atributo pseudo selector :hover en todos los navegadores, incluido Internet Explorer 6. El funcionamiento es realmente sencillo y basado en el uso de un fichero .htc, simplemente tendremos que hacer lo siguiente:

body {
   behavior: url("csshover3.htc");
}

De esta forma podremos usar los pseudo selectores :hover en nuestros scripts CSS sin necesidad de preocuparnos del navegador del usuario.

Ver fichero csshover3.htc / Descargar

Extendiendo los selectores de MooToos y jQuery

15 dic

+ 0

Hace unos días James Padolsey publicó un interesante artículo en el que nos explica como extender las capacidades del selector CSS3 de jQuery. Nos muestra un ejemplo de añadir la posibilidad de encontrar los elementos :inline con el que nos muestra lo fácil que es extender el selector CSS3, núcleo de jQuery.

$.extend($.expr[':'],{
    inline: function(a) {
        return $(a).css('display') === 'inline';
    }
});
// Ejemplo de uso
$(":inline");

Por otro lado, David Walsh ha hecho lo propio con MooTools y nos muestra lo sencillo que es añadir nuevos selectores CSS, pero esta vez a MooTools. Además ha hecho una interesante recopilación de selectores que extenderán perfectamente MooTools.

Selectors.Pseudo.checked = function() {
	return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked);
};

jQuery.multicol(), dale columnas a tu texto

26 nov

+ 10

A la espera de la especificación CSS3 y que los navegadores las implemente perfectamente, si queremos convertir en columnas nuestro contenido tenemos que usar herramientas como jQuery.multicol().

jquerymulticol

Instalación

La instalación es similar a la de cualquier componente desarrollado en Javascript, simplemente hemos de llamar al fichero que lo contiene en nuestro <head />

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/multicol.min.js"></script>

Una vez cargado el contenido, debemos indicar que elemento será el que convertiremos en multicolumnas, para ello usaremos la selección CSS3 de jQuery.

$(document).ready(function(){
	$("selector").multicol({colNum: 3, colMargin: 20});
});

Como podemos ver, tenemos 2 parámetros que podemos pasarle a la función multicol()

  • colNum: Número de columnas en las que debe cortarse el texto.
  • colMargin: Margen en píxeles que separará las columnas.

Descargar

[Descargar]

CSS3 Clock, girando las manillas con CSS3

17 nov

+ 0

Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.

// HTML
<ul id="clock">
   	<li id="sec"></li>
   	<li id="hour"></li>
	<li id="min"></li>
</ul>
// JS
$(document).ready(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css("-webkit-transform", srotate );

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css("-webkit-transform", hrotate );

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css("-webkit-transform", mrotate );

      }, 1000 );

});

Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate(); a los elementos que componen las manillas del reloj.

@font-face en Internet Explorer

4 nov

+ 3

Hace ya tiempo tiempo, vimos que WebKit integraba una implementación de font-face con la que podríamos definir la fuente que debía mostrarse en nuestras página, hace poco Mozilla anunció que Firefox 3.1 iba a integrar esta opción, incluso encontramos alternativas mediante Javascript que servían como alternativa a sIFR3.

Safari + @font-face

2989691982_01f96c6e84

Internet Explorer 7.0 + @font-face

2989691770_441a92d21f

John Tangerine nos muestra un ejemplo de como conseguir esta funcionalidad en Internet Explorer 6+, eso sí, sin usar el sistema estandar de fichero .otf.

<style type="text/css" media="screen">
h1, h2, h3, p, td{
font-family:'Fontin-Regular', georgia, serif;
}

/* TODOS LOS NAVEGADORES MODERNOS*/
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>

/* PARA INTERNET EXPLORER*/
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->

Puedes probar tu mismo el resultado de este código.

Mozilla se sube al carro de las CSS Transform

15 sep

+ 8

Hace casi 1 año que WebKit anunciaba la incorporación de CSS Transform en el corazón de su navegador. Una propiedad que nos permitía realizar modificaciones a nuestros elementos HTML directamente desde el CSS.

-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */

css-transforms

Hoy Ajaxian anuncia que Firefox se suma a los que implementan esta propiedad.

Borrador CSS3: Background y border

13 sep

+ 1

Hace unos días Jose Manuel Pita (administrador de Tripix.net) nos informaba de la nueva propuesta de la W3C para el estándar CSS3 que afectaba a los background y los border de nuestras aplicaciones. Estas nuevas propiedades podrían ser los fondos y bordes de nuestros futuros CSS.