How did they create this MATTE effect . . .?

###Just trying to figure out how this site accomplished this incredibly cool matte effect . . .###

See HERE

HTML:

<div id="scanlines" class="overlay-dotted"></div>

CSS:

#scanlines {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.overlay-dotted {
    background: url('black/grid.png');
}

Hey Ralph, there’s no way to do this without an IMG?

These days you can do all sorts of things with CSS3 gradients etc.

So that’s one option.

Here are some other nice CSS3 background patterns: http://lea.verou.me/css3patterns/

1 Like

[quote=“ralphm, post:4, topic:229533, full:true”]
These days you can do all sorts of things with CSS3 gradients etc. So that’s one option.[/quote]
It looks to me like a lot of code that eventualy . . . uses IMGs. :eyes:

No, it’s a bit confusing that CSS3 uses the background-image property even for gradients, but no images were harmed in the making of those demos.

Ha ha. That verou.me site rocks Ralph. Bookmarked. :pushpin: I’ll try out your first one but I feel somehow . . . unclean lol.

Gradients are pretty messy. The image is so small, I’d even be inclined to use that—perhaps the base64 version—over the gradient code.

[quote=“ralphm, post:8, topic:229533, full:true”]
Gradients are pretty messy. The image is so small, I’d even be inclined to use that—perhaps the base64 version—over the gradient code.[/quote]
Gradients? Base64? Meanwhile . . .

I couldn’t for the life of me get your <DIV id= string to work. I presumed you wanted me to close the tag at whatever point my body tag closes. ha ha. Then I got to looking at it. He couldn’t mean open it and immediately close it surely? He could. He did. Works a treat but is a wee bit too dark.

Ralph. The matte blocks my links! (it blocks everything of course, which is what I wanted to learn) but not only can’t you can’t click anywhere, you can’t select anything.

None of those are my links—just things I found online. Sounds like you’ve placed some container over everything else. A link is worth a thousand words, of course. :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.