Was ist einer der coolsten / besten / schlimmsten Missbräuche von CSS?

Zum Beispiel diese Formen oder die Verwendung mehrerer Kastenschatten, um Pixelkunst zu erzeugen.

Beliebtheitswettbewerb endet am 16.04.14.

Ein Typ hat ein Tool erstellt, mit dem jedes Bild in reines CSS konvertiert werden kann. Dies geht weit über die ursprüngliche Absicht von CSS hinaus.

Hier ist ein Beispiel (Die berühmte Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

Und hier ist das Tool: https://github.com/jaysalvat/image2css

Ändern von Bildern im laufenden Betrieb

Ich werde es nicht unbedingt als Missbrauch bezeichnen, aber Sie können CSS verwenden, um eine IMGdurch eine gegebene SRCzu ersetzen und ein völlig anderes Bild anzuzeigen.

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

Siehe: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

Kann in Kombination mit @mediaSelektoren eine Menge Spaß machen , wenn beim Drucken einer Webseite ganz andere Bilder angezeigt werden. (Der selbe Trick kann PDFübrigens auch gemacht werden. Schön zu sehen, wie der Typ, der ein Dokument druckt und alle seriös aussehenden Diagramme durch wunderschöne Damen ersetzt werden :))

Größenveränderbare Elemente:

Sie können hinzufügen resize:both, dass die Größe eines Elements vom Benutzer geändert werden kann.
Bei einigen Browsern wird dies nur von unterstützt <textarea>.

Echtzeit CSS Vorschau:

Dies ist keine eigentliche CSS-Sache, aber Sie können die contenteditableEigenschaft hinzufügen, die Eigenschaft hinzufügen style="display:block;z-index:99;width:500px;height:500px;resizable:both;"und Ihr CSS bearbeiten.

Gestaltete CSS Checkboxen / Radiobuttons:

Verwenden Sie das folgende Stück Markup als Beispiel:

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

Sie können mit display:noneauf dem <input>und CSS3 - Selektoren verwenden, können Sie einen ‚Sprite‘ Hintergrund die verschiedenen Zustände des Checkbox / Radiobutton zu zeigen.

Die Reihenfolge der Elemente ist wichtig, und die Zuordnung der for=""Eigenschaft id=""zur Eingabe ist noch wichtiger!

Hier finden Sie einige Beispiele: http://www.csscheckbox.com/

Browserspezifische Selektoren:

Wir haben alle versucht, eine Art Javascript-Mix mit CSS-Klassen und Medien-Abfragen zu verwenden ...

Nun, hier sind einige browserspezifische Selektoren:

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

Für IE haben Sie Tonnen von Selektoren. Mehr ist nicht nötig.

Ich denke, es hängt davon ab, was Sie mit Missbrauch meinen, aber das würde Ihre Benutzer verrückt machen:

Bammel

*:hover{
  zoom:99%;
}

(Wenn du mit der Maus über die Seite fährst, zittert alles an dir.)

Experts-Exchange / Pay-To-View-Effekt

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

(macht den ganzen Text verschwommen)

"Animierte GIFs" mit CSS-Sprite-Blättern

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

(Javas "The Dude" winkt mit der Hand)