How to simulate TV/monitor looks using modern browsers

Question

How they achieved this effect? http://youxithemes.com/live_previews/hydrogen/light/index.html

The slider background use this style:

element.style {
background-image: url(http://youxithemes.com/live_previews/hydrogen/light/demo/img/splash-bg.jpg);
background-position: 50% 0px;
}

But i have no idea how they apply that monitor look effect on the background. Is css or js? please point me in the right direction, a code example will be also appreciated!

Answer 1

I made something like this for a client before. You can see it live at <br> LIVE DEMO . <br>

I extracted the code from my files. I assume you will be able to work with this if you apply yourself

DEMO

Answer 2

If you really wanted to use js for this, here is a pute javascript solution:

HTML

<div id="test"></div>

CSS

#test {
    border:1px solid #000000;
    display:block;
    width:500px;
    height:300px;
    line-height:4px;
    font-size:10px
}

JavaScript

for (var i=0; i<6000; i++) {
    document.getElementById("test").innerHTML  = document.getElementById("test").innerHTML+". ";  
}

Fiddle here

Answer 3

It is contained in the background-image line of .site-splash .overlay as a base64 encoded png.

.site-splash .overlay {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMV…AAAnRSTlMAmf9A5tgAAAARSURBVAjXY1i1agEDEFCLBgA1MROJWXE8mAAAAABJRU5ErkJggg==);
}

Answer 4

It looks like the Vegas full screen image plugin. — http://vegas.jaysalvat.com/demo/

I think you can choose different overlay types, including the one you linked up.