StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POImage transition using CSS3
text
Body
copied!<p>I have a CSS3 button like this</p> <pre><code><button class="button brownb">My Button</button> </code></pre> <p>CSS</p> <pre><code>.brownb:active { background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent; color: #FFFFFF; } .button:active { position: relative; top: 1px; } .brownb { background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516)); background: -moz-linear-gradient(top, #A55757, #831516); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A55757', endColorstr='#831516'); border: 1px solid #A55757; color: #D7D7D7; } .button { border-radius: 0.5em 0.5em 0.5em 0.5em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; display: inline-block; font: bold 14px/100% Arial,Helvetica,sans-serif; margin: 0 2px; outline: medium none; padding: 0.5em 2em 0.55em; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); vertical-align: baseline; } </code></pre> <p>I would like something like light just catching the face of a sharp, shiny sword and then going off. Is it possible with CSS3? I have seen this effect many times using Flash and thats why the query.<br> English is not my native language and so this effect might have got a name ( which obviously I don't know and so I could not google it. ) Is it possible? I am not particular about having this effect on a gradient ( plain background will do )</p> <p>Fiddle here: <a href="http://jsfiddle.net/naveen/V9Rtw/" rel="nofollow noreferrer">http://jsfiddle.net/naveen/V9Rtw/</a></p> <p>Disclaimer: This is basically a <em>give me the codez</em> but I am not good with CSS and so this doubt. Any pointers / nudge with the right transitions will be of tremendous help.</p> <p><strong>Update</strong></p> <p>I want something like what Google implement in the search page for India.</p> <p>Link here: <a href="http://www.google.co.in/search?q=hello+world" rel="nofollow noreferrer">http://www.google.co.in/search?q=hello+world</a></p> <p>Google does this using this sprite: <a href="http://www.google.co.in/images/experiments/p1/p1sprite.png" rel="nofollow noreferrer">http://www.google.co.in/images/experiments/p1/p1sprite.png</a></p> <p><img src="https://i.stack.imgur.com/o025W.png" alt="enter image description here"></p> <p>And they place it inside a folder named experiments :)</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