CCS3 introduce varias funciones para la propiedad filter con el propósito de afectar no solo a la imágenes sino también cualquier elemento en el documento.
Los filtros se encuentran solo disponibles en Google Chrome. La implementación es aún experimental, por lo que debemos utilizar el prefijo -webkit- para aplicar la propiedad filter.
Las nuevas funciones disponibles para esta propiedad son:
blur(valor). Esta función produce un efecto de difuminado. El atributo debe ser un valor en píxeles entre 1px y 10px.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: blur(5px);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
grayscale(valor). Convierte los colores del elemento a una escala de grises. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: grayscale(0.7);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
drop-shadow(x, y, size, color). Produce una sombra simple para el elemento. Los atritutos x e y determina la distancia de la sombra y el elemento, size especifica el tamaño de la sobra y color declara su color.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: drop-shadow(15px 15px 20px #000000);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
sepia(valor). Otorga un tono sepia al color del elemento. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: sepia(0.7);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
brightness(valor). Modifica el brillo del elemento. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: brightness(0.5);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
contrast(valor). Modifica el contraste del elemento. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: contrast(0.5);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
hue-rotate(valor). Produce una rotación en la tonalidad del elemento. El atributo debe ser un valor en grados entre 1deg y 360deg.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: hue-rotate(180deg);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
invert(valor). Invierte los colores del elemento, produciendo un negativo. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: invert(0.7);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
saturate(valor). Satura los colores del elemento. El atributo debe ser un número decimal entre 0.1 y 1.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: saturate(5);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
opacity(valor). Produce un efecto de opacidad. El atributo debe ser un número decimal entre 0 y 1 (0 totalmente transparente y 1 totalmente opaco).
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 600px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: #54A831 url(../fondo11.jpg) no-repeat center;
-webkit-filter: opacity(0.5);
}
#titulo{
font: bold 36px verdana, sans-serif;
}
