Los atributos min, max y step se utilizan para especificar restricciones en la entrada de datos en un formularo. El atributo max especifica el valor máximo permitido para el campo de entrada. El atributo min especifica el valor mínimo permitido para el campo de entrada. El atributo step especifica los intervalos válidos para el campo de entrada (si step="3", los números válidos 3,6,9,12, etc.).

El siguiente ejemplo admite valores pares comprendidos entre 2 y 12.

<input type="number" min="2" max="12" step="2"  />

Estos atributos se pueden utilizar en los input de tipo: number, date pickers, number y range.

Ver ejemplo en funcionamiento » »

RGBA es una de las múltiples maneras en que puede declarar un color en CSS. Lo que la hace especial es que también permite establecer la transparencia del color al mismo tiempo. La sintaxis para la notación de color RGBA es:

propiedad: rgba (< valor color rojo >, < valor color verde>, < valor color azul >, < valor de opacidad >);

Los valores de color serán de 0 a 255 y los valores de opacidad de 0.0 a 1.0. Todos los navegadores modernos admiten RGBA, incluyendo IE9. Para las versiones anteriores de Internet Explorer podemos utilizar un fallback, añadiendo el color de fondo en formato hexadecimal.

#sidebar {
        background-color: #ff0000; /* fallback color en hexadecimal */
        background-color: rgba(255, 0, 0, 0.3);
}

Interesante recurso para desarrolladores y maquetadores web. Simpliste es una plantilla HTML5 responsive. Esta plantilla hace que tu sitio responda a la resolución del navegador del cliente: el diseño por columnas se convierte en una columna para los visitantes desde tablets; los elementos de navegación se convierten en elementos de navegación más grandes para los usuarios con smartphones, etc.

Simpliste » »

El atributo pattern nos permite especificar un patrón -expresión regular- que se usará en la validación del campo de texto. Vamos a ver unos cuantos ejemplos de uso con sus respectivas expresiones regulares:

 <form>
 <fieldset>
 <p><label>Caracteres alfanuméricos:</label><input type="text" pattern="[a-zA-Z0-9]+" /></p>
 <p><label>Letras:</label><input type="text" pattern="[a-zA-Z]+" /></p>
 <p><label>Números:</label><input type="text" pattern="[0-9]+" /></p>
 <p><label>Fecha (dd/mm/YYYYYY):</label><input type="text" pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" /></p>
 <p><label>Email:</label><input type="text" pattern="[a-zA-Z0-9.+_-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+" /></p>
 <input type="submit" value="Aceptar" />
 </fieldset>
 </form>

Ver ejemplo en funcionamiento » »

Para personalizar el error que nos ofrece el navegador podemos utilizar el atributo "title". Por ejemplo:

<input type="text" pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" title="La fecha ha de tener el siguiente formato: dd/mm/YYYYYY" />

Ver ejemplo en funcionamiento » »

Nota: Tanto este ejemplo como otros relacionados con HTML5 y CSS3 han de visualizarse en navegadores que ya soporten estas tecnologías.

Esta técnica, gracias a HTML5 y jQuery, nos permite crear un efecto de "hover" sobre imágenes, mostrándolas en escala de grises. Para lograr este efecto antes de HTML5, se necesitaban dos imágenes: una en color y otra versión en escala de grises. Ahora HTML5 lo permite de un modo más sencillo y rápido porque se genera la imagen en escala de grises a partir de la imagen original. Para terminar de comprender el efecto, lo mejor es ver el resultado final:

Ver ejemplo en funcionamiento » »

El siguiente código actuaría en todas las imágenes contenidas dentro de un elemento cuya clase sea "item".

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">
	$(window).load(function(){
		$(".item img").fadeIn(500);

		$('.item img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"1"}).insertBefore(el)

.queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		$('.item img').mouseover(function(){
			$(this).stop().animate({opacity:0}, 500);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 500);
			
		});		
	});
	
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }
</script>

El código es una variación del visto en web designer wall. En este ejemplo la imagen pasa a escala de grises en el efecto "hover" y no al revés como ocurre en el ejemplo de web designer wall.

Visto en web designer wall » »