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 {Ejemplo 3: Distintos niveles de desenfoque:
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;
}
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">El código CSS:
<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>
.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 {Y para poder asignar un nivel de desenfoque utilizaremos el atributo "text-shadow" de la siguiente forma:
color:transparent;
}
.ejemplo {En donde el valor 10px corresponde al nivel de blur, mientras que el número #555 define el color que tendrá la sombra.
color:transparent;
text-shadow:0 0 10px #555;
}
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.
No hay comentarios:
Publicar un comentario