lev99

Не пойму на все поля работает CSS, а одно поле почему то было не охвачено, проверил вроде всё идентично, помогите? <div class="focus-example cont1" style="text-align: center;"> <input id="liqpay-pay-1" class="liqpay-pay-1" readonly="readonly" value="10" size="3" original-title="Введите сумму"> <span class="letter">UAH - ₴</span> <input type="hidden" value="" name="operation_xml"> <input type="hidden" value="HRu+rVD+RN9RTDC1R3nN7t+lS2w=" name="signature"> </div> <div class="focus-example cont1" style="text-align: center;"> <input id="rupay-pay-1" class="rupay-pay-1" type="text" value="10" size="3" name="recipientAmount" original-title="Введите сумму"> <span class="letter">руб.</span> <input type="hidden" value="0000000" name="eshopId"> <input type="hidden" value="0000000" name="orderId"> <input type="hidden" value="0000000" name="serviceName"> <input type="hidden" value="000" name="recipientCurrency"> <input type="hidden" value="000000" name="serviceName"> <input type="hidden" value="0000" name="eshopAccount"> <input type="hidden" value="00000" name="successUrl"> </div>

alexriz Уже проверяю, не всё удалось удалить из CSS но вроде всё работает

alexriz Кажись понял Прочёл: http://noteskeeper.ru/553/ Удобный способ для создания градиентного файла

alexriz, Есть вопрос! Допустим я создал кнопку в lllustrator, сохраняя в svg, какие надо настройки делать и надо выберать Adobe SVG или SVG? Кстати попробовал, нет закруглений и теней. Получается всё какбудто загрузил png ромбиком без закруглений...? klierik, То что способов куча в этом я не сомневаюсь...

ShumNo Гугл тоже но здесь на форуме картинка. И вроде слышал, что SVG лучше

Николя223 И какую же часть приделать? /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2

Както озадачелся вопросом каким способом лучше создать кнопку из CSS3, c помощью картинки или SVG... В каждом из вариантов есть свои проблемы. Каккой из вариантов, будет более удобней, надёжней в плане отображения и простоы, с недоразветостью браузеров ...? Примеры: .input_submit { background: url("../public/style_images/master/topic_button.png") repeat-x scroll center top #212121; border-color: #212121; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2); color: #FFFFFF; } .pay-button { -moz-box-sizing: border-box; background: linear-gradient(to bottom, #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); color: #FFFFFF; display: inline; font-size: 15px; height: 30px; line-height: 30px; padding: 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); width: 100px; } .selector { background: url(../img/box_bg.svg) no-repeat 0 0 #eee; /* Chrome 25-, Firefox 15-, Opera 12, Safari, IE9, Mobile*/ background: linear-gradient(#fff, #000); /* Chrome 26+, Firefox 16+, Opera 12.1+, IE10+ */ }

Кстати, а здесь на форуме не похожий вариант на SVG? .input_submit { background: url("http://forum.htmlbook.ru/public/style_images/master/topic_button.png") repeat-x scroll center top #212121; border-color: #212121; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2); color: #FFFFFF; } Мне проще картинку найти, подобное вариант видел со шрифтами, кстати есть ссылка где можно почитать и посмотреть?

спасибо, ну наверно удалю, правда svg идея, как-то ещё запутанней, откуда я возьму box_bg.svg Ещё раз спасибо!

Что-то у меня не получилось? <label class="wm-pay-3"> <select id="wm-pay-2" class="wm-pay-2" style="min-width:30px;" title="Выбор валюты" name="LMI_PAYEE_PURSE"> <optgroup label="Выбор"> <option value="R">WMR</option> <option value="Z">WMZ</option> <option value="E">WME</option> <option value="U">WMU</option> <option value="B">WMB</option> </optgroup> </select> </label> select.wm-pay-2 { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ @media screen and (-webkit-min-device-pixel-ratio:0) { select.wm-pay-2 {padding-right:18px} } label.wm-pay-3 {position:relative} label.wm-pay-3:after { content:'<>'; font:11px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:2px; padding:0 0 2px; border-bottom:1px solid #ddd; position:absolute; pointer-events:none; } label.wm-pay-3:before { content:''; right:6px; top:0px; width:20px; height:20px; background:#f8f8f8; position:absolute; pointer-events:none; display:block; }

У меня есть в CSS такая запись: .pay-button { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */ } Возможно ли её записать так: .pay-button { -ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 )"; /* IE8 */ } правда я прочёл , что должны быть в месте .pay-button { -ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 )"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */ } есть вопрос может его вообще удалить? Так как есть уже: background: #00b4f5; /* Old browsers */ background: -moz-linear-gradient(top, #00b4f5 0%, #0096d2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b4f5), color-stop(100%,#0096d2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* IE10+ */ background: linear-gradient(to bottom, #00b4f5 0%,#0096d2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */

не тут, несмог догодаться, я с начала даже не понял amelice и вас не понял, где-то с пятого поста,а потом прочёл про градиент и начал гуглить, нашёл сайт где создал нужный градиент и вставил. - ну полюбому amelice и вам red4pony - спасибо! Кстати вроде и в колор попал! был кусок: background: -moz-linear-gradient(center top , #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; background: #00b4f5; /* Old browsers */ background: -moz-linear-gradient(top, #00b4f5 0%, #0096d2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b4f5), color-stop(100%,#0096d2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* IE10+ */ background: linear-gradient(to bottom, #00b4f5 0%,#0096d2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */ или background: rgb(0,180,245); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,180,245,1) 0%, rgba(0,150,210,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,180,245,1)), color-stop(100%,rgba(0,150,210,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,180,245,1) 0%,rgba(0,150,210,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,180,245,1) 0%,rgba(0,150,210,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,180,245,1) 0%,rgba(0,150,210,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,180,245,1) 0%,rgba(0,150,210,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-9 */ Более сложный но незнаю нужен ли такой (с поддержкой IE9) background: #00b4f5; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjRmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDk2ZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #00b4f5 0%, #0096d2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b4f5), color-stop(100%,#0096d2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b4f5 0%,#0096d2 100%); /* IE10+ */ background: linear-gradient(to bottom, #00b4f5 0%,#0096d2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f5', endColorstr='#0096d2',GradientType=0 ); /* IE6-8 */ <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]-->

Прости я если бы знал как сделал сам и не спрашивал как... Пока остановился на этом background: #87e0fd; /* Old browsers */ background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */ background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

попробовал полностью удалить и так: background: -moz-linear-gradient(center top , #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; background: -moz-linear-gradient(center top , #00B4F5 0%, #0096D2 100%); background: -moz-linear-gradient(top , #00B4F5 0%, #0096D2 100%); не получается Градиент типа такова: background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ Подскажите как ? http://www.colorzilla.com/gradient-editor/

Дело в том, что в мозиле отображается всё нормально а в гуле нет. Помогите решить проблему? Код кнопки: <div class="cont2" align="center"> <input id="wm-pay-button" class="pay-button" type="submit" value="Отправить" alt="Осуществить платеж с Webmoney!" name="wmsubmit"> </div> Css .pay-button { -moz-box-sizing: border-box; background: -moz-linear-gradient(center top , #00B4F5 0%, #0096D2 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); color: #FFFFFF; display: inline; font-size: 15px; height: 30px; line-height: 30px; padding: 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); width: 100px; } .pay-button:hover { background: none repeat scroll 0 0 #00A5E4; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 100, 145, 0.5); } - ещё если возможно, можео исправить для мазилы перекос полей, где "10" и "WMR"?

Great Rash Есть шаблон и есть модуль, движок. В шаблонах прописаны шрифты и размеры, не всегда подходящие для модуля. И чтобы избежать это надо прописать в модуль. Так как я занимаюсь модулем у меня есть скрипт модуля и css модуля, а шаблоны пишут другие. В итоге, чтобы избежать исправление в чужих шаблонах, что приведёт к нежелательным последствиям, проще прописать в модуле. Вроде понятно ответил так что ваш способ мне не подходит. Что касается ссылок, в первой нет примера с class, а во-второй есть, вот такой способ мне подходит. - Более того я разве писал, что мне надо написать css, я просто не знал возможно ли прописать class в input и как это примерно выглядит

Great Rash Возьмём к примеру: <input атрибуты /> об этом можно прочесть: http://htmlbook.ru/html/input Так какой класс вы предлагаете взять? Поискал stackoverflow.com/questions/11603887/css-on-different-input-classes Вроде нашёл похожее <input class="error" type="text" id="normal" name="1" value=""/> ...and CSS: .err { color: #444444; font-size: 10px; width: 180px; height: 18px; padding-left: 5px; outline:none; background-image: url(../images/error.png); } .err input:focus{ color:#f23; font-weight: bold; border: 2px solid #f23; }

Как сделать, чтобы не все поля меняли свой размер, так как в css уже прописан определённый размер и там он устраивает, а в некоторых местах хотелось бы, чтобы он не применялся к некоторым полям и они были бы меньше. И размер шрифта водимый в эти поля не изменялся. Пример поля: <input name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму"/> ... <select name="LMI_PAYEE_PURSE" title="Выбор валюты" style="min-width:30px;"> <optgroup label="Выбор"> <option value="1">WMR</option> <option value="2">WMZ</option> <option value="3">WME</option> <option value="4">WMU</option> <option value="5">WMB</option> </optgroup> </select> <input type="submit" class="button" name="wmsubmit" alt="Осуществить платеж с Webmoney!" value="Отправить"/> Картинка: В принципе надо прописать class, кто знает как?

CSS3 подходит ладно, как сделать закругления, а то у меня получается закругление, но почему то при этом появляется объём

Как сделать, прописать, чтобы отображение полей и кнопок, в других браузерах было, как в Opera <input name="LMI_PAYMENT_AMOUNT" size="3" value="10" title="Введите сумму"/> ... <select name="LMI_PAYEE_PURSE" title="Выбор валюты" style="min-width:30px;"> <optgroup label="Выбор"> <option value="1">WMR</option> <option value="2">WMZ</option> <option value="3">WME</option> <option value="4">WMU</option> <option value="5">WMB</option> </optgroup> </select> <input type="submit" class="button" name="wmsubmit" alt="Осуществить платеж с Webmoney!" value="Отправить"/>

Аа и что? аа, понял width:160px !important; margin: 0 auto; Нет кнопки пускай разъезжаются, на это всё нормально )) Спасибо за margin: 0 auto; уже дописал

Решил установил margin-bottom: 7px;

Ну я там уже наковырял: #amoney .amoney-mod1 { border:0; width:100%; text-align:center; margin-bottom: 8%; } Причём width сжимает а height так и не смог сжать height: 50px; /* Высота блока */ width: 150px; /* Ширина блока */ похоже причина margin-bottom: 8%;

Не я ошибаться могу, сейчас пробую, вот только знать бы где и как ))) Так как вариантов много #amoney .amoney-module #amoney-module или #amoney .amoney-mod1 {