최소화된 검색창

http://css.wikidot.com/cssnippet:minimized-search-bar

/* Minimalized Search Bar
Developed by the Wikidot Community */
 
@media (max-width: 479px) {
    #search-top-box input.btn {
        display: none;
    }
    #search-top-box input.text {
        position: absolute;
        right: 0;
        height: 20px;
        width: 24px;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0);
        box-shadow: none;
        padding: 2px 0;
        color: rgba(51, 51, 51, 0);
        transition: width .5s, color .5s, background .5s;
        cursor: pointer;
    }
    #search-top-box-input {
        margin: 0;
    }
    #search-top-box form {
        width: 24px;
        height: 28px;
    }
    #search-top-box form:hover input.text {
        background: rgba(0, 0, 0, .188);
        border-color: #D7D7D7;
    }
    #search-top-box form:hover input.text:focus {
        background: rgba(255, 255, 255, 1);
    }
    #search-top-box form:focus {
        width: 200px;
    }
    #search-top-box input.text:focus {
        width: 150px;
        padding: 2px 1em;
        color: rgba(51, 51, 51, 1);
        box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, .15) inset;
        border: 1px solid #D7D7D7;
        background: rgba(255, 255, 255, 1);
        cursor: text;
    }
    #search-top-box input.text.empty {
        font-size: 0;
    }
    #search-top-box form:before {
        position: absolute;
        right: 0;
        top: 0;
        font-family: 'FontAwesome', 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 13px;
        content: '';
        width: 2em;
        height: 2em;
        padding: 0;
        color: #ccc;
        text-align: center;
        background-color: #633;
        background: linear-gradient(to bottom, #966, #633, #300);
        border-radius: 14px;
        box-shadow: 0 0 2px rgba(0, 0, 0, .2) inset;
        line-height: 25px;
    }
    #search-top-box-input {
        display: unset !important;
    }
}

리뷰

모바일 웹 디자인에 사용해 볼 만한 스니펫이다. 적용해보면 위치가 안 맞는 건 아쉽지만, 그 정도는 어떻게든 알아서 된다. 응용해보자.


새 댓글 추가