Take the 2-minute tour ×
Programming Puzzles & Code Golf Stack Exchange is a question and answer site for programming puzzle enthusiasts and code golfers. It's 100% free, no registration required.

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
13  
Using it inline in style attributes and adding !important to each one. –  user80551 Mar 9 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 at 14:01
    
@n.1 Something that was clearly not intended when the specifications were made. –  930913 Mar 9 at 20:25
    
This question doesn't comply with the rules. –  A.L Mar 9 at 22:29
    
The Internet... –  TwoThe Mar 10 at 13:40

4 Answers 4

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
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

See: http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

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 at 10:03
    
best use i've seen with img{background-image} was embedding an animated gif with a jpg background –  albert yesterday

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): http://codepen.io/jaysalvat/pen/HaqBf

And here is the tool : https://github.com/jaysalvat/image2css

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 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: http://www.csscheckbox.com/

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:

Jitters

*:hover{
  zoom:99%;
}

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

Experts-Exchange/Pay-To-View Effect

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

(makes all the text blurry)

"Animated GIF's" using CSS sprite sheets

http://jsfiddle.net/simurai/CGmCe/light/

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

share|improve this answer

Your Answer

 
discard

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.