Рамка с эффектом

Тема в разделе "Верстка", создана пользователем erik87, 12 ноя 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. erik87

    erik87

    Регистр.:
    30 сен 2008
    Сообщения:
    205
    Симпатии:
    10
    Как сделать, чтобы при клике на input появлялась рамка с эффектом как на рисунке ниже.

    Спасибо
     

    Вложения:

  2. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    bootstrap, как подробней объяснить даже не знаю
     
  3. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.403
    Симпатии:
    1.183
    Жжешь, bootstrap это набор инструментов для вёрстки с нуля или по крайней мере многих элементов.

    Для смены рамки при наведении курсора использую псевдокласс hover http://htmlbook.ru/css/hover
    Пример:
    HTML:
    
    div.search  input:hover{
    border:1px solid #74b9ef;
    }
    
    div.search меняйте на свои пути.
     
    erik87 нравится это.
  4. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    именно этот эффект и вид интерфейса используется в bootstrap. хотя конечно я о нём знаю лишь по joomla 3(да я и не верстальщик:oops: , просто 'каждой бочке затычка'), но там везде именно так(целиком как на скрине) всё выглядит. это точно bootstrap:)
    Вот оно(тыц) во вложении:yahoo:. Люблю сумничать там, где я дуб-дубом)
    Такая фигня этот бутстрап на деле оказалась.
     

    Вложения:

    erik87 нравится это.
  5. mdrive

    mdrive Создатель

    Регистр.:
    10 янв 2009
    Сообщения:
    10
    Симпатии:
    6
  6. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Ну во-первых bootstrap так-себе. А во-вторых что-то я там анимации появления не увидел как на bootstrap. Для этого явно надо JS подключать
     
  7. stylebig

    stylebig Создатель

    Регистр.:
    12 янв 2013
    Сообщения:
    33
    Симпатии:
    7
    Вот мой готовый пример, который я обычно использую.

    Код:
    <style>
    input {
    position: relative;
    width: 250px;
    font-size: 17px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: normal;
    background: #f7f8f8;
    color: #7c7c7c;
    line-height: 1.4;
    padding: 6px 12px;
    outline: none;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    border: 1px solid #ad9c9c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
    }
     
    input:focus {
    border-color: #930;
    background: #fff;
    color: #5d5d5d;
    box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
    -moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
    -webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
    }
    </style>
     
    <input id="s" type="text">
     
  8. Guyri

    Guyri Создатель

    Регистр.:
    9 апр 2009
    Сообщения:
    40
    Симпатии:
    11
    Держите точный код из бустрапа, действует на стандарты input(какие думаю заметите)

    А вы ребят на предлагали весь набор, но не того

    Код:
    <style>
    textarea:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="color"]:focus,
    .uneditable-input:focus {
      border-color: rgba(82, 168, 236, 0.8);
      outline: 0;
      outline: thin dotted \9;
      /* IE6-9 */
     
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    </style>
     
    funnywheel нравится это.
  9. gerasimov.nikita

    gerasimov.nikita Писатель

    Регистр.:
    4 ноя 2012
    Сообщения:
    8
    Симпатии:
    1
    Просто для input:active{} назначаете стиль.
    Конкретно в данном случае цвет границы и box-shadow.
     
  10. kuzmit42

    kuzmit42 Постоялец

    Регистр.:
    9 янв 2013
    Сообщения:
    131
    Симпатии:
    31
    Какой смысл вообще делать с помощью его сайты ?
    Куча лишнего кода и скриптов, к примеру возьмем шаблоны Joomla от студий. только библиотеки mootools, jquery = 200кб. +куча скриптов вспомогательных +bootstrap
    Одна страница будет весить по 1мб. И это без графики.
    В чем смысл такого счастья.
    Имхо верстку нужно делать самому и без использования всякой ненужной фигни. которая только нагружает сайт. по одному файлу .html, .css, .js
    И будет весить 100кб.
    Разница как вы понимаете существенная. Если конечно не нужно чтобы сайт сиял всякими всплывающими шнягами - как новогодняя елка :)