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.
popularity-contest
css
930913
źródło
źródło
style
atrybutach i dodawanie!important
do każdego z nich.Odpowiedzi:
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
źródło
Zmienianie zdjęć w locie
Niekoniecznie nazywam to nadużyciem, ale możesz użyć CSS, aby zamienić na
IMG
dany,SRC
aby pokazać zupełnie inny obraz.Zobacz: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css
Może być świetną zabawą w połączeniu z
@media
selektorami wyświetlającymi zupełnie inne obrazy podczas drukowania strony internetowej. (Tę samą sztuczkę można zrobić przyPDF
okazji. 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 :))źródło
Elementy o zmiennym rozmiarze:
Możesz dodać,
resize:both
aby 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ć
contenteditable
wł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:
Możesz użyć
display:none
na<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ściid=""
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:
Dla IE masz mnóstwo selektorów. Nie potrzebujesz więcej.
źródło
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
(podczas przesuwania myszy po stronie wszystko się trzęsie)
Efekt wymiany ekspertów / Pay-To-View
(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ą)
źródło