Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
←   Май 2014   →
 1
 2
 3
03.05.2014
09:05:44
11:05:56
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery


Выдвигающаяся форма поиска на сайт

Стиль Flat обрел немалую популярность при дизайне сайтов. И в этом уроке мы рассмотрим еще один элемент сайта, который сделан в этом стиле. Это элемент — форма поиска. Но не простая форма поиска, а форма поиска которая появляется при нажатии и «сворачивается» если ее не используют. Что касается иконки поиска, то она берется из SVG-файла и является масштабируемой при различных разрешениях экрана(как на мобильных устройствах, так и на больших мониторах).

HTML

Сперва определимся с разметкой, которая будет на HTML странице:

1
2
3
4
5
6
7

<div id="sb-search" class="sb-search">
    <form>
        <input class="sb-search-input" placeholder="Что будет искать?" type="text" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"></span>
    </form>
</div>

В форме поиска ничего необычного нет: текстовое поле для ввода, кнопка поиска и элемент <span> для иконки.

 

CSS

Теперь добавим стилей, чтобы форма поиска красиво смотрелась на странице.

Так как форма поиска будет появляться при клике, то изначально она скрыта. Это делается с помощью свойства overflow и его значением hidden, в результате чего скрывается всё что находится за пределами иконки(в итоге мы видим только иконку, а текстовое поле нет):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 60px;
    height: 60px;
    float: right;
    overflow: hidden;
 
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
 
    -webkit-backface-visibility: hidden;
}

Далее позиционируем текстовое поле для ввода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    background: #fff;
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}
 
input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

Продолжение и пример - в полной новости.
В избранное