12

Ditutup . Pertanyaan ini membutuhkan detail atau kejelasan . Saat ini tidak menerima jawaban.

Ingin meningkatkan pertanyaan ini? Tambahkan detail dan jelaskan masalahnya dengan mengedit posting ini .

Ditutup 2 tahun yang lalu .

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.

popularity-contest css

— 930913
sumber

14

Menggunakannya sebaris dengan styleatribut dan menambahkan !importantmasing-masing.

— user80551

Bagaimana Anda mendefinisikan penyalahgunaan ? Saya di luar topik, tetapi terima kasih atas tautannya dengan bentuk yang menginspirasi.

— AL

@ n.1 Sesuatu yang jelas tidak dimaksudkan saat spesifikasi dibuat.

— 930913

Pertanyaan ini tidak sesuai dengan aturan .

— AL

Internet ...

— TwoThe

13

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

— almathie
sumber

Bunda suci perawan tuhan! Itu adalah alat yang sangat hebat ketika Anda membuat latar belakang gradien dan Anda (karena alasan tertentu) tidak memiliki kode di dekat Anda dan Anda membutuhkannya.

— Ismael Miguel

13

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

— RobAu
sumber

+1 Untuk cara kejam tetapi cerdik dalam membayar kembali pada kolega ... Bukan berarti saya akan melakukannya tentu saja ...

— WallyWest

penggunaan terbaik yang pernah saya lihat dengan img {background-image} sedang menyematkan gif animasi dengan latar belakang jpg

— albert

1

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.

— Ismael Miguel
sumber

0

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)

— scunliffe
sumber