Menu
I have tried to search for this all over, but haven't found anything close to my question anywhere.
Does anyone know if it's possible to print out a CSS generated linear-gradient? I am mocking up a website for my boss, and it looks really nice, but when I try to make a printer-friendly page, the gradients don't display at all.
For reference, what I'm trying to print is a indicator bar that has a slider element on top of it, to indicate the result of a value within a range.
The gradients look really great on the page, but just don't show up in a print dialog.
Thanks in advance!
476
Gradients are commonly used in printing and in most instances produce excellent results. Gradients can be represented in a files as a mathematical equation (Vector) or rendered by the application into a series of pixels (Raster). Whether created as rasters or vectors, gradients below 10% may not reproduce accurately.
But gradient text can be achieved in CSS, it just requires a few extra steps. It's best to start with some big bold text. This will make the gradient more visible and the text more readable.
CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: background-image: <gradient> background-clip: text. text-fill-color: transparent.
If i understand your problem correctly, sounds like all background images aren't printing right? That's a default behavior of IE. To print background graphics (which might include your 'gradient graphic', go to print -> page setup and click on "Print background colors and images".
Hope this helps.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
