Это был довольно интересный проект. Я пытался создать арифметический калькулятор чисто на CSS3 (а не JavaScript). Используя такие элементы, как calc(), attr(), counter() и пр. это казалось не таким уж сложным заданием, но все оказалось не так просто.
Прежде чем я начну, хотелось бы отметить, что обоснованных причин создавать калькулятор, используя только CSS, нет. Я сделал это просто ради интереса.
Стабильно работает только в Firefox 4 и IE 9
Одним из ключевых компонентов любого калькулятора является возможность преобразовывать ввод. Используя только CSS, мы имеем очень ограниченные варианты фиксации ввода. Таким образом, для регистрации всех вводов используются чекбоксы. Для применения изменений к другим элементам можно использовать состояние «:checked» и селектор «~», а так как они довольно прямолинейны, я не буду вдаваться в подробности, а вместо этого акцентирую внимание на логике вычисления значений.
Читать полностью »