I want to create a background with grain effect and using radial gradient. Is that possible to do with css "background" property only? Can you please help me with it? It should look something like that, just without the picture on the right, thanks! (cant post pics here, because I need more reputation points)
You can use the background-image radial gradient property.
For example
{
background-image: radial-gradient(red, green, blue)
}
Related
<-- see image with imperfect pixel here.
When using skew in CSS I get a imperfect pixel where the skewed grey border meets the grey bottom border. Looks like some sort of outline or box-shadow. But using outline:0;box-shadow:0; does not effect it. Does anyone know how I can solve this? Cheers and thanks in advance! ✌️
Edit, relevant code: https://jsfiddle.net/acnodrfe/
The blue background color of that element was causing this. The grey border did get a little bit of blue from the bg with it. Changing the background with: background: linear-gradient(270deg, #0b19ba 0%, #0b19ba 99%, #cccccc 100%); solved the problem. Because it gives the edge close to that border a grey value.
PS: This was only possible because I have the light blue element on top of it so you don't see the gradient. Be aware of that if someone might need and find this later on in time. 🚀
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
I'm using transparent forum icons, but I've a problem with the white background of the image:
How can I remove it using CSS or a software?
Thanks.
Are you trying to make your image like this where the white is transparent?
Photoshop took about 2 seconds. Select the white and delete it.
Save the images in the .PNG format. JPEG images can not handle transparency. Photoshop has this capability.
If you are attempting to re-size the image after being inserted, then try the following code in the css part -
background: transparent url("/static/img/image.png") center center no-repeat;
Okay, the problem is now fixed. I changed the white background to the same background of my element: http://prntscr.com/5upc73 and http://i.imgur.com/LcHwecs.png
Is it possible to create a rect, that has gradient fill from black top to white bottom with gradient border from white top to black bottom?
Regards,
It's also hypothetically possible using css gradients for the background-image and border image. I still suck at getting the border-image syntax correct but here's a half-figured out fiddle with a gradient for a border-image: http://jsfiddle.net/y8uFu/
You can dig through the spec for border-image here: http://www.w3.org/TR/css3-background/#border-images
I'd love to see if someone can figure it out for the border-image.
Yes, this is most definitely possible. "Canvas" is what you are looking for.
Here are a few resourcses to get you started:
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
http://diveintohtml5.ep.io/canvas.html#divingin
http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/#gradients
I want to have a box with two colors with silver on top and it should slowly fade into white, just as Apple's homepage background. How do i do that?
Thanks as always.
If you want to use CSS3 here's a great example: http://css-tricks.com/examples/CSS3Gradient/
W/o CSS3, you have to make do with an image repeated horizontally (x-repeat), similar to what tvanfosson said.
you are looking for gradient background?
http://www.tizag.com/cssT/background.php
look for "css gradient background"
there are more articles if you google: gradient background css
The basic idea is to use a background image that does the gradient for you. You sent the background color of the page to the "end" color of the gradient, then apply your gradient background image using CSS with a repeat in the opposite direction that you want the gradient to flow. So if you want a 100-pixel, silver to white, gradient from top to bottom you'd create a 100Hx1W pixel image that spans your colors from top to bottom. Set the background color to white and apply the background image repeating across the x axis. You can easily create the gradient using the gradient tool in Photoshop or GIMP.
#body
{
background: #ffffff url(/images/bg.jpg) repeat-x;
}