Schlimmster Missbrauch von CSS? [geschlossen]

12

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.

popularity-contest css 930913
quelle
14
Verwenden Sie es inline in styleAttributen und fügen Sie !importantzu jedem hinzu.
User80551
Wie definieren Sie einen Missbrauch ? Ich komme nicht zum Thema, aber danke für die Verbindung mit inspirierenden Formen.
AL
@ n.1 Etwas, das eindeutig nicht beabsichtigt war, als die Spezifikationen erstellt wurden.
930913
Diese Frage entspricht nicht den Regeln .
AL
Das Internet ...
TwoThe

Antworten:

13

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

Almathie
quelle
Heilige Jungfrau Gottesmutter! Das ist ein großartiges Werkzeug, wenn Sie einen Hintergrund mit Farbverlauf erstellen und Sie (aus irgendeinem Grund) den Code nicht in Ihrer Nähe haben und ihn benötigen.
Ismael Miguel
13

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

RobAu
quelle
+1 Für grausame, aber geniale Methoden, um sich an Kollegen
Natürlich
beste verwendung, die ich mit img gesehen habe {background-image} hat ein animiertes gif mit einem jpg-hintergrund eingebettet
albert
1

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.

Ismael Miguel
quelle
0

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)

Scunliffe
quelle