Apa yang merupakan pelanggaran CSS paling keren / terbaik / terburuk?

Misalnya, bentuk ini , atau menggunakan beberapa bayangan kotak untuk membuat seni piksel.

kontes popularitas berakhir pada 16/04/14.

Beberapa pria menciptakan alat untuk mengubah gambar apa pun menjadi CSS murni. Ini melampaui maksud asli CSS.

Berikut ini sebuah contoh (Mona Lisa yang terkenal): http://codepen.io/jaysalvat/pen/HaqBf

Dan inilah alatnya: https://github.com/jaysalvat/image2css

Mengubah gambar dengan cepat

Saya tidak akan menyebutnya penyalahgunaan, tetapi Anda dapat menggunakan CSS untuk mengganti IMGdengan yang diberikan SRCuntuk menampilkan gambar yang sama sekali berbeda.

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

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

Dapat sangat menyenangkan dikombinasikan dengan @mediapenyeleksi untuk menampilkan gambar yang sama sekali berbeda saat mencetak halaman web. (Trik yang sama dapat dilakukan dalam PDFbtw. Senang melihat wajah pria yang mencetak dokumen dan semua grafik yang tampak serius digantikan oleh wanita cantik :))

Elemen yang dapat diubah ukurannya:

Anda dapat menambahkan resize:bothagar elemen dapat diubah ukurannya oleh pengguna.
Pada beberapa browser, ini hanya didukung pada <textarea>'s.

Pratinjau CSS waktu nyata:

Ini bukan hal css yang sebenarnya, tetapi Anda dapat menambahkan contenteditableproperti, menambahkan properti style="display:block;z-index:99;width:500px;height:500px;resizable:both;"dan Anda dapat mengedit CSS Anda.

Kotak centang / kotak dialog bergaya CSS:

Menggunakan potongan markup berikut sebagai contoh:

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

Anda dapat menggunakan display:nonepada <input>dan, menggunakan pemilih CSS3, Anda dapat mengatur latar belakang 'sprite' untuk menunjukkan berbagai status kotak centang / radiobutton.

Urutan elemen penting, dan mencocokkan for=""properti dengan id=""input adalah lebih penting!

Anda dapat melihat beberapa contoh di sini: http://www.csscheckbox.com/

Selektor khusus browser:

Kita semua telah mencoba menggunakan semacam campuran javascript dengan kelas css dan pertanyaan media ...

Nah, berikut ini beberapa penyeleksi khusus browser:

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

Untuk IE, Anda memiliki banyak pemilih. Tidak perlu lagi.

Saya kira itu tergantung apa yang Anda maksudkan dengan penyalahgunaan tetapi ini akan membuat pengguna Anda kurang:

Kegugupan

*:hover{
  zoom:99%;
}

(Saat Anda mengarahkan mouse di sekitar halaman, semua kegugupan pada Anda)

Efek Pakar-Pertukaran / Bayar-Untuk-Melihat

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

(membuat semua teks buram)

"Animated GIF's" menggunakan sprite sheet CSS

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

("Si Bung" Jawa melambaikan tangannya)