Які є найкрутіші / найкращі / гірші зловживання CSS?

Наприклад, ці фігури або використання декількох тіньових коробок для створення піксельних зображень.

конкурс на популярність, який закінчується 16.04.14.

Якийсь чувак створив інструмент для перетворення будь-якого зображення в чистий CSS. Це виходить за рамки початкового наміру CSS.

Ось приклад (Знаменита Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

І ось інструмент: https://github.com/jaysalvat/image2css

Зміна зображень на льоту

Я не обов'язково називатиму це зловживанням, але ви можете використовувати CSS для заміни IMGданого, SRCщоб показати зовсім інше зображення.

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

Дивіться: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

Може бути дуже цікавим у поєднанні з @mediaселекторами для відображення абсолютно різних зображень під час друку веб-сторінки. (Таку ж хитрість можна зробити і в PDFbtw. Приємно бачити обличчя хлопця, який друкує документ, і всі серйозні схожі карти замінюються прекрасними дамами :))

Змінюються елементи:

Ви можете додати, resize:bothщоб дозволити користувачеві змінити розмір елемента.
У деяких браузерах це підтримується лише в <textarea>s.

Попередній перегляд CSS у режимі реального часу:

Це не фактична річ css, але ви можете додати contenteditableвластивість, додати властивість style="display:block;z-index:99;width:500px;height:500px;resizable:both;"і ви можете редагувати свій CSS.

Стильові прапорці / радіо кнопки CSS:

Використовуючи наступний фрагмент розмітки як приклад:

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

Ви можете використовувати display:noneна <input>і, використовуючи перемикачі CSS3, ви можете встановити фон "спрайт", щоб відобразити різні стани галочки / радіо кнопки.

Порядок елементів важливий, а відповідність for=""властивості id=""вхідному значенню ще важливіше!

Деякі приклади ви можете побачити тут: http://www.csscheckbox.com/

Спеціальні веб-переглядачі:

Ми всі намагалися використовувати якусь суміш javascript з класами css та медіа-запитами ...

Ну ось кілька конкретних селекторів браузера:

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

Для IE у вас є багато селекторів. Не потрібно більше.

Я думаю, це залежить від того, що ви маєте на увазі під зловживанням, але це призведе до того, що ваші користувачі будуть розпущеними:

Потрясіння

*:hover{
  zoom:99%;
}

(так як мишкою на сторінці все тремтить на вас)

Ефект-обмін / оплата для перегляду ефекту

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

(робить текст розмитим)

"Анімовані GIF", використовуючи спрайти CSS

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

(Ява "Чувак" махає рукою)