Каковы некоторые из самых крутых / лучших / худших нарушений CSS?

Например, эти фигуры или использование нескольких прямоугольников-теней для создания пиксельной графики.

Конкурс популярности завершился 16/04/14.

Какой-то чувак создал инструмент для преобразования любого изображения в чистый CSS. Это выходит далеко за рамки первоначального замысла CSS.

Вот пример (знаменитая Мона Лиза): 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селекторами для отображения совершенно разных изображений при печати веб-страницы. ( PDFМежду прочим, такой же трюк можно сделать . Приятно видеть лицо парня, который печатает документ, и все серьёзно выглядящие графики заменяются прекрасными дамами :))

Изменяемые размеры элементов:

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

Предварительный просмотр 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%;
}

(при наведении курсора на страницу все дрожит на вас)

Эксперты-Обмен / Pay-To-View Effect

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

(делает весь текст размытым)

«Анимированные GIF» с использованием листов спрайтов CSS

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

(Ява "Чувак" машет рукой)