12
\$\begingroup\$

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.

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

4 Answers 4

13
\$\begingroup\$

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

\$\endgroup\$
1
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Mar 9, 2014 at 19:53
13
\$\begingroup\$

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

\$\endgroup\$
2
  • \$\begingroup\$ +1 For cruel but ingenious ways of paying back on colleagues... Not that I would do it of course... \$\endgroup\$ Commented Mar 11, 2014 at 10:03
  • \$\begingroup\$ best use i've seen with img{background-image} was embedding an animated gif with a jpg background \$\endgroup\$
    – albert
    Commented Jul 30, 2014 at 2:16
1
\$\begingroup\$

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.

\$\endgroup\$
0
\$\begingroup\$

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)

\$\endgroup\$

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