Efecto láser con CSS3

por .

Jeff Broderick es un entusiasta diseñador fanático de CSS3. El mismo cuenta que cuando diseñaba su nuevo portfolio se dio cuenta que con apenas unas lineas de CSS podía lograr un impactante efecto estilo láser, utilizando para ello una simple imagen y la propiedad transition de CSS3.

El resultado es simplemente genial, y lo pueden ver funcionando en su blog, para ver como funciona deben pasar el puntero del mouse por sobre la imagen negra que dice StratusApp, aclaro esto porque confieso que me costo algunos minutos encontrarlo 😛

efecto laser con css3

Cómo hacer el efecto láser con CSS3

HTML:

<div class="item">
    <div class="hover">
        <div class="laser"></div>
    </div>
    <img class="background" src="background.png"/>
</div>

CSS:

.item {
    position: relative;
    width: 475px;
    height: 400px;
    margin: 50px auto;
}

.background {
    position: absolute;
    z-index: 1;
    width: 475px;
    height: 400px;
    display: block;
}

.hover {
    height:0%;
    background: url(hover.png) no-repeat;
    position: absolute;
    z-index: 2;
    -webkit-transition: height 1s ease;
    width: 100%;
    -webkit-background-size: 475px 400px;
}

.item:hover .hover {
    height: 100%;
}

.laser {
    height: 3px;
    width: 100%;
    background: red;
    display: block;
    position: absolute;
    bottom: -2px;
    -webkit-border-radius: 50%;
    box-shadow: 0 0 20px 10px red;
    -webkit-transition: opacity .25s ease;
    opacity: 0;
    -webkit-transition-delay: .75s;
}

.item:hover .laser {
    opacity: 1;
    -webkit-transition-delay: 0s;
}

La imagen la pueden hacer ustedes mismos o bien descargar desde el sitio de Jeff. El efecto francamente me gusta mucho y recrearlo es de lo más sencillo. Más no se puede pedir 😀

Web: CSS Laser ~ Via Webappers

Categorizado en: