Using CSS3 instead of images to achieve desired results - html

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!

Related

Low resolution drop-shadow [duplicate]

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread

Linear gradient not appearing in firefox even though correct prefix is used

Recently I have been coding a clicker game, and have found the need to use a meter to display progress. I wanted the meter to have a gradient that goes from light pink to cyan, and it works perfectly on chrome. However, when I used my home computer and booted up firefox; the gradient was no longer displayed; and the meter was a dull shade of green.
.pastrymeter::-webkit-meter-optimum-value {
background : linear-gradient(90deg, lightpink, cyan);
}
This is the styling for the meter; and nothing that I have changed fixes it. I tried adding the moz prefix to the background tag; which did nothing. I also tried changing background to background-image to see if it was an element thing; but that also did nothing.
What can I do to fix this?
Looks like you are targeting a non-standard feauture -webkit-meter-optimum-value, that isn't supported in Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value
Try this, it is cross-browser compatible.
background: -moz-linear-gradient(90deg, lightpink, cyan);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
Change the values as you may require
Can you try this second method ?
<div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
width: 200px; height: 100px; text-align: center;">
</div>

how do i make my website background a gradient colour?

I am currently trying to create a website.
I have created the logo for the website but I'm not sure how to make my header and footer background a gradient color on Dreamweaver CS6.
I can only put it as a solid color and I am not sure if I need to use CSS or HTML to change it.
Does anyone know if it is possible, and if it is how to do it?
thanks :)
There is a online tool from which you can generate css gradient -
http://www.colorzilla.com/gradient-editor/
On left side of screen you have options to choose colors and on right you have code which you need to copy in your css.
Try www.css3generator.com and then select gradient and select color and equivalent code will be generated ..copy the code and use in your CSS.
This site is very helpful.
Use CSS3:
body {
background-image: -webkit-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: -moz-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: -o-linear-gradient(top left, white 0%, #9FBFD2 100%);
background-image: linear-gradient(top left, white 0%, #9FBFD2 100%);
}

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

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

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.