Jakie są najfajniejsze / najlepsze / gorsze nadużycia CSS?

Na przykład te kształty lub użycie wielu cieni do tworzenia pikseli.

konkurs popularności kończący się 16.04.14.

Niektórzy koleś stworzył narzędzie do konwersji dowolnego obrazu do czystego CSS. To znacznie wykracza poza pierwotną intencję CSS.

Oto przykład (słynna Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

A oto narzędzie: https://github.com/jaysalvat/image2css

Zmienianie zdjęć w locie

Niekoniecznie nazywam to nadużyciem, ale możesz użyć CSS, aby zamienić na IMGdany, SRCaby pokazać zupełnie inny obraz.

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

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

Może być świetną zabawą w połączeniu z @mediaselektorami wyświetlającymi zupełnie inne obrazy podczas drukowania strony internetowej. (Tę samą sztuczkę można zrobić przy PDFokazji. Miło jest zobaczyć twarz faceta, który drukuje dokument, a wszystkie poważnie wyglądające wykresy są zastępowane przez piękne damy :))

Elementy o zmiennym rozmiarze:

Możesz dodać, resize:bothaby umożliwić zmianę rozmiaru elementu przez użytkownika.
W niektórych przeglądarkach jest to obsługiwane tylko na <textarea>.

Podgląd CSS w czasie rzeczywistym:

To nie jest rzeczywiste css, ale możesz dodać contenteditablewłaściwość, dodać właściwość style="display:block;z-index:99;width:500px;height:500px;resizable:both;"i możesz edytować swój CSS.

Stylizowane pola wyboru / przyciski radiowe CSS:

Wykorzystując następujący fragment znaczników jako przykład:

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

Możesz użyć display:nonena <input>selektorach CSS3 i ustawić tło „duszka”, aby pokazać różne stany pola wyboru / przycisku radiowego.

Kolejność elementów jest ważna, a dopasowanie for=""właściwości id=""do danych wejściowych jest jeszcze ważniejsze!

Możesz zobaczyć kilka przykładów tutaj: http://www.csscheckbox.com/

Selektory specyficzne dla przeglądarki:

Wszyscy próbowaliśmy użyć pewnego rodzaju mieszania javascript z klasami css i zapytaniami o media ...

Oto kilka selektorów specyficznych dla przeglądarki:

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

Dla IE masz mnóstwo selektorów. Nie potrzebujesz więcej.

Wydaje mi się, że to zależy od tego, co rozumiesz przez nadużycie, ale doprowadziłoby to użytkowników do nieprzyjemności:

Trema

*:hover{
  zoom:99%;
}

(podczas przesuwania myszy po stronie wszystko się trzęsie)

Efekt wymiany ekspertów / Pay-To-View

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

(sprawia, że ​​cały tekst jest rozmazany)

„Animowane pliki GIF” przy użyciu arkuszy sprite CSS

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

(„The Dude” Javy macha ręką)