tecnologia para o mundo!

  • Home
  • Como estilizar um campo de pesquisa com css
  • Tutorial de CSS

    Como estilizar um campo de pesquisa com css

    Por Magdiel da Silva em 25/jun/2014 - Sem Comentários | 3412 View(s)

    Tags: , ,

    Tutorial de CSS

    Bem vindo a mais um post sobre css. Neste post irei mostrar como você pode estilizar um input, como um campo de busca por exemplo. Isso com certeza fará a diferença no seu blog pois, tornará seus formulários mais amigáveis e atraentes.

    Em sua página, dentro do corpo em HTML crie seus inputs. Um para o campo de texto e outro para o botão.

    <input type="text" value="Pesquisa ..." />
    <input type="button" value="Buscar" />

    Adicione uma classe para ambos os inputs. Essa classe deve ser diferente para cada input pois usaremos uma para estilizar o campo de texto e outra para o botão.


    <input type="text" class="text" x-webkit-speech="" placeholder="Faça sua busca..."  />
    <input type="button" class="btn" value="Buscar" />

    CSS

    Agora vamos começar a estilizar. O primeiro passo é resetar os espaçamento do corpo.


    body {
    margin: 0px;
    padding: 0px;
    }

    Em seguida coloque a classe do campo de texto que você criou anteriormente e já pode definir as bordas, espaçamento interno e externo, largura, altura e background. Faça a estilização de acordo com suas preferências.

    .text{
    width: 30%;
    max-width: 300px;
    padding: 10px 5px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 2px solid #DDD;
    padding-right: 20px;
    float: left;
    }
    Agora faça a estilização no botão.

    .btn {
    color:#fff;
    background-color:#0AF;
    position:absolute;
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 2px solid #0AF;
    padding: 10px;
    float: left;
    cursor: pointer;
    }

    Você ainda pode customizar um pouco mais colocando um hover. Para fazer isso coloca a classe do botão seguida de :hover{} . Vamos inserir uma nova cor de fundo, de bordar e ainda uma transição.

    .btn:hover{
    background: #333;
    border: 2px solid #333;
    -webkit-transition: all 800ms ease;
    -moz-transition: all 800ms ease;
    -ms-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    transition: all 800ms ease;
    }

    E pronto, seu campo de pesquisa já está concluído. Veja como ficou!

    Tutorial input

    Dica: Você pode encontrar efeitos como o de transição no site CSS3Generator.

    Se deseja ver outros posts sobre CSS já publicados aqui no GM Digital clique aqui.

    Postagem seguinte
    Postagem anterior
    avatar

    Magdiel da Silva

    Nascido em 1995, Curioso a respeito de novas tecnologias, Desenvolvedor front-end e wordpress, Tutor, estudante de Ciência da Computação pela Unijuí e dono da empresa Reinvents, GM Digital e Agência Leader.
    facebooktwittergoogle plus

    Nenhum comentário

    Deixe o seu comentário!

    Time limit is exhausted. Please reload the CAPTCHA.