Najgorsze nadużycie CSS? [Zamknięte]

12

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

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

kończący się 16.04.14.

930913
źródło
14
Używanie go w styleatrybutach i dodawanie !importantdo każdego z nich.
user80551
Jak zdefiniujesz nadużycie ? Jestem nie na temat, ale dziękuję za link z inspirującymi kształtami.
AL
@ n.1 Coś, co wyraźnie nie było zamierzone przy tworzeniu specyfikacji.
930913
To pytanie jest niezgodne z zasadami .
AL
Internet ...
TwoThe

Odpowiedzi:

13

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

almathie
źródło
Święta Dziewica, Matka Boska! To całkiem dobre narzędzie, gdy tworzysz gradientowe tło, a ty (z jakiegoś powodu) nie masz przy sobie kodu i potrzebujesz go.
Ismael Miguel
13

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

RobAu
źródło
+1 Za okrutne, ale genialne sposoby spłacania kolegom ... Nie, żebym to zrobił oczywiście ...
WallyWest
Najlepszym zastosowaniem, jakie widziałem w przypadku img {background-image}, było osadzenie animowanego gifa na tle jpg
albert
1

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.

Ismael Miguel
źródło
0

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

scunliffe
źródło