|
0 Всего найдено: 36
pelipas
Сообщение
11/02/2012 22:13
Копия темы
браузрерного рисования пост эти стили слишком расширяли блоги и они ломались, поэтому пока закомментил--> Господа верстальщики, я слегка отстал от технологии, скажите плз, можно ли такую кнопочку в точности повторить с помощью css без картинок вообще? Т.е есть ли у css такие же свойства, как в фотошопе? Знаю нечто похожее есть, но вот интересно прям чтоб в точности повторить кнопочку.
Проблемы с браузерами? или уже все ровно?
unart
Сообщение
11/02/2012 22:19
Копия темы
в точности нет. Ишаки офигеют. Нормальные браузеры поймут. Чтобы не страдать излишками кода откройте, допустим, это – и посмотрите что и как и почему сяк.
pelipas
Сообщение
11/02/2012 22:32
Копия темы
а в чем с ИЕ будут основные проблемы (я на маке не могу протестить в нем) с закруглениями? или еще и градиенты непоймет?
unart
Сообщение
11/02/2012 22:35
Копия темы
и с уголками, с тенями и с градиентами у него будет полный абзац. Вылечить, конечно, можно, но через svg подложки (читаем CSS3PIE .js). Делая так и без того кастрированный Ослик хромает, но после такого он просто в шоке. Иначе говоря рендеринг страницы займет в пару-тройку раз больше/дольше.
trushka
Сообщение
12/02/2012 01:25
Копия темы
9-й, кажется, только градиентов не воспринимает, но можно использовать filter:gradient. А можно и pie использовать, вполне сносно себя ведёт, даже на динамических страницах в IE<9. Pie лучше максимально последний использовать, чтоб в ие9 делал только то, чего браузер не может. Вот пример, правда с 2-мя элементами, прекрасно работает даже в ие6 на машинке прошлого века: а вот без всяких костылей, (в ие 8 и меньше не смотреть:) – верхняя тарелка – несколько вложенных div'ов с бордерами, нижняя – полностью с помощью box-shadow.. Хотя, в ИЕ таки есть нюанс, насколько я понимаю: если задано размытие тени, оно происходит больше внутрь её – белый ободочек на нижней тарелке в ие явно шире, чем в других браузерах. А на верхней вообще почему-то съехал, хотя никто его об этом не просил)) Это я для знакомой, для постинга в жж программы арт-кафе решил сделать.. Поскольку опыта работы с HTML намного больше, чем с графическими редакторами, решил, пусть браузеры сами рисуют))
trushka
Сообщение
12/02/2012 01:37
Копия темы
кстати, для тестинга в ИЕ есть очень хорошая штука: Правда, как раз с CSS3PIE не очень дружит: на некоторых страницах вообще не показывает правильно, на некорорых – только при определённой позиции окна (высоте прокрутки), причём для каждой версии ИЕ индивидуально А ещё есть вот такая штука: , правда, только ИЕ7 показывает
trushka
Сообщение
12/02/2012 02:00
Копия темы
Шо-то там нет нормальных стилей без всяких -moz- и -webkit-, а тот же ИЕ9 и, кстати, намногно более продвинутая Opera, и последние версии webkit- и gecko-браузеров как раз обычные "безприставочные" свойства воспринимают, кроме всяких там, разве что, трансформаций, но там тоже бывают -ms- и -o-transform, например.. Равно как и -o-linear-gradient, например..
unart
Сообщение
12/02/2012 02:27
Копия темы
оно то все рендерится. и с filter и с PIE, но эти бедные ослики начинают тихо помирать. Собственно многие костыли и базируются на свойстве "filter", но они ужасно (при большом числе их вызовов) тормозят рендер. Я давно уже использую так называемый graceful degradation, но если заказчику горит 100% идентичность под великую шнягу, то я просто потом через js довешиваю на <body> глобальный класс и добавляю через js нужное число дивов для создания классического 4х элементного способа закругления уголков.
trushka
Сообщение
12/02/2012 03:21
Копия темы
Ну, вот я недавно прикручивал pie к сайту , так я особо не заметил разницу в скорости отображения с pie и без него – там и так столько всякой фигни, что pie на её фоне как-то теряется)) Кстати, css-тени, по крайней мере с размытыми краями тоже так вот заметно подгружают нормальные браузеры, равно как и трансформации. А pie использует в основном vml, и если не надо отображать размытые тени, то довольно быстро работает. Тем более, там есть такая штука, что оно рисует только для видныхимых элементов и дорисовует для остальных по мере прокрутки страницы.. Но согласен, особо стараться угождать ословодам лучше не надо, ато на голову сядут.. Вернее, слезут оттуда очень не скоро))
trushka
Сообщение
12/02/2012 04:00
Копия темы
Просто возможность сделать фронт-энд сайта прямо в браузере))
JohnRight
Сообщение
12/02/2012 08:04
Копия темы
Ничего личного. "Когда дизайнеру не хватает мастерства, он стилизует инпуты и применяет нестандартные шрифты" Эпиграф к учебнику по дизайну
pelipas
Сообщение
12/02/2012 13:43
Копия темы
учебник по дизайну?)) видимо из серии как сделать сайт для чайников, 1997г Дизайн это настолько изменчивая среда что ни один учебник в серьез я бы не стал воспринимать. Раньше еще писали в таких учебниках, что новички в дизайне всегда используют крупный шрифт на заголовках, только вот теперь это стало в моде. Сейчас в тренде подобные кнопочки и интерфейсы в стиле приложений айфоновских, как раз со стилизованными импутами и т.д., так что высказывание это не в тему.
pelipas
Сообщение
12/02/2012 13:45
Копия темы
для сайта визитки можно и картинкой, но для многопользовательского сервиса, да еще и где подобных кнопочек куча, лишние запросы к серверу никчему. Проще создать 1 раз css стиль и вешать на всякие кнопочки.
pelipas
Сообщение
12/02/2012 13:47
Копия темы
не совсем похоже, но вижу все свойства применены, значит можно довести до нужного примера. спасибо)
JohnRight
Сообщение
12/02/2012 13:51
Копия темы
Смысл этого выражения не так буквален как кажется. Эпиграф пытается донести мысль о том, что при разработке, именно разработке а не рисовании, дизайна для сайта, необходимо учитывать тот факт, что набор разработчика ограничен определенным кругом правил и элементов, и виртуозный мастер, или хотя бы мастер, используя эти элементы в пределах правил, создает нечто оригинальное и гарантированно работоспособное. Те, же, кто не в состоянии уложиться в рамки, по сути не дизайнеры а рисовальщики, которые выдают красивые картинки за разработанные дизайны.
pelipas
Сообщение
12/02/2012 14:00
Копия темы
Зачем себя ограничивать, когда все возможности есть для того чтобы не? Можно конечно сделать сайт на белом фоне, черным таймс-нью-роман, и стандартные кнопочки, но зачем? Задача дизайна зачастую не только сделать удобно, но еще и подчеркнуть индивидуальный стиль. И такая задача стоит у дизайнера в 98% случаев, тогда стандартных браузерных кнопочек не хватает. Сейчас даже серьезные организации типа банков хотят чтоб все было красиво В этих ребятах по поводу дизайна я не сомневаюсь)
JohnRight
Сообщение
12/02/2012 14:08
Копия темы
Вот сайт , на котором люди действительно занимаются серьезными вещами (посмотрите на суммы). Дизайн не менялся уже лет 5, а может и больше.
pelipas
Сообщение
12/02/2012 14:12
Копия темы
Задача не всегда стоит сменить дизайн сайта. Бывают еще и компании которые только собираются его открыть. В общем к чему этот спор? Вы агитируете за то, что стилизовать стандартные импуты не надо? я вас услышал, но остался при своем мнении.
JohnRight
Сообщение
12/02/2012 14:15
Копия темы
Я не агитирую, я голосую рублем. Дизайнера, который не может сделать приемлемое оформление сайта без использования всяких вывертов и неоднозначно работающих элементов, я бы просто не нанял.
JohnRight
Сообщение
12/02/2012 14:36
Копия темы
Сработало только в хроме. И если работоспособность коснулась только внешнего вида, то еще и беда не большая, разве, что заказчику деньги на ветер, он тупо оплатит нереализованные амбиции разработчиков. А вот если еще и функционал при этом пострадает... когда сайт про кошечек, то и беда не велика, а вот когда дело касается денег... Наверное поэтому и столь консервативны сайты, на которых занимаются делом. Привожу скрины четырех браузеров. Хром – работает Мозилла – нет Опера – не загрузился сайт на котором показывают пример. IE – нет Вопрос, стоит ли приложенных усилий кнопка, которая правильно отображается в одном браузере.
pelipas
Сообщение
12/02/2012 15:17
Копия темы
странно, у меня в фф, хроме и сафари все одинаково. Впрочем думаю это все решаемо, даже если в ие кнопка будет квадратной, она от этого не станет хуже нажиматься.
trushka
Сообщение
12/02/2012 20:47
Копия темы
в том то и дело, чтоб стилизовать, но при этом всё нормально функционировало.. А это вполне возможно, только подумать немного надо.. Ну, разве что ИЕ7- не покажет то, что хочется, ну и вобщем этот самый с ним..))
trushka
Сообщение
13/02/2012 00:43
Копия темы
то, что в опере не загрузилось – просто jsfiddle, я так понимаю, довольно нагруженный ресурс, это просто не загрузилось и в каждом браузере есть волшебная кнопочка "обновить")) А FF у Вас весьма древне, судя по скину, автор кнопки не посчитал нужным указать -moz-border-radius и -moz-box-shadow. Ну, и ИЕ у Вас скорей всего 8-й и без костылей никак... А я вот доработал до более кроссбраузерного варианта – работает даже в 10-й опере и в ИЕ9 (хотя последний тени чуть меньше растягивает, чем остальные): – здесь для градиента используется svg-background (кстати можно использовать, я вот как-то допилил одну штуку: градиент-генератор – нужно было, а исходная версия не смотря на заявленную кроссбраузернось, работала с ошибками) Тут вот у меня ИЕ нормального нет, проверял через , оно тоже не сразу загружает нормальный скриншот, иногда не успевает прорисовать все тени-градиенты на кнопке, надо, может, несколько раз на 'render' нажать, чтоб увидеть, то, что на картинке
JohnRight
Сообщение
13/02/2012 07:46
Копия темы
Все это прекрасно в клубе "Нарисуй изврат, озадач версталу". А в жизни так как на скринах, работает в одном случае из четырех... Или сразу первой строкой на сайте писать, Ваш пост, и стили не дописаны, и бразуер не тот, и обновить страницу не мешало бы... На действительно коммерческом сайте это просто неприемлемо. Каждый заход на серьезный сайт, это вероятность получения "золотого клиента", и никто не знает на каком браузере он туда заедет. А подобное стремительно приближает к нулю получение этих самых клиентов. Мне известен случай, когда владелец сайта выдвинул иск разработчику за упущенную выгоду именно из-за неработающего интерфейса. А не работал он потому, что был сделан красиво, но бестолково.
trushka
Сообщение
13/02/2012 13:20
Копия темы
обновить страницу – для отображения сайта демо-платформы, она не предназначена для размещения коммерческих сайтов, но эти свойства работают не зависимо от того, откуда страница загружена:).. Равно как и через netrenderer, который не всегда полностью рендерит, никто, кроме верстальщиков и других сайтостроителей, по какой-то причине не имеющих желаемой венрсии ИЕ у себя на компе, смотреть не будет.. Поскольку у Вас, судя по скриншоту, ИЕ ещё не девятый, то я и даю ссылку на netrenderer, который показывает, что покажет 9-й, хоть и не всегда сразу.. А вот, например в ИЕ 5.5 тоже большинство современных сайтов, как минимум, поплывёт (не говоря уже о более ранних версиях), но из этого никто не делает трагедию.. Поэтому, мне кажется, и сильно переживать о квадратности кнопки в ИЕ8 и меньше, тоже уже не стоит. Хотя саогласен, такая кнопка в итоге довольно таки громоздко получается, но можно сделать практически то же самое, используя только box-shadow, при этом даже span внутрь пихать не нужно (хотя и в данном случае, можно было бы несколько бэкграундов применить к однлому элементу, было бы ещё соответственнее, так сказать, сути вопроса), может, будет возможность, выложу.. Там по идее кода раза в 3 меньше, как минимум, будет, а эффект практически тот же. Просто тут показано, как реализовать конкретные графические прибамбасы максимально кроссбраузерно
trushka
Сообщение
13/02/2012 13:40
Копия темы
И вообще, бестолково можно ибез всяких новшеств сделать.. Хотя бы здесь, столько прооектов, что в каком-то браузере сайт "едет" и нужно поправить, хотя там ничего нестандартного нету.. Если ручки кривые, то и картинку можно криво вставить
rabbitwindfall
Сообщение
13/02/2012 16:50
Копия темы
Рассказываю значит, что делать можно. Закодируйте картинку на главной странице в какой-либо скрытый div через base64 и через javascript туда всегда обращайтесь в рамках страницы. Но что тут страница будет всегда получает генерируемый файл, что каждый раз css будет загружаться с домена – разницы нет вообще. А по-этому ничего не сдерживает размещать png который будет занимать 3-5 килобайт
pelipas
Сообщение
13/02/2012 23:16
Копия темы
0
фри-ланц.ру тоже по-вашему на действительно "коммерческий сайт" не тянет? |
|
Выразить восторг, поругаться или предложить что-нибудь можно на форуме |
Для обсуждения этого сервиса так же есть темы на фрилансе по поиску , флудотопу ,и по удалённым сообщениям ,и по Актуальным/популярным темам , и по топу "кто кому больше наотвечал" |