Criando uma caixa de pesquisa Rocking CSS3
CSS3 é a linguagem de folha de estilo da próxima geração. Ele apresenta vários recursos novos e empolgantes, como sombras, animações, transições, raio de borda, etc. Embora as especificações ainda não tenham sido finalizadas, muitos fabricantes de navegadores já começaram a oferecer suporte a muitos dos novos recursos.
Neste tutorial, vamos explorar alguns desses recursos como text-shadow, raio de borda, caixa-sombras e transições para criar um campo de pesquisa de balanço.
A versão do photoshop deste campo de pesquisa foi criada por Alvin Thong e pode ser baixada aqui. Eu tentei recriar esse campo de pesquisa usando CSS3 puro. É de notar que nem todos os navegadores suportam recursos CSS3 e para experimentar este tutorial, você deve usar um dos navegadores modernos que suportam recursos do CSS 3.
Pronto? Vamos começar!
1. Documento HTML5
Vamos começar com a marcação HTML. É muito simples, depois do Doctype HTML5 e o declaração, nós temos um com um ID chamado #embrulho dentro . Isso é feito simplesmente para definir a largura da caixa de conteúdo e alinhá-la ao centro da página..
Isto é seguido por um Veja como o código se parece: Para criar a caixa grande em volta do formulário, adicionaremos estilos ao O importante pedaço de código aqui é o Explicação: Aqui, a inserção da palavra-chave especifica se a sombra estará dentro da caixa. Os dois primeiros zeros indicam o deslocamento xeo deslocamento yeo 3px indica o desfoque. Em seguida é a declaração de cores. Eu usei valores de rgba aqui; rgba significa azul verde vermelho e alfa (opacidade). Assim, os 4 valores dentro dos parênteses indicam a quantidade de vermelho, verde, azul e seu alfa (opacidade). Você notará que 5 conjuntos de declarações de sombra foram agrupados. Isso pode ser feito separando-os com uma vírgula. As duas primeiras sombras definem o efeito "brilho interior" branco e as declarações seguintes dão à caixa o seu aspecto sólido / robusto. Brinque com esses valores para entender como funciona. Agora que a caixa está completa, vamos seguir para estilizar o campo de entrada. Os estilos declarados para o campo de entrada são bem parecidos com os que foram decalados para a caixa grande Explicação: Você notará que, desta vez, o desfoque de sombra foi mantido em 0 para obter uma sombra nítida e um deslocamento vertical de 5 px é usado. Nas declarações sucessivas, o desfoque foi mantido a 0 px, mas a cor e o deslocamento y foram alterados. Mais uma vez, brincar com esses valores para obter resultados diferentes. Vamos estilizar o botão de pesquisa. Além das cores, o botão de pesquisa tem basicamente os mesmos estilos da caixa externa. Raios de borda e box-shadows semelhantes foram usados no botão. O novo recurso introduzido é o Explicação: No O estado ativo do botão tem um pouco mais de alterações. Neste, eu dei ao botão uma posição absoluta e um valor 'top' de 5px. Isso foi feito para dar uma aparência mais natural, de modo que parece que o botão foi realmente reduzido por 5 pixels. Outras alterações no estado ativo são a cor de fundo e as sombras. Observe que reduzi o deslocamento y das sombras para dar uma aparência 'pressionada'. Aqui está o código para o estado ativo do botão de envio: Isso conclui nosso campo de pesquisa. Nós usamos alguns dos novos recursos do CSS3. Aqui está o CSS completo e HTML deste campo de pesquisa. Espero que tenha gostado desse tutorial. Fique à vontade para experimentar esses recursos e não se esqueça de compartilhar seus pensamentos. Nota do editor: Este post foi escrito por Bharani M para Hongkiat.com. Bharani é designer / desenvolvedor de Nova Delhi, Índia.#a Principal. Esse ID contém os estilos que definem a grande caixa branca ao redor do campo de entrada e o botão de pesquisa. este declarado dentro dele. O formulário tem o campo de entrada de texto e osbotão de busca. Aqui está como o formulário se parece sem nenhum estilo aplicado a ele: 
Campo de pesquisa CSS3
2. Criando a caixa delimitadora
#a Principal. A partir do código mostrado abaixo, você vai notar que a caixa foi dada uma largura de 400px e uma altura de 50px. #main width: 400px; altura: 50 px; plano de fundo: # f2f2f2; preenchimento: 6 px 10 px; borda: 1px sólido # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
raio de borda declaração e o Sombra da caixa declaração. Para criar cantos arredondados, usamos a declaração de borda de raio CSS3, os prefixos de navegador "-moz-" e "-webkit-" foram usados para garantir que isso funcione em navegadores baseados em gecko e webkit. As declarações de sombra da caixa podem parecer um pouco confusas, mas na verdade é muito simples. box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Visualizar
3. Estilizando o campo de entrada
input [type = "text"] float: esquerda; Largura: 230px; preenchimento: 15 px 5 px 5 px 5 px; margem superior: 5px; margem esquerda: 3px; borda: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; -moz-box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede; -webkit-box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede; box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede;
#a Principal. Nós usamos o mesmo raio de borda (5px). Mais uma vez, várias box-shadows foram batidas. box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede;
Visualizar
4. Denominar o botão de envio
input [type = "submit"]. solid flutuante: esquerda; cursor: ponteiro; largura: 130px; preenchimento: 8px 6px; margem esquerda: 20px; background-color: # f8b838; cor: rgba (134, 79, 11, 0,8); text-transform: maiúscula; intensidade da fonte: Negrito; borda: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: facilidade 0.2s de fundo;
text-shadow. text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9);
text-shadow declaração, os três primeiros valores numéricos são o deslocamento x, o deslocamento yo borrão respectivamente. Os valores de rgba indicam a cor da sombra. No próximo conjunto de declaração (separado por uma vírgula), o deslocamento y recebe um valor de -1. Isso é feito para dar ao texto uma “sombra interior” efeito. O estado de foco / foco do botão de envio tem diferentes valores de cor de fundo e sombras. Visualizar
Estado "ativo" para o botão
input [type = "submit"]. solid: ativo background: # f6a000; posição: relativa; top: 5px; borda: 1px sólido # 702d00; -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
O código completo (CSS)
#main width: 400px; altura: 50 px; plano de fundo: # f2f2f2; preenchimento: 6 px 10 px; borda: 1px sólido # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,8), inserção 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; Largura: 230px; preenchimento: 15 px 5 px 5 px 5 px; margem superior: 5px; margem esquerda: 3px; borda: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; -moz-box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede; -webkit-box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede; box-shadow: inserção 0 5px 0 #ccc, inserção 0 6px 0 # 989898, inserção 0 13px 0 #dfdede; input [type = "submit"]. solid flutuante: esquerdo; cursor: ponteiro; largura: 130px; preenchimento: 8px 6px; margem esquerda: 20px; background-color: # f8b838; cor: rgba (134, 79, 11, 0,8); text-transform: maiúscula; intensidade da fonte: Negrito; borda: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5 px; raio de fronteira: 5 px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0,7), 0-1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: facilidade 0.2s de fundo; input [type = "submit"] .sólido: hover, input [type = "submit"] .sólido: foco background: # ffd842; -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,9), inserção 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,9), inserção 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,9), inserção 0 2px 1px rgba (255, 250, 76, 0,8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: ativo background: # f6a000; posição: relativa; top: 5px; borda: 1px sólido # 702d00; -moz-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inserção 0 0 3px rgba (255, 255, 255, 0,6), inserção 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
