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
Related
So my page is working absolutely fine on FireFox and Google Chrome: http://www.cis130.net/bluehdoj/aboutresponsive
However, the styles I apply to my main tag simply aren't happening in IE11. I tried adding -ms- for the linear gradient but it didn't seem to change anything. If anyone could help me figure this out, I would be very appreciative.
Here's the code:
main {
margin: 0 auto;
padding-top: 5em;
max-width: 1000px;
background-image: linear-gradient(to right, #6E6E6E 50%, #F90 50%);
background-image: -ms-linear-gradient(to right, #6E6E6E 50%, #F90 50%);
min-height: 100%;
overflow: auto;
zoom: 1;
}
and the html:
<main>
<div class="leftCol">
<h2>Color Scheme Changer</h2>
<div class="button" id="changeScheme"></div>
<p>Whatever you do, don't click this button. It's seriously wicked evil. Like the Dirty Bubble, Man-Ray, and Barnacle Boy AKA Every Villian is Lemons evil.</p>
</div><!--Ends left column-->
<div class="rightCol">
<h2>Mirror Mode Button</h2>
<div class="button" id="mirrorMode"></div>
<p>This button, however, is pure good. It once saved a bunch of puppies from a burning building. I would highly suggest pressing it.</p>
</div><!--Ends right column-->
</main>
P.S. this is just a little assignment I've been working on for my into to web dev class and is fine to submit as is but I am a perfectionist plus I would like to know how to avoid the problem in the future.
It s Not supported in IE SOURCE
try HTML5 shiv
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Here is a sample of a fully browser compatible gradient. You can modify this as an example to create your gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
I would also like to add that you should not use background-image but rather just background.
If you want the gradient then using stops at 50% 50% wont work ! because the color stop 1 stops at 50% and stop 2 starts at 50% right in the middle so you see two boxes of orange and grey, however changing it to 0% and 100% will give you exactly balanced gradient.Check the image here.
To visually verify it please check this link from Microsoft itself, where you can generate gradient http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html or check the code below:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Opera */
background-image: -o-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(, #6E6E6E), color-stop(1, #FF9900));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #6E6E6E 0%, #FF9900 100%);
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.
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.
I have a classic background image gradient, fading out to a given background colour, see http://fiddle.jshell.net/7msZ5/ for the code.
The problem is that, when viewed on Mobile Safari (version 5 on iPhone 4), the image doesn't successfully blend into the background colour, there's a visible line at the bottom where the image runs out and the background image should take over, view http://fiddle.jshell.net/7msZ5/show/ to see the effect.
I would suggest extending the gradient image so that it will get to the gray earlier (so the gray is your exact desired shade instead of something that is 1 shade off), or using
-webkit-gradient (some older browsers may not support it....)
example:
background: url(http://i.imgur.com/ajzo0.jpg) rgb(145,127,103); /* Old browsers (in case they don't support webkit, use the original image. */
background: -moz-linear-gradient(top, rgba(145,127,103,1) 0%, rgba(236,235,233,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,127,103,1)), color-stop(100%,rgba(236,235,233,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#917f67', endColorstr='#ecebe9',GradientType=0 ); /* IE6-9 */
yes, it is a lot more code, but it does get the work done.
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 */