Transparencia con CSS

CSS nos brinda métodos para mejorar la visualización de nuestro contenido, entre ellas esta la aplicación de transparencias.

Veamos como aplicar transparencias:

.alpha {
	opacity: 0.5;
	filter:alpha(opacity=50);
}

Ahora lo aplicaremos para transparencias del 30 y 70 % a una imagen, para eso creamos 2 estilos en el CSS.

.alpha30 {
	opacity: 0.3;
	filter:alpha(opacity=30);
}
 
.alpha70 {
	opacity: 0.7;
	filter:alpha(opacity=70);
}

en el html :

<div><img src="icono.jpg" alt="" /></div>
<div class="alpha70"><img src="icono.jpg" alt="" /></div>
<div class="alpha30"><img src="icono.jpg" alt="" /></div>

El resultado seria este:

transparencia1-css

Sony Vaio P en el bolsillo

Ahora tendremos el ordeanador en el bolsillo :P

Este ordenador se aleja mucho de lo que ofrecen el resto de ultraportátiles, tanto en diseño como en prestaciones. Pero mucho nos tememos que también lo hará en precio, pues no estamos ante un ultraportátil barato como muchos de los otros modelos del mercado.

sony-vaio-xd

Seguir Leyendo..

Color Picker, que gran imaginacion

color_picker

Lo que ves en la imagen tiene como autor a Park Jinsun, y se llama Color Picker. No es un diseño cualquiera, pues ha sido premiado por Reddot en la categoría de Educación. Se trata de un rotulador digital que recoge los colores como lo hace la herramienta cuentagotas de un programa de edición, pero en este caso recogemos la muestra de color de un objeto real, directamente de la naturaleza.

Seguir Leyendo..

Crear Formularios HTML

pform

En este sitio podremos crear formularios online de una manera muy intuitiva ;) y didáctica. Sobre todo es Gratis y es de gran utilidad para hacer las cosas más rápidas :D .

Pform es tan simple que en tan solo 3 pasos ya tenemos nuestro código HTML del formulario ajustado a nuestra necesidad y con la opcion de poder editarla si nos falto algun detalle.

Enlace: Pform

Marco decorativo para imagenes con CSS

Una buena explicación de como decorar nuestras imagenes con CSS :) empleando algunas etiquetas para poner un borde, otra imagen al borde u otra cosa que se nos ocurra.

El código funciona en diferentes navegadores, y nos evitaría un laborioso trabajo editando cada imagen por separado.

borde-imagenes-con-css

Además nos servira de gran ayuda cuando querramos darle una función a cierta parte la imagen. Enjoy =P