CSSの最もクール/ベスト/悪い虐待のいくつかは何ですか？

たとえば、これらの図形、または複数のボックスシャドウを使用してピクセルアートを作成します。

人気コンテストは16/04/14 で終了します。

一部の男は、画像を純粋なCSSに変換するツールを作成しました。これは、CSSの本来の意図を大きく超えています。

次に例を示します（有名なモナリザ）：http : //codepen.io/jaysalvat/pen/HaqBf

そして、ここにツールがあります：https : //github.com/jaysalvat/image2css

その場で画像を変更する

必ずしもそれを乱用と呼ぶわけではありませんが、CSSを使用IMGしてを指定のSRCに置き換えて、まったく異なる画像を表示することができます。

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

見る： https //stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

@mediaWebページを印刷するときに完全に異なる画像を表示するセレクターと組み合わせて、非常に楽しいことができます。（同じトリックをPDFbtw で行うことができます。ドキュメントを印刷している男の顔を見てうれしいです。すべての真剣なチャートは美しい女性に置き換えられます:)）

サイズ変更可能な要素：

resize:bothユーザーが要素のサイズを変更できるように追加できます。
一部のブラウザでは、これがサポートされているのは<textarea>ます。

リアルタイムCSSプレビュー：

これは実際のCSSではありませんが、contenteditableプロパティを追加したり、プロパティを追加したりできますstyle="display:block;z-index:99;width:500px;height:500px;resizable:both;"をたり、CSSを編集したりできます。

スタイル設定されたCSSチェックボックス/ラジオボタン：

例として次のマークアップを使用します。

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

あなたは使用することができますdisplay:noneに<input>、CSS3セレクターを、「スプライト」背景を設定して、チェックボックス/ラジオボタンのさまざまな状態を表示できます。

要素の順序は重要であり、入力のfor=""プロパティとプロパティを一致id=""させることはさらに重要です！

ここにいくつかの例を見ることができます：http : //www.csscheckbox.com/

ブラウザー固有のセレクター：

私たちはすべて、CSSクラスとメディアクエリで何らかのJavaScriptミックスを使用しようとしました...

さて、ここにいくつかのブラウザ固有のセレクタがあります：

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

IEには、多数のセレクターがあります。もっとする必要はありません。

私はそれがあなたが虐待によって何を意味するかによると思いますが、これはあなたのユーザーを苦しめるでしょう：

ジッタ

*:hover{
  zoom:99%;
}

（ページの周りにマウスを置くと、すべてが揺れます）

専門家の交換/ Pay-To-View効果

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

（すべてのテキストがぼやけます）

CSSスプライトシートを使用した「アニメーションGIF」

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

（Javaの「The Dude」が手を振る）