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

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this 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)

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

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

You can probably do that using gradients.
Here are some links to some websites which offer you to customize gradients, and to add as many 'stoppers' as you want.
http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Related

How can I create a web page background that's mainly black with some gradient shaded circles?

I'm sorry to be asking this question but I really do not know how I can do this. I am not familiar with photoshop and don't even know if that would be the best solution to use.
Here's an example of the kind of background I would like to create:
http://sci.ph/
I know how to do all the HTML but would like some advice on if there are any techiques that I could use to create background shaded gradient circles on a page or should I just hire someone to do this with photoshop.
I am looking for a modern IE10 onwards solution if that helps.
you can make circular gradients entirely with css. For gradients I always use colorzilla gradient generator. Here is an example:
jsfiddle demo
html
<div id="bg"></div>
css
html, body {
height: 100%;
margin: 0;
}
#bg{
min-height: 100%;
background: -moz-radial-gradient(center, ellipse cover, #c4d82b 0%, #131313 37%, #131313 68%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c4d82b), color-stop(37%,#131313), color-stop(68%,#131313)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #c4d82b 0%,#131313 37%,#131313 68%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #c4d82b 0%,#131313 37%,#131313 68%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #c4d82b 0%,#131313 37%,#131313 68%); /* IE10+ */
background: radial-gradient(ellipse at center, #c4d82b 0%,#131313 37%,#131313 68%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4d82b', endColorstr='#131313',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
The example you are showing is however very difficult to achieve using css especially if you want a consistent effect across different browsers and devices. An image is probably the best solution.

Button stripe background using css3 background [duplicate]

This question already has answers here:
Diagonal stripes and bars [closed]
(3 answers)
Closed 8 years ago.
Is it possible to have a button with this type of background
I am only referring to weekly activity button.
I want to accomplish it using css only, So that I can customize the gradient, border etc for several other buttons.
The button is having a linear gradient, inner and outer box shadow and stripe on the right side.
I am not asking for actual code. I am just looking for any reference which I can refer to do this.
Till now I have done some basic gradient and background stuff on buttons but this seems to be much advanced.
Regards
EDIT:
I am looking for some advanced reference guide which I can refer, preferable video tutorials so that I can understand the concept.
I am new to UI and mostly work on server side.
I think you're looking for the Ultimate CSS Gradient Generator. After just a minute of playing with it I got this jsfiddle. The gradient code:
background: rgb(90,175,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(90,175,244,1) 0%, rgba(30,87,153,1) 55%, rgba(50,14,81,1) 75%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,175,244,1)), color-stop(55%,rgba(30,87,153,1)), color-stop(75%,rgba(50,14,81,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aaff4', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
... which replicates that gradient decently well.

How to work with gradients in CSS / list of online CSS gradient generators [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I have CSS code for a gradient which is the following:
/*Gradient*/
background: #0345A9; /* Old browsers */
background: -moz-linear-gradient(top, #0345A9 0%, #032E8F 44%, #001A6E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0345A9), color-stop(44%,#032E8F), color-stop(100%,#001A6E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* IE10+ */
background: linear-gradient(top, #0345A9 0%,#032E8F 44%,#001A6E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0345A9', endColorstr='#001A6E',GradientType=0 ); /* IE6-9 */
Which generates a blue color family gradient.
My question is: What if I want get the counterpart of the blue to lets say green or red.
What is the best way to do that? I tried to use color picker but it comes out totally different.
Is there a website that does it for you?
There are various websites out there, that help you with generating CSS gradients via a easy user interfaces and output the resulting CSS code, e.g.:
http://www.colorzilla.com/gradient-editor/ [*] [#]
http://www.css3factory.com/linear-gradients/
http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker [*] (always needs to be background-image: ...]
http://css3gen.com/gradient-generator/
http://www.cssmatic.com/gradient-generator [*]
[*] (import of existing CSS code possible)
[#] (import of existing image with gradient possible)
Regrading the CSS import feature: Usually, you only have to enter one single browser-specific CSS gradient command. Be aware however, that not all websites/generators can handle all browser formats (Mozilla vs. Webkit vs. Opera vs. W3C vs. IE).

How to make the HTML colors of a Bootstrap design edge-to-edge

I have a pretty elementary knowledge of HTML, CSS, and Bootstrap. So please forgive me if any of the terminology is wrong.
This is the page: http://jowoco.com/stackoverflow/scheduletech.html
On large monitors (resolutions > 1500px) or zoomed out screens (ctrl/cmnd + "-"), you'll see the colors just stop. Ideally the angles would continue, but at the very least it would be nice just to have the colors continued to left and right of the screen as solids (see mock).
I've attached a screenshot of what I think might work as a fix (not sure if it's a div or span), but not sure how to do it in actual practice.
Thanks so much in advance for your help and time,
Wojo
There are a few ways to do this...but the easiest by far is to create a linear gradient background for the page, rather than straight white.
This would allow the bar to go from edge to edge even if the main body of the page stops.
Unfortunately, you have not given quite enough information for me to simply hand you the code for it:
What is the angle of the blue stripe?
Does the geometry of your page change when the browser window is resized? Specifically, does that blue banner move at all?
Which browsers do you need to be able to support?
If you have answers to these questions, feel free to drop them here, and I will update this answer.
If you would rather take a crack at the code yourself, you can generate is at Colorzilla. The resulting code will look something like this:
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(45deg, #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */
background: linear-gradient(45deg, #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This code covers all browsers between Firefox, earlier and more recent Chrome, and even down to IE 6-9.
The code, generally, looks far worse than it is... for the bulk of the code, you can directly set the angle at which the blue bar should appear; the exceptions being IE6-9 and earlier versions of Chrome.
Earlier versions of Chrome are probably nearly non-existent, since Chrome generally auto-updates itself... but the earlier Internet Explorer, as always, can be problematic.

Using CSS3 instead of images to achieve desired results

I am trying to use CSS3 instead of images to code the menu in http://www.cssmania.com/ .
My code so far (& the images+styles) can be found here:
http://sarahjanetrading.com/js/j
I tried using CSS3 to achieve the border shadow and the menu li a background to match the one in http://www.cssmania.com. But it just doesnt look the same. When I tried using images, it looked almost perfect. But I want to use CSS3 to achieve the result.
I tried inspecting the code on cssmania.com, but couldnt find the ones for the menu border to make it look the way it is, and the menu li background. I just want the code for these two functions.
Thanks
The main thing I see that stands out different is the background of the links. There's a subtle gradient on the original design, and that's missing from yours. It's also why the borders look different - the gradient is on the color, not the borders, but your eye is tricked.
Add this to the stylesheet:
#header-mania .header {
/* Keep everything *except* the original background */
background: #7fa445;
background: -moz-linear-gradient(top, #7fa445 0%, #6b9632 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa445), color-stop(100%,#6b9632));
background: -webkit-linear-gradient(top, #7fa445 0%,#6b9632 100%);
background: -o-linear-gradient(top, #7fa445 0%,#6b9632 100%);
background: -ms-linear-gradient(top, #7fa445 0%,#6b9632 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fa445', endColorstr='#6b9632',GradientType=0 );
background: linear-gradient(top, #7fa445 0%,#6b9632 100%);
}
That background's color might not be exact (I didn't feel like firing up PS just to match the colors), but you can adjust the colors easily using the Ultimate CSS Gradient Generator
As far as I'm concerned your version of the menu doesn't look too different, in fact if you inspect css mania's stylesheet files they're only using text-shadow declarations on the elements, everything else is achieved with images. Hope you find my comments helpful!