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;}

Работает http://jsfiddle.net/npofopr/3k9VP/

Смотрите в фаербаге детальнее. 

Действительно работает, правда когда задаешь для хрома толщину больше чем 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; }

 

И на будущее, вообще этот случай решить при помощи св-ва background, вместо использования тега img возможно?

http://htmlbook.ru/css/background-size

пробовал, но у меня после этого картинки исчезают

 

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

Вы просто не умеете их готовить.

http://jsfiddle.net/bhhkj/2/

 

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

http://jsfiddle.net/bhhkj/1/

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

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

P.S. Просьба не спрашивать почему вместо тега <img>, добавляю изображения через тег <a>. Так надо было.

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

Надо изменить прозрачность самой картинки, а в Chromium OS без Flash Player это сделать у меня не получилось.

http://jsfiddle.net/xwRF2/1/

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

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

Так вот есть секции, которые имеют другой цвет. Можно ли как-то сделать так, чтобы узор шел цельным и были разные цвета, ромбиков, так и дивов. Я пытался поставить поверх див с белым цветом, но он полностью закрывает узор. Если делать див с прозрачностью, то это уже не абсолютно белый цвет(0xffffff) получается. Вот скриншот с макета в фотошопе.

А вот кусок css

body {    background: url('../img/bg.png') #000;}