Каковы некоторые из самых крутых / лучших / худших нарушений CSS?
Например, эти фигуры или использование нескольких прямоугольников-теней для создания пиксельной графики.
Конкурс популярности завершился 16/04/14.
popularity-contest
css
930913
источник
источник
style
атрибутах и добавление!important
к каждому.Ответы:
Какой-то чувак создал инструмент для преобразования любого изображения в чистый CSS. Это выходит далеко за рамки первоначального замысла CSS.
Вот пример (знаменитая Мона Лиза): http://codepen.io/jaysalvat/pen/HaqBf
И вот инструмент: https://github.com/jaysalvat/image2css
источник
Смена изображений на лету
Я не буду называть это злоупотреблением, но вы можете использовать CSS, чтобы заменить на
IMG
данное,SRC
чтобы показать совершенно другое изображение.Смотрите: /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-флажки / радиокнопки:
Используя следующий фрагмент разметки в качестве примера:
Вы можете использовать
display:none
на<input>
и, используя CSS3 селекторы, вы можете установить «спрайтовый» фон, чтобы показать различные состояния флажка / радиокнопки.Порядок элементов важен, а сопоставление
for=""
свойства соid=""
входом еще более важно!Вы можете увидеть некоторые примеры здесь: http://www.csscheckbox.com/
Селекторы для браузера:
Мы все пытались использовать какую-то смесь JavaScript с классами CSS и медиа-запросами ...
Ну, вот несколько специфичных для браузера селекторов:
Для IE у вас есть тонны селекторов. Больше не нужно.
источник
Я полагаю, это зависит от того, что вы подразумеваете под злоупотреблением, но это приведет ваших пользователей к рукам
испуг
(при наведении курсора на страницу все дрожит на вас)
Эксперты-Обмен / Pay-To-View Effect
(делает весь текст размытым)
«Анимированные GIF» с использованием листов спрайтов CSS
http://jsfiddle.net/simurai/CGmCe/light/
(Ява "Чувак" машет рукой)
источник