How to make classroom greenboard effect using CSS3? [closed]

Question

I want to achieve classroom greenboard effect(just the green colour with chalky powder effect) using css like in the image shown below

I have found the font which is close to the writing but for the greenboard I tried picking the colour and applied as a background to the div,but it all looks plain and uniform,which is unrealistic.

Can I achieve that whitish-green effect using CSS?I don't want to use image for that.

(I believe its possible because once I saw a person made a full Coke Can using pure CSS)

Answer 1

you can use css3 gradient...use the code below..

.greenboard {background: #63856a; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #63856a 1%, #3c5a40 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#63856a), color-stop(100%,#3c5a40)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #63856a 1%,#3c5a40 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #63856a 1%,#3c5a40 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #63856a 1%,#3c5a40 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #63856a 1%,#3c5a40 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63856a', endColorstr='#3c5a40',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

it's not perfect like image because the image contain some texture effects...

Answer 2

You can come pretty close by combining an rgba semi-transparent white color for the text color, and then using text-shadow with a half-opaque white to make a 'glow' that transparently emulates the granularity of the chalk.

Working sample here.

Adding some clever use of transforms and perspective you can also emulate the effect that people rarely write in a consistent size and direction on a whiteboard, and text usually converges from left to right.

Funkier sample here. Or make it a tad more transparent. Play with it :)