Convert to CSS3 Gradient - html

I am new to using CSS3 (specially gradients). How do I convert the following HTML/CSS coded border to one with CSS3-based gradient (i.e. using no image)
I want to convert FROM
Normal CSS border/background color
TO
Box with Gradient
Width/Heights are approx in the img above...I need to know how to get the gradient as per the 2nd fig ?

This link should help you. You will find the syntax for gradients there.
It's this one for all the major browsers:
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
…while #444444 is the color at top of the gradient and #999999 the gradient-color at the bottom.
The different "vendor-prefixes" ensure that the gradient works in different browsers as the 'default'-syntax is not supported by every browser by now.
The filter-property will make the gradient work in Internet Explorer 8 and below. But this has some drawbacks (performance aso…). Just use it if really necessary.
Edit: The syntax for linear-gradient changed. The spec'd syntax:
background-image: linear-gradient(to bottom, #444444, #999999);
I've changed this above too, so everyone can just copy this.

Without seeing the colors you are working with, you want to do something like this
.class{
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
}
Here's a tool that might help:
http://gradients.glrzad.com/

The Best place to look is below:
CSS3 Gradients

CSS gradients are cool stuff. But you have one problem. When you are used background gradients in ie9. You can not used border radius are other CSS3. The background filter propertiy for ie is suck. I have a better solution for this. That fix the problem in ie9.
With this tool you create a gradient: http://www.colorzilla.com/gradient-editor/
And with this tool you create a SVG for ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Now we have this code:
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */

Related

CSS Control gradient stops

I currently have this
<div id="grad1"></div>
with the css
#grad1 {
height: 300px;
background: linear-gradient(0deg, grey, white);
}
http://jsfiddle.net/9g2zrqse/
im trying to make it just so there is more white then there is grey
You add stops in modern CSS by using % and the color for that stop (I've also included older versions, e.g. webkit-gradient which used the non-standard "color-stop"):
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* W3C */
You will also notice I used rgba colors instead of "grey" or "white". Using the preset names for colors is a bad idea. It's vague and could be different in every browser.
Have a look HERE (at the Using Multiple Color Stops section)
You could add another grey to your code

Recreating a mac-like drop down: what type of gradient to use for "glint" appearance?

This is primarily a visual design question.
I'm trying to create a drop-down option menu similar to the mac menu in css, something like these:
You can see a simplified version of what I currently have accomplished here on JSfiddle.
I've made the main drop down transparent and removed the arrow (to be re-added in #rightTab with css triangles):
background: transparent;
background-image: none;
-webkit-appearance: none;
and now I'm trying to create a gradient that looks similar to the "glint" on the mac drop-downs. I'm using this gradient generator. However, my initial assumption that this effect could be created with a fade-in/fade-out of an off-white silver was wrong. It looks very flat and dull.
So any ideas on how to create an effect similar to the macs?
This is what I just came up with, but when I went to copy, I noticed they have an "Upload Image" option. Try to upload an image of the gradient that you wish to copy.
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e9e9e9 49%, #e0e0e0 51%, #ededed 52%, #f0f0f0 95%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#e9e9e9), color-stop(51%,#e0e0e0), color-stop(52%,#ededed), color-stop(95%,#f0f0f0), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
I would offer more assistance, but it's time for me to clock out and go home!
I also only concentrated on the gradient, you will still have some border and box-shadow work to do.
It takes a lot of work to get it to look right.

How to generate CSS3 gradient background

I'm working on a website from a PSD. In a section, I've seen that there are a mixed background color. I think It'll be a best way to match the color if I can use CSS3 gradient. But, I can't use CSS3 gradient. So, I took a help of "online CSS3 gradient background generator from image". Look, I want code for this background image:
But, from the online generator I've got this:
Look, the two images aren't same. There are a huge white color on the 1st image at the almost left to right which is absent in the 2nd image. Take a look please, the first image again:
I've used this online generator by uploading image and copy-paste the CSS code which it provided:
You can check the result at this link test link too: http://abidhasan.zxq.net/test/
So, how can I get the perfect CSS3 and cross-browser compatible code for the first image of this question?
The actual section of the PSD is:
Isn't the CSS3 gradient best and shortest way to make the background of that section?
I used ColorZilla's Gradient Editor and the ColorZilla Chrome extension in order to find the upper and lower bounds of the gradients you posted. Then I used the CSS rule sets generated by the gradient editor to make two div elements. I nested one inside of the other, and gave the inner div opacity: .5.
HTML:
<div class="gradient" style="width: 400px; height: 100px;">
<div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div>
</div>
CSS:
.topGradient {
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient {
background: rgb(224,224,224); /* Old browsers */
background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
The end result was this:
Here's a JSFiddle.

Fade JPG image to transparency using CSS3

I have a solid image, a .JPG, with no transparency (seeing as .JPG's cannot have an alpha layer). However, since the client would not have the ability to create an image that fades one image edge to transparency, they want to input a solid .JPG and have it fade via code. It should be noted that I've got this image set to be the background right now, it's not the src of a <img> tag. Is this possible in CSS3 and if so, how would it be accomplished?
Example image:
Desired result:
I believe you can do something with the CSS3 mask-image attribute along with CSS3 linear-gradient background:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))
Here is a sample that I created to you. Since it's a new CSS3 thing compatible browsers are Chrome and Safari at this moment (Webkit browsers).
You can get true transparency via CSS masking:
http://www.webkit.org/blog/181/css-masks/
Support for it is still quite limited, though. However, in Webkit browsers, you can use something like:
.masked {
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<div class="masked">Your content here</div>
This will work with all the content in any div (including the background), but this won't work in most browsers.
You could use a slice-and-animate approach similar to Nivo Slider, but that is an awful lot of work for what may not end up being a useful effect.
img,.over{
width:100px;
height:100px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
position:absolute;
}​
<div >
<img src="http://ts1.mm.bing.net/th?id=I.4763892546143716&pid=1.1" alt="test"/>
<div class="over"></div>
</div>
DEMO

-moz-linear-gradient not working on IE

I'm using gradient as a background:
-moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
This is not showing in IE, I haven't found links or anything about what I need to do if the browser is IE.
Any ideas on how to handle this?
You might be interested in reading this: prefix or posthack.
As the comments state -moz- is the vendor specific prefix for Mozilla.
If you're interested in cross browser gradients, I find the easiest way is to use a gradient generator to sort through all the different implementations and prefixes.
this is the gradient code for all browsers
/* IE10 */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
you can use this site to generate gradient ultimate css generator
it's not supported in IE9 so you can make a little section of the gradient and repeat it
Linear gradient drawing via CSS3 is still experimental. The CSS function you provided is Mozilla specific, as indicated by the -moz prefix. But not all is lost, as Microsoft has their own implementation as well (-ms-linear-gradient)
Upon cursory glance, it appears you can simply copy that line and simply change -moz to -ms with near perfect compatibility. Refer to the documentation if you run into any issues.
Use the gradient filter for IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* for IE */