Симуляция Apple.com Поиск с помощью CSS3 переходов - PullRequest
Новая
       16

Симуляция Apple.com Поиск с помощью CSS3 переходов

0 голосов
/ 12 мая 2011

Я пытаюсь воссоздать поле упругого поиска apple.com.У меня это работает, но мое растягивает фоновое изображение, где их швы изящно добавляют к нему без растягивания лупы.Также им удалось перевести один фон в другой.

Вот мой CSS 

#header input {
    background:url(http://www.golfbrowser.com/images/icons/search.png) no-repeat top right;
    padding:2px;
    margin-top:8px;
    margin-right:10px;
    padding-left:18px;
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:12px;
    color:#222;
    border:0px;
    background-color:none;
    float:right;
    width:140px;
    background-size:160px 20px;
}
#header input:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) no-repeat top right;
    transition: width 0.5s, background-size 0.5s, background 0.5s;
    -moz-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -webkit-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -o-transition: width 0.5s, background-size 0.5s, background 0.5s;
    width:180px;
    background-size:200px 20px;
}
#header input:blur {
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
    width:140px;
    background-size:160px 20px;
}

А для реализации смотрите http://www.golfbrowser.com/

Ответы [ 2 ]

0 голосов
/ 31 мая 2012

Я не вижу твоего увеличительного стекла. Это выглядит хорошо для меня в Chrome. Вы получили этот CSS там, где хотели?

Кодовый подход Apple немного отличается от вашего. Они используют JavaScript, чтобы добавить класс "searchmode" к элементу nav, когда окно поиска сфокусировано. Это позволяет им изменять размер / переходить все. Полностью CSS-подход ограничен тем фактом, что псевдоклассы (на самом деле это не CSS-селектор) никогда не будут влиять на родительские элементы или даже братьев и сестер, которые предшествуют выбранному элементу в DOM. Единственное поведенческое различие, которое я вижу, состоит в том, что ваша коробка становится белой при наведении, а коробка яблока остается белой, пока она не выбрана. Я почти уверен, что ты так хотел.

Кстати, вы не можете переходить фоновые изображения, точка. Это включает в себя фоновые градиенты. Это не известная проблема, просто факт спецификации.

0 голосов
/ 15 мая 2011

Цвет фона также можно изменить, если добавить его в список. Что касается фонового изображения, основанного на gecko2.0, оно имеет известную проблему и может передавать только градиентные изображения.

Надеюсь, это поможет:)

...