AyudaBloggers{...}
Efecto de desenfoque con CSS
En esta oportunidad veremos algunos usos de las propiedades de sombras en CSS para poder así crear llamativos efectos de desenfoque para el blog. Primeramente cabe destacar que el tutorial debería aplicarse bajo cualquier navegador que soporte las propiedades "text-shadow" y "box-shadow", ya que con dichos atributos simularemos el efecto "blur".


Advierto que en el tutorial hablaremos del efecto y haremos algunos ejemplos prácticos, pero considerando siempre que son ejemplos, necesitarás saber algo de CSS y aplicar tu imaginación y darle un buen uso.

Puedes observar los siguientes ejemplos para ver cómo se verá el resultado:

Ejemplo 1 (Un contenedor sobre otro - Efecto de desenfoque de distancia):

Soy un mensaje informativo el cual se sobrepone delante de un contenedor borroso.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


El código XHTML:
<div class="gaus">
<div class="interno">
Soy un mensaje informativo el cual se sobrepone delante de un contenedor borroso.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>

El código CSS:

.gaus {
color:transparent;
text-shadow:0 0 9px black;
margin:0 auto;
background:#BFCFCC;
width:580px;
position:relative;
height:200px;
padding:10px;
}

.interno {
left:25%;
width:50%;
height:30%;
bottom:25%;
text-align:center;
padding:20px 10px;
position:absolute;
background:#FFCC00;
color:#222;
text-shadow:none;
border:1px solid #fff;
box-shadow:0 0 3px #222;
cursor:move;
}

Para mover el contenedor sobrepuesto:

<script type="text/javascript">
$(function() {
$( ".interno" ).draggable({ containment: 'parent' });
});
</script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript">
</script>

Ejemplo 2 (Tarjetas - Desenfoque y usos de transiciones):

Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.



El código XHTML:
 <div id="tarjetas">
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div class="tarjeta"><p>Título</p>
Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.</div>
<div style="clear: both;">
</div>
</div>



El código CSS:
#tarjetas {
width:550px;
margin: 0 auto;
background:#f7f7f7;
border:1px solid #FFF;
box-shadow:0 0 1px #CCC;
padding:0 10px 10px 10px;
}

.tarjeta {
float:left;
width:100px;
padding:10px;
background:#FCFCFC;
line-height:10px;
font-size:9px;
color:transparent;
text-shadow:0 0 3px black;
box-shadow: 0 0 7px #ccc;
border-radius:1px;
margin-left:10px;
margin-top:10px;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}

.tarjeta:hover {
box-shadow:2px 2px 1px #ccc;
-webkit-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
-moz-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
-o-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
color:#222;
text-shadow:0 0 1px white;
background-image: linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -o-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.17, rgb(245,245,245)),
    color-stop(0.59, rgb(255,255,255))
);
}

.tarjeta p {
font-size:13px;
}
Ejemplo 3: Distintos niveles de desenfoque:

Soy una línea de texto imperceptible.

Soy una línea de texto borrosa.

Título grande sin desenfoque.

Soy un fragmento de texto que se puede ver claramente debajo del título.


El código XHTML:
<div class="niveles-desenfoque">
<div class="sketch">
<p class="mas-borroso">Soy una línea de texto imperceptible.</p>
<p class="borroso">Soy una línea de texto borrosa.</p>
<p class="claro1">Título grande sin desenfoque.</p>
<p class="claro2">Soy un fragmento de texto que se puede ver claramente debajo del título.</p>
</div>
</div>
El código CSS:
.niveles-desenfoque {
background:#dedede;
width:600px;
margin:0 auto;
height:350px;
color: #555;
text-shadow:none;
}
.sketch {
-webkit-transform: skewY(-13deg);
-moz-transform: skewY(-13deg);
-ms-transform: skewY(-13deg);
-o-transform: skewY(-13deg);
transform: skewY(-13deg);
padding:20px;
}
.mas-borroso {
text-shadow:0 0 8px #222;
color:transparent;
font-size:20px;
}
.borroso {
text-shadow:0 0 2px #222;
color:transparent;
font-size:28px;
}
.claro1 {
font-size:36px;
color:#000;
}
.claro2 {
font-size:18px;
}
El tutorial: 

Para obtener este efecto de desenfoque, utilizaremos el atributo "color:transparent" para suprimir el color del texto:
.ejemplo {
color:transparent;
}
Y para poder asignar un nivel de desenfoque utilizaremos el atributo "text-shadow" de la siguiente forma:
.ejemplo {
color:transparent;
text-shadow:0 0 10px #555;
}
En donde el valor 10px corresponde al nivel de blur, mientras que el número #555 define el color que tendrá la sombra.

Y para utilizarlo, bastaría con añadir algún elemento con la clase que utilizamos anteriormente:
<span class="ejemplo">Soy un texto con desenfoque</span>
Eso es todo, para poder jugar con los colores bastaría con definir algún color a la sombra y jugar con el atributo background en el contenedor padre.
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers