View a gradient?

Neil E. · Nov 30, 2012

Sounds weird but that is what I want to do. Here is a snapshot of the XF gradient files on my server.

I want to see what each one looks like, but there doesn't seem to be a way to view the file contents directly using the cpanel tools. I downloaded a file and opened it with photo software, but it doesn't look like anything I recognize. How do I find out what these gradients look like? Do I have to use CSS to apply each one to an element to see the effect of the gradient?

MagnusB · Nov 30, 2012

Most of them are semi transparent, so opening them in a picture viewer or something would not really yield good results. Try creating an empty html file and apply the background on a box. Something like this:

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.testingGradient {
  margin: 40px;
  background: pink url('path/to/gradient/to/test.png') repeat-x;
  height: 12px;
  width: 50px;
}
</style>
</head>
<body>
<div class="testingGradient"><span>Testing mah gradient</span></div>
</body>
</html>

Just tweak that code a bit and you should be able to see it. (It's completely untested on my part, I just wrote it quickly).

Neil E. · Dec 2, 2012

Instead of trying a new element as suggested, I increased the size of an existing element and applied every gradient in turn.
Of the 23 gradients, only the following were useful:
/form-element-focus-100.png
/navigation-tab.png
/tab-17px-light.png
/tab-unselected-25px-light.png

View a gradient?

Neil E.

Active member

MagnusB

Well-known member

Neil E.

Active member

Similar threads

We value your privacy