StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Edit:</strong> I assume that you are talking about the search button. My network didn't allow me to see the other links that you posted :(. The way that I have found quite successful with the button is to create a background image like this. Say your image is 25px tall by 75px wide. Create an image 75px x 75 px. Put three buttons in there like this:</p> <pre><code> ____________ | normal | ------------ ____________ | over | ------------ ____________ | | ------------ </code></pre> <p>Then, use the background-position property to set which position you want in the image. Also make sure that the overflow:hidden. This way, you get more control over the effect, download time is negotiable (after all, for progressive download, the make image appears first), and you are more backwards compatible, and it is cached (presumeably). I also don't know how the gradient rendering affects browser performance, but I would imagine that it could possibly have some impact.</p> <p>Also, please mark as an answer if this answers your question!</p> <p>JMax</p> <hr> <p>I haven't seen a way to do this. I assume that you want this effect to be visible when they click the button, correct? You could try changing the gradient so that it would either raise up or lower, but that would make the effect for entire way across. Here is a possible way for that:</p> <pre><code>background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.32, #A55757), color-stop(0.57, #831517) ); background-image: -moz-linear-gradient( center bottom, #A55757 32%, #831517 57% ); </code></pre> <p>From: <a href="http://gradients.glrzad.com/" rel="nofollow">http://gradients.glrzad.com/</a></p> <p>Also, have you thought about using an image? I think that would give you the flexibility that you are looking. I don't know of your targeted audience, but it might also provide better backward compatibility.</p> <p>JMax</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload