How do I make a nav bar with a gradient background? - html

I am trying to make the background a linear gradient. I have tried
nav {
background: -webkit-linear-gradient(black, gray, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(black, gray, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(black, gray, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(black, gray, black); /* Standard syntax */
}
but it looks very choppy... Does anyone know any fixes to that off the top of their head? No need to go out of the way to look it up, though!

With the help of KyleT, I was able to use colorzilla.com in order to get code for a premade gradient, which is the website I recommend for anyone with the same question! Also, I used jsfiddle.com to test the gradient, and now I know about the basics of stackoverflow.com!

Related

how to do a transparency gradient on an element in css?

Is there any possible way or workaround that I can fade an element from 100% to 0% opacity top to bottom? Similar to a linear gradient background, but transparency on the element itself (not the background color).
The idea is that on the hover state, it would brighten up, and when clicked, move up to the spot of the active popup
There are alot of online css generators why don't you use that.
Here is a help link for you, go there and generate your desired Gradient.
http://www.colorzilla.com/gradient-editor/
ok, I see two different types of transparency, the first one is a alpha css just like that:
div {
opacity: 0.5;
filter: alpha(opacity=50);
}
this style made transparent the entired div (Custom sharing dialogue) and the other css that creates a linear gradient style on the button of the page:
#bottom_fade { z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
/*in your case use a grey image with transparency*/
}
or you can use a div that covers all the button of your pages and add a linear-gradient:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}
hopefully this snippets helps you, regards.

Gradient CSS with Background IMG [duplicate]

This question already has answers here:
Use css gradient over background image
(4 answers)
Closed 7 years ago.
so im trying to figure out how to get IMG have a gradient layer on top of it, and it is not showing up correctly!
It either shows gradient or shows image, but not both at the same time.
CSS im using
#grad1 {
height: 200px;
background: url(images/back3.gif), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: url(images/back3.gif), -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: url(images/back3.gif), -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: url(images/back3.gif), linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
html code im using
<div id="grad1"></div>
Can anyone help, im lost with this!
You need to put image url after the gradient, like so
#grad1 {
height: 200px;
background: rgba(255,0,0,1)), url(images/back3.gif); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url(http://lorempixel.com/600/800/sports/Dummy-Text/); /* Standard syntax (must be last) */
See in JSFiddle
You are going to want to do this:
How do I combine a background-image and CSS3 gradient on the same element?
Use background-image instead.

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.

Why is the button not showing any fade-in-out effect?

I am trying to code a button where, on hovering, will produce an ease-in-out effect. I used the following code:
#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}
#quotebutton:hover {
/* fallback image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #333, #000);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #333, #000);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #333, #000);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
text-decoration:none;
color:#fff;
}
The HTML is as below:
<div id="quotebutton">
Download Now
</div>
But the button is not showing the effect on hovering. What might be the problem?
Unfortunately, the short answer is that you can't animate background gradients with CSS3 transitions. There are a few ways that you can accomplish the same goal using alternative techniques:
Use jQuery to animate a transition between two different background images on hover. You can accomplish this most easily by stacking three elements on top of each other using absolute positioning, where the bottom two are the background images and the top contains the content, which in this case is your button text. On hover, fade out the top background image to reveal the bottom one smoothly. See this tutorial for making a background animation on hover with jQuery.
Use a semitransparent gradient background in conjunction with a webkit transition to create a partial animation. CSS3 transitions can easily animate the background-color CSS attribute, which is only visible through nonexistent or transparent background images or gradients. See this example for an idea of how you might implement this.
Of the two options, (1) is more flexible but more work and requires a companion script, while (2) is less flexible and less cross-browser compatible.
Like Ryan mentioned, you cannot animate background gradients.
Although, there are jQuery plugins that help you accomplish that.
Try jQuery Blend
Another idea I have, is to apply a linear transparent gradient image on top of a solid color.
You can then animate the solid color with transition. The transparent gradient image on the top will make it look like a gradient animation.
Hope it helps.
Cheers.

How to "CSS3 Gradient in Windows Phone 7"?

I'm working in WP7 where my application is based in HTML5 and I'm exporting the app through PhoneGap framework.
I want to know if is possible and how to generate a CSS3 gradient for this project (and in the process, I want to share you what I've discovered).
At the moment this is my CSS3 code:
body {
background: brown;
background-image: url(blue_to_white.jpg);
background: linear-gradient(blue, red); /*future CSS3 browsers*/
background: -webkit-linear-gradient(blue, orange); /*new webkit*/
background-image: -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
-pie-background: linear-gradient(blue, silver); /*PIE*/
behavior: url(PIE.htc);
}
As you can see, my code is using different techniques for the background:
A brown like color base
An image like gradient of blue to white
A normal CSS3 gradient of blue to red
A CSS3 gradient for webkit browsers of blue to orange
A CSS3 gradient for Microsoft browsers of blue to green
A DXImageTransform for IE6 & IE7 of blue to purple
A DXImageTransform for IE8 of blue to yellow
A pie-background using CSS3PIE of blue to silver
And this is my results:
As you may know, the browser for WinPhone 7.5 is IE9 Mobile, and the browser for WinPhone 7.0 is a mix between IE7 & IE8. Here into slide 16, 17 and 18 explains which CCS3 properties are implemented in IE9, IE10 and "IE9 Mobile": http://goo.gl/1Wz3s
So, Any idea of how to generate a CSS3 gradient in Windows Phone?
or I have no choice and I must implement an image to create this gradient?
Just wanted to show the correct syntax for CSS3 Gradients in IE10+
background: -ms-linear-gradient(
bottom,
#432100 30%,
#00AAAA 70%);
In the google code link posted by JC Del Valle, he is using a backgroung-image definition, which is not correct.
[stack overflow prevented me from inserting image]
In the screen capure at twitter link (#palermo4), I tested your styles as-is. It appears to be working. Something else is in conflict with your CSS3 stuff.