Jump to content

helio

Newbie
  • Posts

    13
  • Joined

  • Last visited

helio's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Пытаюсь реализовать кнопку необычной формы. Проблем с кнопкой не было, до того момента, как встала задача добавить при наведении эффект glow. Вот тут то и вышли проблемы. Сам пример тут. Если кратко то куски кнопки, которые эмулируют скосы отображаются как части, а не как единое целое. При ховер у меня также меняется прозрачность. По кнопке перерыл весь инет, нашел вот это. Но в основном эти реализации либо не работают с бордером, либо поддержка в браузерах малая(clip-path). В общем был бы благодарен за помощь.
  2. В общем послушался и изменил верстку. Пример взял отсюда и подкорректировал под мой случай: <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;}
  3. У меня есть форма. Так вот во всех браузерах на десктопе отображается отлично. Сайт отзывчивый и используются медиа-запросы. Так вот на некоторых мобильных устройствах инпуты отображаются не так, как задумано. А именно высота больше чем нужно. Например, на 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;}
  4. Действительно работает, правда когда задаешь для хрома толщину больше чем 1px, эта тень становится видна.
  5. У меня есть форма, к полям которой применяется 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.
  6. http://htmlbook.ru/css/background-size пробовал, но у меня после этого картинки исчезают
  7. Вы просто не умеете их готовить. http://jsfiddle.net/bhhkj/2/ А как в таком случае выравнять по нижнему краю. Я применяю vertical-align: bottom к li, но ничего не происходит. Задавал также display:inline-block, не помогло. И на будущее, вообще этот случай решить при помощи св-ва background, вместо использования тега img возможно?
  8. спасибо то что нужно. Но вся проблема в том, как я писал выше нужно тоже самое только через св-во background, а не через тег img. Мне нужно при hover менять на другую картинку, поэтому данный вариант не подходит.
  9. У меня есть меню навигации, где вместо текста, используются лого. Так вот я хочу сделать так, чтобы при уменьшении размера браузера логотипы тоже меняли размер, вместо того чтобы выпадать с меню. Т.е. тоже поведение, что бывает когда задаешь картинке max-width: 100%. Но как это можно сделать через св-во background? Вот пример, того как выглядит меню. P.S. Просьба не спрашивать почему вместо тега <img>, добавляю изображения через тег <a>. Так надо было.
  10. Если бы в firefox работало, то можно была забить на ie. А эта либа не поможет?
  11. Спасибо за помощь. Правда с цветами вы перепутали наоборот. Только этот вариант не работает в ie, firefox. Там фильтры до сих пор не поддерживается. Есть ли какой-то хак для этих браузеров.
  12. У меня есть узор, который используется в кач-ве бекграунда. Так вот есть секции, которые имеют другой цвет. Можно ли как-то сделать так, чтобы узор шел цельным и были разные цвета, ромбиков, так и дивов. Я пытался поставить поверх див с белым цветом, но он полностью закрывает узор. Если делать див с прозрачностью, то это уже не абсолютно белый цвет(0xffffff) получается. Вот скриншот с макета в фотошопе. А вот кусок css body { background: url('../img/bg.png') #000;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy