Секундомер на CSS3 без картинок, скриптов и SMS

[@Shark]

Здорово, но в единицах измерения путаница какая-то. Оно, конечно, понятно, если вдуматься, но ИМХО, это неправильно :)

[@f0rmat1k]

Вы немножко опоздали.
www.artlebedev.ru/tools/technogrette/html/css3-clock/
Хотя не факт, что там идея была самой первой, но ранее вашей)

[@EuroElessar]

не так интересно, в тех часах css с начанльными позициями генерируется сервером, здесь же есть реакция на клик пользователя. ну и плюсом — цифровой циферблат

[@denisx]

цифровой циферблат тоже есть denisx.ru/myclockcss/

[@nano_freelancer]

2012 год на дворе, а САЛ до сих пор не может в семантическая верстка

        <b class="arr">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
        </b>

[@denisx]

Давай, нано-сенсей, покажи свой вариант

[@Scratch]

Опера как всегда в пролете (

[@GreatRash]

У меня в Хроме не работает. 17.0.963.56 m

[@Evengard]

17.0.963.56 (без m) — работает.

[@Evengard]

17.0.963.56 m тож работает без нареканий

[@Zarikarus]

работает, просто надо кнопочку нажать которая его запускает

[@GreatRash]

Про кнопочку не догадался, думал сам стартанет. Только все равно как надо не работает. Цифры сменяются, а вот стрелка просто пропадает.

[@webknjaz]

в FF все работает.
Chrome 19.0.1055.1 dev-m работает.
а в Опере действительно не запускается.

[@romy4]

FF 10.0.2 Ubuntu/x64 не работает)

[@romy4]

тьфу ты. Пока догадался же, что надо кнопку нажимать… ))

[@Newbilius]

Это скорее в «ненормальное программирование»

[@easterism]

Респект за старания, ничего не скажешь. Минут 5 пытался придумать, где это применить именно в такой реализации. Не смог.
Поэтому солидарен с переносом в «Ненормальное программирование»

[@diamant]

В Safari таймер работает, но иногда сбивается:


(кликабельно)

[@pepelsbey]

Крутящиеся с бешенной скоростью барабаны на механических часах сильно убавляют реалистичности, кроме того, что дёргаются. И другие проблемы:

— Не указаны градиенты, анимация и трансформации без префиксов. Из CSS3 Image Values не просто так дропнули остальные свойства, грядёт CR и отброс префиксов. Ну и просто, если вы хотите, чтобы ваш код работал через 2-3 года во всех браузерах.

— Свойство box-shadow то просто так, то дублируется -moz-box-shadow

— Своства с префиксами написаны после таких же, но без префикса:

.timer {
    box-shadow: inset 1px 5px 5px #889,inset 1px -3px 5px #889;
    -moz-box-shadow: inset 1px 5px 3px #889,inset 1px -3px 3px #889;
}

…и значит вы в корне не понимаете принципа работы префиксов. Похоже как будто вы подгоняете значения (интересно, зачем?), но тем самым лишаете Firefox возможности показать нормальные тени, когда они исправятся в box-shadow.

— Опечатка:

.five::before, .five::after {
    -p-transform: none;
}

Почитайте хорошую статью о префиксах: Эрик Мейер «Префикс или постхак»

[@aTei]

Очень разумная статья, спасибо за ссылку.

[@Volshebnyi]

Буду очень благодарен человеку, который нарисует картинку-ответ
Вот так, с помощью нехитрых телодвижений можно ВСТАТЬ с дивана и начать что-то делать…
НО ЗАЧЕМ?

[@AVGUR]

Зря вы так, иногда концепция «делать что-то ради «делать»» и двигает прогресс =)

[@romychs]

А почему же без скриптов? JavaScript уже не скрипт? :)

[@rednaxi]

А где вы там увидели JavaScript?

[@xensystems]

Молодец парень, очень качественно кратко и понятно, очень радует опции паузы и сброса каунтера.

[@Ctacok]

Opera win32:
Версия: 11.61
Сборка: 1250
Система: Windows 7

Не работает, на что только не тыкаю :)

[@deniamnet]

В Опере не работает.

[@pepelsbey]

В Opera пока нет поддержки CSS-анимации, но очень скоро будет.

[@TiGR]

Уже в 12?

[@pepelsbey]

Не могу обещать, но шансы есть

[@wcoder]

Крутая вещь!!! Только есть вопрос: после двоеточия — миллисекунды? если да, то они превышают 60!

[@decaz]

Милли это 1/1000

[@wcoder]

черт, точняк — извиняюсь)

[@me76]

«Я даже не знаю что хуже, что код для этого секундомера занимает ~ 1100 строк, или то что он работает только в половине браузеров».

На мой взгляд, хуже всего — превращение CSS в самоцель (не утверждаю, что именно это произошло с вами, просто рассуждаю вслух), не учитывая, сколько времени уйдёт на разработку, тестирование и отладку такого элемента и сколько времени потратит браузер на разбор 1000-строчного файла стилей (это если повезло и на странице всего один такой элемент).

Но если цель — максимальное овладение тонкостями CSS или демонстрация глубоких знаний потенциальному работодателю, то ни «1100 строк», ни «то что он работает только в половине браузеров» (можно посидеть и допилить), не считаю негативом.

[@Mystex]

А в чём смысл делать анимацию на CSS без JS? Не беру в расчёт спортивный интерес. Я понимаю, что существует минимум одно преимущество — работает в браузерах с NoScript. Но ведь одновременно с этим отсеиваются пользователи Opera, которых как мне кажется больше, чем пользователей с NoScript, так что преимущество сомнительное. Так в чём преимущество?

[@VolCh]

Делать анимацию без JS нормально. Управлять ею без JS как-то не очень, перебор.

Я с некоторых пор провожу аналогию между HTML/CSS/JS и MVC. HTML — это модель, данные (контент) и метаданные (логические разметка, по сути имена и атрибуты полей). CSS — представление, знает только о метаданных. А JS управляет данными и метаданными модели в ответ на действия пользователя (иногда таймера и пуша с сервера).

[@dstarcev]

На Dolphin под Android не работает :(
Жду заголовок «Искусственный интеллект на CSS3, без скриптов» ;)

[@Nedder]

Давайте уже порно-видео на CSS3, все этого давно ждут!