How did they create this MATTE effect . . .?

HTML & CSS
1

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

See HERE

2

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');
}
3

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

4

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
5

[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:

6

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.

7

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

8

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.

9

[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.

10

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.

11

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
12

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