Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 97
Было бы хорошо еще ссылку, где можно взглянуть на это чудо в действии.
Можно посмотреть в оригинале статьи: blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/
Гулять — так гулять! Градиенты через CSS, вместо дополнительных элементов в разметке использовать псевдоклассы :before и :after (Не уверен, правда, что получится).
вот это более впечатляет
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html
CSS Gradient Dropdown Menu
Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)
www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html
отличное демо возможностей CSS3
раньше для повторения этого меню писали по 400 строчек JS… да и картинок штук 8 прикладывали к этому
раньше для повторения этого меню писали по 400 строчек JS… да и картинок штук 8 прикладывали к этому
А чего тут впечатляющего? Из css3 тут только оформительские штуки, всё остальное доступно с css2.1. При этом оно не работает в IE6 — тогда это точно не достижение, а просто тупое использование :hover на любой элемент.
Поглядите на cssplay.co.uk — вот там действительно полёт инженерной мысли : D
Поглядите на cssplay.co.uk — вот там действительно полёт инженерной мысли : D
с чего это оно должно работать в IE6?
css3 в IE6?
нуну
p.s. кто-то еще тестирует сайты в IE6?
css3 в IE6?
нуну
p.s. кто-то еще тестирует сайты в IE6?
Если внимательно прочитать то, что я написал, то можно увидеть для чего тут используется CSS3, остальное — CSS<=2.1
В IE6 сайты тестируют реалисты
В IE6 сайты тестируют реалисты
Реалисты тестируют минимум в ИЕ7. В ИЕ6 отсталые реалисты тестируют
Никого не хотел обидеть
Привет вам в 2011 году! У нас в 2010, пока что около 10% пользователей с IE6
ололо IE6…
что впечатляющего? то что такое
что впечатляющего? то что такое
css3 это конечно здорово, если бы его можно было использовать уже сейчас, а пока ситуация такова: habrahabr.ru/linker/go/88870/ это нереально ((
Надо быть оптимистом, Chrome и Safari очень даже ничего так с поддержкой CSS3. Также неплохи в этом плане и FireFox с Opera. Я думаю, что если разработчики и некоторые крупные проекты все-таки начнут больше использовать CSS3, то ситуация с IE тут же изменится. Либо начнется еще больший отток пользователь от этого браузера. Google не спит, и если все «сочности» и «красивости» появятся на гугле и других ресурсах, конечный пользователь увидит весь сок и выяснит что ему поставить, чтобы у него было также ;)
С предложением быть оптимистом, я полностью согласен ;) А вот про пользователей… жаль, но многим главное, что бы «работало», при этом предложение обновить их браузер с ИЕ6 на более новый встречаются в штыки, я даже и не говорю про установку Opera, FireFox или Chrome ) Так же множество людей, на работе используют старое железо, старые ОС, и старые браузеры… годами не обновляющиеся, тут опять таки, лид бы «работало»… это все печально, но реально.
Часто общаюсь с людьми, которые заказывали у нас сайт или нет, но так как основная сфера работы именно разработка сайтов и работа с клиентом, то замечал что люди довольно активно готовы перейти на новый, другой браузер, а некоторые очень даже лояльно относятся если я им объясняю что, например, скругленных уголков в IE6 не будет или еще какие тонкости.
Очень рады всяким мелким фишечкам и приблудам и чтобы быстрее работала переходят на адекватные браузеры
Очень рады всяким мелким фишечкам и приблудам и чтобы быстрее работала переходят на адекватные браузеры
Я все чаще использую в своей работе Graceful Degradation. Главное чтобы сайт выглядел достаточно прилично и в ИЕ6, не разваливался там на куски. 90% заказчиков этого достаточно. Ну а продвинутые пользователи увидят свои бонусы.
Новые браузеры показывают куда большую скорость отрисовки. Поэтому вы можете сказать — хотите, чтобы ваш комп быстрее работал, давайте покажу. И поставьте свежий браузер, да сделайте сравнение с ИЕ6.
Особенно «впечатлил» IE8, прогресс с броузерами в Microsoft очевидно, замер, умер
когда уже 1-пиксельные картинки вымрут?
<a class=«button»><b class=«o»><b class=«m»><b>Post</b></b></b></a>
Дальше неинтересно.
Ага, особенно если вспомнить, что ссылка <a> — это не кнопка (не элемент формы <button /> или <input type=«submit» /> ) и использовать ее для отправки данных не верно. Т.к. мы как минимум решаемся возможности средств встроенных в браузер для post/get, без использования JS.
И по Enter'у она не отработает (опять-таки без JS).
Это решается через <noscript>/></noscript>
парсер лох((
Казалось бы, при чем тут
Я хочу нормальную кнопку, а не ссылку, требующую дополнительных усилий по ее внедрению в форму.
Создание реалистичной кнопки средствами CSS3
Я хочу нормальную кнопку, а не ссылку, требующую дополнительных усилий по ее внедрению в форму.
Это похвально, но обычную кнопку стилизовать очень трудно, особенно, во всяких там IE — кромешный ад с паддингами там. Кто сталкивался, тот знает.
А какая связь между кнопкой и формой? Автор обещал телепатическую отправку post запросов?
Кнопка (button или input[type=submit]) изначально предназначена для отправки данных формы. Ссылка нужна для совершенно других целей.
Не спорю, иногда очень красиво смотрятся большие ссылки в виде кнопок, но если я читаю «кнопка» — значит должен быть элемент «кнопка».
Это мое мнение. Про саму реализацию я в первом комменте высказался.
Не спорю, иногда очень красиво смотрятся большие ссылки в виде кнопок, но если я читаю «кнопка» — значит должен быть элемент «кнопка».
Это мое мнение. Про саму реализацию я в первом комменте высказался.
Да конечно, это логически правильно отправлять данные формы через input type=«submit», но смысл парится, если у нас на странице используется тонна JS для всяких там аяксов, при этом повесить отправку данных формы на красиво оформленную ссылку вообще не составит труда. Тем более если кнопка имеет класс button, что позволит легко найти её в коде.
Мое мнение наверное покажется Вам архаичным, но я считаю, что JS должен использоваться только для улучшения работающей страницы. Т.е. все эти финтифлюшки типа отправки комментариев через Ajax, скругленных уголков и прочего, не должны быть во главе угла. Пользователь без JS должен иметь полностью работоспособный сервис.
Тут выше предлагали использовать NOscript, как вариант.
Тут выше предлагали использовать NOscript, как вариант.
То есть Вы как пользователь сайта, когда видите объёмную кнопку, сразу представляете себе как она будет отправлять post запросом на почту какого-нибудь hotbox данные заполненной формы? Как всех Internet Explorer успел изувечить…
кнопка должна быть кнопкой (а не ссылкой)
В угол нажмите)
А кнопка обязательно должна что-то куда-то отправлять? В наш век состоявшегося javascript.
не понял вопрос
По вашему мнению и вы в нём не едины, как видно, кнопка обязательно должна быть input button? Зачем?
Ведь кнопки уже не всегда на формах и далеко не всегда вызывают submit.
Почему при желании кнопкой не сделать любой элемент?
Я сторонник качественной вёрстки, но мне кажется вы слишком ограничиваете рамки.
Ведь кнопки уже не всегда на формах и далеко не всегда вызывают submit.
Почему при желании кнопкой не сделать любой элемент?
Я сторонник качественной вёрстки, но мне кажется вы слишком ограничиваете рамки.
Использую кнопки из jQuery UI и пока доволен.
Вот еще есть демка: torqueo.net/files/pretty-buttons/buttons.html
Правда, на спрайтах, зато работает везде. Хотя, конечно, побыстрее бы уже CSS3 на полную использовать!
Правда, на спрайтах, зато работает везде. Хотя, конечно, побыстрее бы уже CSS3 на полную использовать!
Это нормально, что после нажатия кнопа остается нажатой, пака не нажмешь другую? (Опера 10.52)
Это косячок Оперы. Про Оперу кстати, делал недавно подобные кнопки, только там при наведении появлялась легкая тень вокруг, так вот, в опере тень при наведении — сплошной баг. Халтурно они там поддержку теней сделали.
Это косячок Оперы.Да неужели? А так же фаерфокса? Или, может быть, автор страницы дурак, что повесил одинаковые стили на a.btn:hover и a.btn:focus?
Про пример согласен, там автор не досмотрел, но про остальное, у оперы реально косяк с тенями:
пример
пример
Ну уж не дурак — просто по-недосмотру) Я автор сих кнопок.
Визуальный результат мне нравится, а реализация — просто отстой. Такую же кнопку проще сделать одним спрайтом с одной картинкой, и кода будет меньше, и работать будет именно как кнопка, а не ссылка.
а что тег button отменили? почему ссылку то использовать?
А зачем картинка? Есть же градиенты в Firefox и WebKit.
Я градиенты и использовал и всего один лишний div в вёрстке.
Всё тоже самое делается легко без экстра-разметки, достаточно использовать несколько box-shadow через запятую. Ну и элемент button был бы здесь уместнее.
Как пруф и пример — girliemac.com/sandbox/button.html
Внешний вид, конечно же, другой, но тут важна идея.
Внешний вид, конечно же, другой, но тут важна идея.
Познавательно.
Вот за это я и не люблю CSS!
Ради такой мелочи приходится писать тонну плохо понятных извращений :-(
Ради такой мелочи приходится писать тонну плохо понятных извращений :-(
У одного меня в голове не вязется CSS 3 и тэг b?
Мясо какое-то…
Проще использовать -border-image для этих целей.
Такие элементы отжирают прилично, особенно на мобильных девайсах.
Такие элементы отжирают прилично, особенно на мобильных девайсах.
Хотелось бы в конце статьи видеть список браузеров, в которых это работает.
Если уж CSS3, то зачем у тегов внутри классы? Почему бы не включить картинки внутрь CSS в виде data URI SVG?
Мне вот эта реализация понравилась:
1) www.zurb.com/playground/super-awesome-buttons
2) www.zurb.com/playground/radioactive-buttons
Работает и для button, и для a. CSS3
1) www.zurb.com/playground/super-awesome-buttons
2) www.zurb.com/playground/radioactive-buttons
Работает и для button, и для a. CSS3
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создание реалистичной кнопки средствами CSS3