helio

кроме svg, нет никаких идей?

Пытаюсь реализовать кнопку необычной формы. Проблем с кнопкой не было, до того момента, как встала задача добавить при наведении эффект glow. Вот тут то и вышли проблемы. Сам пример тут. Если кратко то куски кнопки, которые эмулируют скосы отображаются как части, а не как единое целое. При ховер у меня также меняется прозрачность. По кнопке перерыл весь инет, нашел вот это. Но в основном эти реализации либо не работают с бордером, либо поддержка в браузерах малая(clip-path). В общем был бы благодарен за помощь.

В общем послушался и изменил верстку. Пример взял отсюда и подкорректировал под мой случай: <div class="form-container-1"> <p>Закажите</p> <p>бухгалтерское обслуживание</p> <form class="form-1" action="form-1.php" method="post" role="form"> <div class="input-container"> <div class="icon-ph"><i class="fa fa-user"></i></div> <input type="text" name="name" placeholder="ваше имя" onfocus="this.placeholder=''" onblur="this.placeholder='ваше имя'" required> </div> <div class="input-container"> <div class="icon-ph"><i class="fa fa-envelope"></i></div> <input type="email" name="email" placeholder="ваш email" onfocus="this.placeholder=''" onblur="this.placeholder='ваш email'" required> </div> <div class="input-container"> <div class="icon-ph"><i class="fa fa-phone"></i></div> <input type="tel" name="phoneNumber" placeholder="ваш номер" onfocus="this.placeholder=''" onblur="this.placeholder='ваш номер'" required> </div> <div class="input-container"> <div class="icon-ph"><i class="fa fa-file-text-o"></i></div> <input type="text" name="name" placeholder="ваш комментарий" onfocus="this.placeholder=''" onblur="this.placeholder='ваш комментарий'" required> </div> <input type="submit" value="Оставить заявку"> </form></div>.input-container { position:relative;}.icon-ph { display: inline-block; width: auto; height: 43px; min-width: 20px; padding: 6px 12px; font-size: 14px; font-weight: normal; line-height: 43px; text-align: center; background-color: #009aff; position:absolute; z-index:3;}.form-1 input[type="text"],.form-1 input[type="email"],.form-1 input[type="tel"], .form-2 input[type="text"],.form-2 input[type="email"],.form-2 input[type="tel"] { width: 236px; margin: 0 0 0 40px; padding: 16px 6px; background: #dcebff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #6dabff; font-family: 'pf_din_text_comp_promedium', sans-serif; font-size: 1.176em; outline: medium none;}.form-1 input[type="submit"],.form-2 input[type="submit"] { display: block; width: 8.5em; height: 2em; background: #35a7ff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35a7ff), color-stop(100%, #1347a1)); background: -webkit-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -moz-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -ms-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -o-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: linear-gradient(to bottom, #35a7ff 0%, #1347a1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35a7ff', endColorstr='#1347a1', GradientType=0); border: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); -moz-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); color: #fff; cursor: pointer; font-family: 'pf_din_text_cond_promedium', sans-serif; font-size: 1.5em; text-decoration: none; text-transform: uppercase; margin: .7em auto 0 auto;}

У меня есть форма. Так вот во всех браузерах на десктопе отображается отлично. Сайт отзывчивый и используются медиа-запросы. Так вот на некоторых мобильных устройствах инпуты отображаются не так, как задумано. А именно высота больше чем нужно. Например, на iOS устройствах наблюдается такое. На андроидах тестировал всего лишь на нескольких устойствах и там все нормально. Способа указать файл стилей только лишь для iOS устройств как я понял из поиска нет. Если задаю <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel= "stylesheet" href="static/css/mobile.css" media="handheld,only screen and (max-device-width:768px)"/>то файл mobile.css сработает, как для iOS, так и для андроида, и инпуты в iOS будут отображаться нормально, но аналогичная проблема появится в андроиде. Если какой-то выход из этой ситуации? Пробовал задавать высоту и ширину в пикселях, в em-ах, ничего не изменяется. Вот скрины, слева iPad, а справа обычный комп Здесь выложу код, т.к. не удалось сделать рабочий пример на jsfiddle верстка вся разваливается. <div class="form-container-1"> <p>Закажите</p> <p>бухгалтерское обслуживание</p> <form class="form-1" action="form-1.php" method="post" role="form"> <ul> <li><i class="fa fa-user"></i></li> <li><i class="fa fa-envelope"></i></li> <li><i class="fa fa-phone"></i></li> <li><i class="fa fa-file-text-o"></i></li> </ul> <input type="text" name="name" placeholder="ваше имя" onfocus="this.placeholder=''" onblur="this.placeholder='ваше имя'" required> <input type="email" name="email" placeholder="ваш email" onfocus="this.placeholder=''" onblur="this.placeholder='ваш email'" required> <input type="tel" name="phoneNumber" placeholder="ваш номер" onfocus="this.placeholder=''" onblur="this.placeholder='ваш номер'" required> <input type="text" name="name" placeholder="ваш комментарий" onfocus="this.placeholder=''" onblur="this.placeholder='ваш комментарий'" required> <input type="submit" value="Оставить заявку"> </form></div>.form-container-1 { float: right; background: #fff; border: 1px solid #e6e7e9; width: 18em; height: 22.5em; margin-top: 2em;}.form-container-1 p { color: #164194; font-family: 'pf_din_text_cond_promedium', sans-serif; font-size: 1.425em; text-align: center;}.form-container-1 p:first-child { font-size: 2.4375em; line-height: 1.1em;}.form-container-1 p:not(:first-child) { margin-bottom: .6em;}.form-1 input { border: none; padding-left: 2px;}.form-1 input[type="text"],.form-1 input[type="email"],.form-1 input[type="tel"] { width: 236px; height: 46px; background: #dcebff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #6dabff; font-family: 'pf_din_text_comp_promedium', sans-serif; font-size: 1.176em; outline: medium none;}.form-1 input[type="submit"] { display: block; width: 8.5em; height: 2em; background: #35a7ff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35a7ff), color-stop(100%, #1347a1)); background: -webkit-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -moz-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -ms-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: -o-linear-gradient(top, #35a7ff 0%, #1347a1 100%); background: linear-gradient(to bottom, #35a7ff 0%, #1347a1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35a7ff', endColorstr='#1347a1', GradientType=0); border: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); -moz-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7); color: #fff; cursor: pointer; font-family: 'pf_din_text_cond_promedium', sans-serif; font-size: 1.5em; text-decoration: none; text-transform: uppercase; margin: 1em auto 0 auto;}.form-1 ul { float: left;}.form-1 ul li { display: block; background: #009aff; width: 3em; height: 3em; text-align: center; line-height: 3.125em;}.fa { color: #fff; font-size: 1em; text-align: center;}

Действительно работает, правда когда задаешь для хрома толщину больше чем 1px, эта тень становится видна.

У меня есть форма, к полям которой применяется box-shadow. Так вот во всех браузерах, кроме Chrome, это св-во работает. Версия Chrome: 35.0.1916.153 form-1 input[type="text"] { width: 240px; height: 46px; background: #dcebff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7); border: none; color: #6dabff; font-family: 'pf_din_text_comp_promedium', sans-serif; font-size: 1.176em; outline: medium none; padding-left: 2px; } слева - Chrome, справа - Firefox.

http://htmlbook.ru/css/background-size пробовал, но у меня после этого картинки исчезают

Вы просто не умеете их готовить. http://jsfiddle.net/bhhkj/2/ А как в таком случае выравнять по нижнему краю. Я применяю vertical-align: bottom к li, но ничего не происходит. Задавал также display:inline-block, не помогло. И на будущее, вообще этот случай решить при помощи св-ва background, вместо использования тега img возможно?

спасибо то что нужно. Но вся проблема в том, как я писал выше нужно тоже самое только через св-во background, а не через тег img. Мне нужно при hover менять на другую картинку, поэтому данный вариант не подходит.

У меня есть меню навигации, где вместо текста, используются лого. Так вот я хочу сделать так, чтобы при уменьшении размера браузера логотипы тоже меняли размер, вместо того чтобы выпадать с меню. Т.е. тоже поведение, что бывает когда задаешь картинке max-width: 100%. Но как это можно сделать через св-во background? Вот пример, того как выглядит меню. P.S. Просьба не спрашивать почему вместо тега <img>, добавляю изображения через тег <a>. Так надо было.

Если бы в firefox работало, то можно была забить на ie. А эта либа не поможет?

Спасибо за помощь. Правда с цветами вы перепутали наоборот. Только этот вариант не работает в ie, firefox. Там фильтры до сих пор не поддерживается. Есть ли какой-то хак для этих браузеров.

У меня есть узор, который используется в кач-ве бекграунда. Так вот есть секции, которые имеют другой цвет. Можно ли как-то сделать так, чтобы узор шел цельным и были разные цвета, ромбиков, так и дивов. Я пытался поставить поверх див с белым цветом, но он полностью закрывает узор. Если делать див с прозрачностью, то это уже не абсолютно белый цвет(0xffffff) получается. Вот скриншот с макета в фотошопе. А вот кусок css body { background: url('../img/bg.png') #000;}