Совершение CSS-преступлений

изображение

Время CSS-трюков прошло. Настало время CSS Crimes!

В нынешнем ландшафте поставщиков услуг контента пользователи часто ограничиваются самовыражением в тексте, ссылках и изображениях. Правила дезинфекции, как правило, исключают HTML, JavaScript и различные атрибуты.

Служба социальных сетей Cohost позволяет пользователям иметь большую свободу с разметкой и встроенными стилями, чем мы обычно привыкли. Некоторые пользователи воспользовались этой свободой для совершения преступлений CSS! Это привело к творческому воссозданию знакомых интерфейсов и интерактивных игр с использованием свойств нетрадиционными способами.

Блэкл Мори создал хитроумное изобретение где потянув за ручку, медленно поворачивается ряд шестерен, шкивов и цепей. В конце концов апертура открывается, чтобы показать талисман сайта («яичный жук») и прокламацию «Хорошая работа!». Я смотрел на это в Инструментах разработчика, и это удивительное сочетание grid, resize, transformи calc(). Я закончил тем, что добавил border для всех <div>s, чтобы попытаться лучше понять, как перемещался каждый отдельный элемент.

В прошлом были ситуации, когда я был ограничен в использовании полного набора инструментов HTML, JavaScript и CSS. Было много случаев использования декоративных CSS-фигуры чтобы обойти изображения. я использовал :hover как обходной путь для mouseenter и mouseleave. я использовал input:checked как родственный селектор для переключения.

Хотя CSS Crime, вероятно, не то, что вы хотели бы использовать на регулярной основе, мы должны проводить эксперименты в рамках ограничений, которые могут способствовать творческим решениям.


Прямая ссылка →

Отметка времени:

Больше от CSS хитрости