Programming Puzzles & Code Golf Stack Exchange is a question and answer site for programming puzzle enthusiasts and code golfers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What is some of the coolest/best/worse abuses of CSS?

For example, these shapes, or using multiple box-shadows to make pixel art.

ending on 16/04/14.

share|improve this question
Using it inline in style attributes and adding !important to each one. – user80551 Mar 9 '14 at 10:17
How do you define an abuse? I'm off-topic but thanks for the link with inspiring shapes. – A.L Mar 9 '14 at 14:01
@n.1 Something that was clearly not intended when the specifications were made. – 930913 Mar 9 '14 at 20:25
This question doesn't comply with the rules. – A.L Mar 9 '14 at 22:29
The Internet... – TwoThe Mar 10 '14 at 13:40

Changing images on the fly

I won't necessarily call it abuse, but you can use CSS to replace an IMG with a given SRC to show a completely different image.

@media print
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        width:0px; height: 0px;


Can be lots of fun combined with @media selectors to display completely different images when printing a webpage. (Same trick can be done in PDF btw. Nice to see the face of the guy that is printing a document and all serious looking charts are replaced by beautiful ladies :))

share|improve this answer
+1 For cruel but ingenious ways of paying back on colleagues... Not that I would do it of course... – WallyWest Mar 11 '14 at 10:03
best use i've seen with img{background-image} was embedding an animated gif with a jpg background – albert Jul 30 '14 at 2:16

Some dude created a tool to convert any image to pure CSS. This goes well beyond the original intent of CSS.

Here is an example (The famous Mona Lisa):

And here is the tool :

share|improve this answer
Holy virgin mother of god! That is quite a great tool when you make a gradient background and you (for some reason) don't have the code near you and you need it. – Ismael Miguel Mar 9 '14 at 19:53

Resizable elements:

You can add resize:both to allow an element to be resized by the user.
On some browsers, this is only supported on <textarea>'s.

Real-time CSS preview:

This is not an actual css thing, but you can add the contenteditable property, add the property style="display:block;z-index:99;width:500px;height:500px;resizable:both;" and you can edit your CSS.

Styled CSS Checkboxes/radiobuttons:

Using the following piece of markup as example:

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

You can use display:none on the <input> and, using CSS3 selectors, you can set a 'sprite' background to show the different states of the checkbox/radiobutton.

The order of the elements is important, and matching the for="" property with the id="" in the input is even more important!

You can see some examples here:

Browser specific selectors:

We all have tried to use some sort of javascript mix with css classes and media-queries...

Well, here are a few browser specific selectors:

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

For IE, you have tons of selectors. No need for more.

share|improve this answer

I guess it depends what you mean by abuse but this would drive your users batty:



(as you mouse around the page everything jitters on you)

Experts-Exchange/Pay-To-View Effect

  text-shadow:0 0 5px rgba(0,0,0,0.5);

(makes all the text blurry)

"Animated GIF's" using CSS sprite sheets

(Java's "The Dude" waving his hand)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.