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
On the website below there is a full background image, and on top of that image there is that grid/net that darkens that image, what is that, where do i find it, how do i create it? (ive searched the source code, couldn't find it, help me out)
http://www.art3d.ru/
Maybe a simple gradient overlay ?
html {
min-height:100%;
background:
linear-gradient(to left,transparent 50%, rgba(0,0,0,0.3) 50%),
linear-gradient(to bottom,transparent 50%, rgba(0,0,0,0.3)50%),url(http://lorempixel.com/640/480);
background-size:2px 4px, 4px 2px, cover;
}
html:hover {/* demo purpose */
background-size: 0% 0%,0% 0%, cover;
}
With the opacity attribute you can darken an image. You can implement it like this:
body {
background-image: url('path');
}
div {
opacity: 0.2;
}
I have set a body background image, and when you give the div opactiy, it should darken the image. It can be very useful sometimes.
I hope I answered your question.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Can't get rid of this line anyway , here's the domain , please switch to browser mobile mode to open it . http://www.pocketsaver.co/index.php?route=mobile/home
You have a rogue h4 element floating over the top of your content.
.hotlists h4:before {
background-image: linear-gradient(to right, #ffffff 16%, #ababab 53%, #ffffff 83%);
content: "";
height: 1px;
position: absolute;
right: 0;
top: 50%;
width: 100%;
}
I'm not sure the result you were expecting but if you remove position, right and top it will sort itself into the DOM with everything else and stop floating over your content.
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!
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 7 years ago.
Improve this question
As seen on https://discordapp.com/ there's floating particles overlaying the background of the header. I've searched pretty much everywhere, trying to export transparent videos, gifs from Premiere CC, After Effects even Photoshop, but none of them will work as seen on this page.
I have also not been able to read through the code to find the source of the effect.
Inspecting these using browser dev tools (hit F12...) shows that these are a bunch of <div> elements, with background images set, using CSS animations to move them vertically, repeating infinitely.
The styles are inline, I've broken one up below for readability.
<div
style='background: url("/assets/6f2ed9d6f802aae1c46620dea14797d2.png");
left: 0.63%;
top: 45.41%;
width: 67px;
height: 56px;
display: block;
position: absolute;
z-index: 2;
opacity: 0;
animation-name: Animation5;
animation-duration: 5.98273s;
animation-timing-function: linear;
animation-delay: 0.382398s;
animation-iteration-count: infinite;'
data-reactid=".0.2.$=10:0.$=10:0.$=12:0.$=1$point-DISCORD-23:$point-DISCORD-23">
</div>
The image used in this style is:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create background gradient as above in the image (Load more news) and I have to add border style also. Please provide your suggestion on this.
Use prefix on this
div{
width: 100vw;
height: 40px;
margin: 40px auto;
background-image: -webkit-linear-gradient(left, transparent, rgb(0, 255, 255), transparent);
background-image: linear-gradient(left, transparent, rgb(0, 255, 255), transparent)
}
<div/>
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