Индикатор выполнения на CSS3

[mariner]

ну и как обновлять ему статус? js? тогда заголовок врет. а по другому, если более простые способы с меньшим количеством кода.

[mariner]

*есть.

[bobrovnikov]

Большое количество кода образуется из-за необходимости поддерживать максимальное количество браузеров.
Свойство linear-gradient на данный момент вообще не работает без префиксов.

[bobrovnikov]

Управление через javascript.
Вот полезный топик на эту тему habrahabr.ru/blogs/jquery/124401/

[Krio]

Чутка не хватает стиля для div.bar ввиде max-width: 100%, и что-то бы с width:-1% сделать ;) мало ли чудаков…

[bobrovnikov]

Добавил max-width: 100%, а -1% думаю уже чересчур.

[standy]

class="fl"
class="fr

facepalm

[bobrovnikov]

Простите, а что не так?
fl — float: left, fr — float: right

[Regis]

Вероятно подразумевалось, что использование подобных классов — не семантично.

Имхо, в примере такое вполне допустимо.

[bobrovnikov]

Поменял на left и right для понятности.

[Silversy]

left и right — могут быть удобными классами, тянущимися по всей верстке.
А для изменения вида конкретных элементов можно добавить еще класс, например:

<div class="right bar-percent">2324k / 3019k</div>

[vanxant]

Ну так и напишите свою статью с правильными наименованиями классов. Пока что вы только в комментах проповедуете свою религию.

[homm]

Что за блядский подход. Человек аргументированно указывает на ошибку в комментариях. Зачем ему писать статью?

[leonard]

Человек просто хотел оправдать свой ник ;)

[TrueDrago]

А для «любимого» IE есть такая конструкция для градиентов:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Правда, судя по всему, оно поддерживает только самые простые линейные градиенты. Зато даже в IE 6 работает, сегодня как раз на градиентах немного замороченные вкладки делал — пришлось столкнуться.

[rapida]

Огромное спасибо!

[TrueDrago]

В IE6 все равно проверьте, т.к. я на работе смотрел в IE Tester, и было все ок, а дома вчера вечером посмотрел — градиентов не было…

[rapida]

Мне главное ie7

[TrueDrago]

Ну в нём ок было всё

[Softlink]

*из замеченного использование этого фильтра ведет к прекращению работы border-radius. Это так, для справки, на всякий случай, а то пойдут все поголовно применять его.

[angry_elf]

man 5 html
/progress

[vadymg]

habrahabr.ru/blogs/css/131720/

[Regis]

Если не секрет, что вы хотели сказать этой ссылкой?

[vadymg]

Сорри, не туда попал… А комментить могу раз в пять минут, так что не смог даже написать о том, что ошибся :)

[Mithgol]

Да, такое иногда случается, если не пользоваться кнопкою предпросмотра.

Пользуйтеся кнопкою предпросмотра.

[bobrovnikov]

Рекурсия.

[vadymg]

Пример индикатора даже в IE6 правильно отображается! :)

[homm]

Кому-то кажется удивительным, что IE6 способен отобразить два прямоугольника. Даже не знаю, как это комментировать.

[evil_random]

Вообще-то для IE6 отобразить два прямоугольника этой таки большой подвиг.

[homm]

Да ладно? И сколько применено хаков и трюков, чтобы отобразить эти два прямоугольника?

[evil_random]

[bad_guy]

Ну и на правах шутки:
Проблему пофиксили, теперь с прямоугольниками всё хорошо

[MechanisM]

Как стилизовать прогрессбары состоящие из привычных div'ов все знают.
Рассказали бы лучше как стилизовать html5 тэг «progress»

[Serator]

Как-то так — developer.mozilla.org/en/CSS/%3A%3A-moz-progress-bar.

[antoo]

Терпеть не могу это окно с предложением обновить Flash Player.

[MechanisM]

Я его ниразу не видел ибо в Ubuntu)

[MechanisM]

у кого-то и в убунте это окно есть? О_о

[oWeRQ]

Нет, но очень хочется такую тему оформления, никто не знает можно ли где-то ее найти или выдернуть из инсталятора? Не важно для чего(желательно, конечно, для gtk2-3), главное цвета, параметры градиентов и теней выдернуть.

[MechanisM]

У меня стоит по цветам примерно такая thedeviantmars.deviantart.com/art/Atolm-gtk3-206663190
Можно чуток подправить и совсем будет как вам хочется.

[MechanisM]

есть еще переделанная Transparent Atolm: droidinvasion.deviantart.com/art/Transparent-Atolm-214384495

[MechanisM]

После вашего комментария появилась идея сделать онлайн-сервис по созданию тем gtk2-3/Gnome Shell/наборы иконок где можно будет легко и просто выставить нужные цвета, загрузить картинки для кнопочек выставить нужные параметры для всех UI элементов итд и сгенерить тему. Естественно с реалтайм предпросмотром как тут jqueryui.com/themeroller/ Только еще все созданные темы сохранять и выставлять в галерее. Жаль у меня времени нет реализовать. Если бы кто-то присоединился…

[markoffko]

В убунте окна есть? О_о

[Goryn]

Под wine'ом почему бы и нет?

[MechanisM]

Мне пофигу на минусы, мне не понятно почему? Прокомментируйте пожалуйста.
Если что Flash Player у меня стоит и самой свежей версии 64-битный и всегда обновляется из репозиториев.
Или вы считаете что я обязан был это окно видеть и оно точно есть в Ubuntu?

[YasonBy]

Вам правда нужно объяснять минусы за фразу вида: «А у меня этой проблемы нет, потому что я пользуюсь Ubuntu»?

[MechanisM]

Не такой смысл был у фразы. А что в Ubuntu — нет этого уведомления и я его не видел и не более того.Так-же я не считаю что это вообще проблема как вы говорите, наоборот я бы хотел видеть такое уведомление чтобы Adobe мне сообщали об обновлении версии а не так что я увидел в Synaptic'е что с кучей других пакетов будет обновлен еще и Flash Player — так я не особо внимания этому придам.

[oWeRQ]

Не надо нам уведомлений, единая система обновлений рулит, другое дело, обновления безопасности(куда, естественно, всегда попадает флешь) не слишком наглядно отображаются в менеджере обновлений, и никак не отличаются в синаптике.

[oWeRQ]

Ошибочка, флешь, скорее всего, не попадает в обновления безопасности, т.к. находится в репозитории проприетарщины.

[winbackgo]

Поддержка градиентов не полная. В помощь www.colorzilla.com/gradient-editor/

[MechanisM]

Там тоже не полная. нет -khtml-gradient

[Smartfon]

Статья достойная Хабра™

[Finom]

Мде… Это круче, чем SITH.
my.jetscreenshot.com/6628/20111102-uafi-68kb

[vanxant]

Две сотни добавлений в избранное какбы намекают…

[maxvipon]

Что это за старый браузер у вас такой, который тень на тексте показывает, а градиент нет?

[kirilloid]

Например, это может быть FF3.5 =)
Ну или, да, ie9.

[TerrorDroid]

Допустим, Safari 5.0.5 почему-то не показывает градиент на примере, хотя вроде бы должен быть способен на них (уж на тени тем более)…

[beatlejute]

Все, походу хабр уже можно хоронить…

[YasonBy]

Действительно, ведь всего полгода назад на хабре писали такие клёвые обзоры китайских планшетов (с прямой ссылкой на магазин — не корысти ради, а сугубо для удобства читателей, ага). А сейчас — фи — скатились до технических(!) статей о веб-разработке(!).
Деградируем…

[f0rmat1k]

Вот хоть убейте, но я бы не назвал «Смотрите, я сверстал 2 блока и даже применил двойной ксс3 градиент!» технической статьей. Хотя такого рода посты всегда почему то привлекают больше внимания, чем труъ технические статьи.

[beatlejute]

Ну я полагаю мой пост для кого-то мог быть полезен, возможно, кто-то благородя ему принял решение покупать или нет, возможно, получил ответы на интересующие вопросы, раньше об этом планшете было мало информации. Но пост в стиле, создаем html вайл c body и 3 div бесполезен, информации на эту тему чрезмерно много. Тут скорее даже получается — «смотрите как я умею верстать». И что?! Так все умеют (кто хоть как-то этим профессионально занимается, хотя бы чуть-чуть).

[YasonBy]

Судя по Вашим и f0rmat1k публикациям, вы оба занимаетесь профессионально занимаетесь вёрсткой. Само собой, что на фоне «Обучаем IE понимать CSS3» эта статья на полторы странички выглядит детским садом и оскорбляет ваши профессиональные чувства — это вполне можно понять.
Однако не все читатели хабра постигли дао вёрстки, многие занимаются ею just for fun, — и для них эта статья полезна: она кратко и внятно показывает решение конкретной задачи.

На хабре всегда были статьи и для новичков, и для специалистов — ничего не изменилось. Поэтому Ваше мнение о смерти хабра кажется мне необоснованным.

[beatlejute]

Я извиняюсь если задел кого-то, но какого «такго» люди черпают полезную информацию в таком сомнительном виде, есть же исчерпывающие и легкочитаемые мануалы, причем очень немало.

[f0rmat1k]

Просто по сути пост о применении ксс-градиента, не думаю, что остальное будет ваще хоть чем то полезно сообществу.
А если уж говорить о ксс-градиентах, то таких статей уже 9000 на хабре с примерами самых разнообразных и сложных градиентов.

А новичкам нужно не тырить готовые примеры, а научиться понимать природу вещей, чтоб легко самим их делать. По вашему коду они ее не поймут.
Поэтому я не считаю этот пост полезным. Он полезен разве что для тех, кто не умеет пользоваться поиском.

[f0rmat1k]

К тому же у вас имеется достаточно серьезная ошибка, суть которой в том, что вы, во-первых, не указали чистое совйство background-image: linear-gradient, а лишь с префиксами. Если когда нибудь появится новый браузер, то он не покажет ваш градиент. Тот же Konqueror, возможно, уже умеет его показывать, но не сможет из-за отстутствия безпрефиксного свойства.
Во-вторых, забили на ИЕ10, не указав -ms-linear-gradient.

А еще, вы могли бы легко забросить помимо фона — обычную картинку — и размножить ее по Х. ИЕ6-7 бы хотя бы показали бы ее вместо просто цвета.

Таким образом ваш пост несет мало полезной информации и может даже вред нанести новичкам, т.к. они просто бездумно скопируют ваш код.

[f0rmat1k]

Насколько я знаю, свойство -o-box-shadow ни к чему, опера сразу, как только стала поддерживать тени блоков, начала с нативного свойства без префиксов.