Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Like we have a way to set opacity in CSS, how do you set Fill? Like in Photoshop?
My problem is, a client of mine has asked me to code his PSD for him, he has set opacity to 100% and fill to 0% which make it almost transparent! And I have no idea how to do that in HTML/CSS.
#Hassan,
Is this you are looking for?
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
<div id="grad1"></div>
let me know if you are looking for this kind example. check the Demo link
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I've been searching about the name of this image effect but can't find an answer since I don't really know what to put on the search engine. So I decided to visit here to post a question to you guys hoping that I get an answer. Here is the image effect
That effect is called a gradient, someone overlaid a semi-transparent gradient on top of an image.
You can do that with HTML/CSS.
Gradients in CSS
You'll need to check this out to get the gradients to be transparent though
The HTML would look something like this:
<div id="container>
<img src="path/to/img.jpg">
<div id="gradient"/>
</div>
And an example of what your CSS might look like could be:
#container {
position: relative;
}
#container img {
width: 100%;
}
#gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* note: this CSS has gradients but to make them transparent check out the link I sent above */
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 */
}
You can also do it simply in photoshop, by using your image as a background layer, and putting another layer on top, then making a gradient on top of the image and setting the opacity to be 70% or so. Hope this helps!
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.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
#woodwhite{position:absolute;left:1000px;width:345px;height:1400;top:0px;z-index:10;
background:-webkit-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:-o-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:-moz-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));"}
These gradient codes which I got from w3 aren't working for all the browsers.
Any help would be appreciated. :)
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
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).
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