Worst Abuse of CSS?

12

5

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.

930913

Posted 2014-03-09T10:04:42.927

Reputation: 153

Question was closed 2017-07-19T18:52:57.973

@user80551: Post as an answer, I'd vote for that :D – Mark K Cowan – 2015-02-13T14:27:34.013

14Using it inline in style attributes and adding !important to each one. – user80551 – 2014-03-09T10:17:54.753

How do you define an abuse? I'm off-topic but thanks for the link with inspiring shapes. – A.L – 2014-03-09T14:01:20.207

@n.1 Something that was clearly not intended when the specifications were made. – 930913 – 2014-03-09T20:25:56.407

This question doesn't comply with the rules.

– A.L – 2014-03-09T22:29:15.353

The Internet... – TwoThe – 2014-03-10T13:40:32.780

You should accept some answer :) – RobAu – 2014-05-22T09:16:43.600

Answers

13

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

almathie

Posted 2014-03-09T10:04:42.927

Reputation: 231

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 – 2014-03-09T19:53:34.903

13

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: https://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 :))

RobAu

Posted 2014-03-09T10:04:42.927

Reputation: 641

+1 For cruel but ingenious ways of paying back on colleagues... Not that I would do it of course... – WallyWest – 2014-03-11T10:03:10.133

best use i've seen with img{background-image} was embedding an animated gif with a jpg background – albert – 2014-07-30T02:16:39.367

1

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.

Ismael Miguel

Posted 2014-03-09T10:04:42.927

Reputation: 6 797

0

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)

scunliffe

Posted 2014-03-09T10:04:42.927

Reputation: 321