A primeira área do bloco é envolvida em uma tag de seção para que possamos flutuar o layout lado a lado. A coluna da esquerda contém todas essas entradas: texto, e-mail, URL e número de telefone. Conforme você navega no seu telefone, o visor do teclado móvel deve se adaptar com base no tipo de entrada. Há vários bons motivos para oferecer suporte a esses recursos para dispositivos móveis, já que todos estão trabalhando nos dias de hoje.
O elemento textarea também pode ter um texto de espaço reservado definido no pageload. Isso é semelhante a um rótulo que desaparece quando o usuário digita algum texto no campo. O atributo que não é transportado é autocompletar porque as textareas normalmente não preenchem o conteúdo relacionado.
Controles da Barra Lateral Eu queria construir este formulário para que ele respondesse apropriadamente ao redimensionamento de exibições de janelas. Quando a janela está cheia o suficiente, ambas as colunas de entrada estão flutuando uma ao lado da outra. Mas se a largura for cortada levemente, a barra lateral direita cairá abaixo do conteúdo principal.
Aqui está o meu HTML para a área da barra lateral:
Destinatário: Equipe do site Editor chefe Departamento Técnico Relações públicas Suporte geral Este código, na verdade, não é nada muito confuso. Apenas uma opção simples, selecione menu e alguns botões de opção. Além disso, depois desses objetos, coloquei um botão de reset e envio no final da seção..
Isso tudo parece bom e bom, então agora vamos passar para algumas propriedades CSS. Existem muitas personalizações que você pode aplicar ao trabalhar em elementos de formulário. Tente não se atolar com muito pensamento e divirta-se!
Sombras de caixa animada Você notará como você guia através de cada um dos principais elementos de entrada que eu animou uma sombra externa colorida. O Google Chrome tem uma propriedade de contorno que faz algo semelhante, mas não tão extravagante. Esta pequena parte da interface é atraente para os visitantes de primeira viagem.
/ ** os elementos de formulário ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: bloco; font-family: "Helvetica Neue", Arial, sem serifas; estilo de borda: sólido; largura da borda: 1px; border-color: #dedede; margem inferior: 20px; tamanho da fonte: 1.55em; preenchimento: 11 px 25 px; preenchimento esquerdo: 55px; largura: 90%; cor: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -webkit-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -moz-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -o-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; # hongkiat-form .txtinput: focus color: # 333; border-color: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (41, 92, 161, 0,6); esboço: 0 nenhum; Para segmentar cada elemento de texto, usei a classe .txtinput. Cada uma das propriedades de transição trabalha na borda, na sombra da caixa e na cor. estou a usar dimensionamento de caixa: caixa de borda; no contêiner de formulário para preenchimento não atrapalhar o nosso design responsivo.
Eu tive que copiar esses mesmos estilos e editá-los um pouco para a área de texto. Alterei alguns dos preenchimentos e margens e anexei um ícone de plano de fundo exclusivo.
# hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sem serifas; estilo de borda: sólido; largura da borda: 1px; border-color: #dedede; margem inferior: 15px; tamanho da fonte: 1.5em; preenchimento: 11 px 25 px; preenchimento esquerdo: 55px; largura: 90%; altura: 180px; cor: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inserção; transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -webkit-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -moz-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; -o-transição: 0s lineares de 0,15s da borda, 0s lineares da caixa-sombra 0,15s, 0s lineares da cor 0,15s; #hongkiat-form textarea: focus color: # 333; border-color: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inserido, 0 0 8px rgba (40, 90, 160, 0,6); esboço: 0 nenhum; # hongkiat-form textarea.txtblock fundo: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Entradas da Barra Lateral Os botões de opção e os itens de menu selecionados são estilizados de maneira muito mais simples. Você pode aplicar efeitos de brilho externos e sombreamentos semelhantes nesses elementos, mas nem sempre ele fica bem. Alternativamente, os designers criarão interfaces de usuário personalizadas e as anexarão como imagens de fundo. Mas isso pode exigir uma solução alternativa jQuery para manter as opções exibindo corretamente.
span.radiobadge display: bloco; margem inferior: 8px; rótulo span.radiobadge font-size: 1.2em; fundo de preenchimento: 4px; select.selmenu font-size: 17px; cor: # 676767; preenchimento: 9px! importante; borda: 1px sólido #aaa; largura: 200px; Eu não fiz muito para afastá-los dos principais elementos de entrada. É muito importante ter um preenchimento extra para que os usuários se sintam à vontade para interagir com o formulário. Quando o texto é super pequeno, pode ser uma luta apenas preencher cada parte. Mantenha sua fonte grande, mas não tão grande que sobrecarregue a página.
Botões personalizados Os botões de reposição e envio são projetados em uma classe própria. Eu construí um conjunto de gradientes de luz para combinar bem com os destaques azuis em nossos campos de formulário.
Abaixo está o meu código CSS para o botão de envio no estado padrão e hover.
#buttons #submitbtn display: bloco; flutuar: esquerda; altura: 3em; preenchimento: 0 1em; borda: 1px sólido; esboço: 0; intensidade da fonte: Negrito; tamanho da fonte: 1.3em; cor: #fff; text-shadow: 0px 1px 0px # 222; espaço branco: nowrap; quebra de linha: normal; Alinhamento vertical: meio; cursor: ponteiro; -moz-border-radius: 2px; -webkit-border-radius: 2px; raio de fronteira: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: inserção 0 1px 0 rgba (256,256,256, 0,35); -ms-box-shadow: inserção 0 1px 0 rgba (256,256,256, 0,35); -webkit-box-shadow: inserção 0 1px 0 rgba (256,256,256, 0,35); box-shadow: inserção 0 1px 0 rgba (256,256,256, 0,35); cor de fundo: rgb (226,238,175); imagem de fundo: -moz-gradiente linear (topo, rgb (226, 238, 175) 3%, rgb (188 226,77) 3%, rgb (144, 176, 38) 100%); background-image: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (3%, rgb (226.238.175)), cor-stop (3%, rgb (188,216,77)), cor-stop (100 %, rgb (144,176,38))); imagem de fundo: -global-linear de guaxinim (superior, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagem de fundo: -o-gradiente linear (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); imagem de fundo: -m-gradiente linear-m (em cima, rgb (226, 238, 175) 3%, rgb (188,216, 7) 3%, rgb (144, 176, 38) 100%); imagem de fundo: gradiente linear (top, rgb (226, 238, 175) 3%, rgb (188,216, 7) 3%, rgb (144, 176, 38) 100%); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; cor: #fff; -moz-box-shadow: inserção 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: inserção 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: inserção 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: inserção 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); fundo: rgb (228,237,189); fundo: -moz-gradiente linear (topo, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundo: gradiente -webkit (linear, superior esquerdo, inferior esquerdo, cor-stop (2%, rgb (228,237,189)), cor-stop (3%, rgb (207,219,120)), cor-stop (100%, rgb ( 149,175,54))); fundo: - gradiente linear de guaxinim (superior, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundo: -o-gradiente linear (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundo: -ms-gradiente linear (em cima, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundo: gradiente linear (topo, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); É quase impossível manter esse tipo de seletor limpo! Há simplesmente muitas propriedades que você precisa listar e oferecer suporte a muitos navegadores legados mais antigos. O Internet Explorer pode até renderizar esses gradientes com o filtro adequado. Observe que, além dos gradientes de plano de fundo, incluí também uma nova cor de borda, cantos arredondados e uma sombra de caixa em pairar..
O botão de reset parece semelhante, mas eu fui uma rota totalmente diferente com o esquema de cores. O cinza claro tende a cair no fundo em comparação com as cores verdes brilhantes. Nosso botão de reset provavelmente não será usado muito, então não precisa de toda a atenção.
#buttons #resetbtn display: bloco; flutuar: esquerda; cor: # 515151; text-shadow: -1px 1px 0px #fff; margem direita: 20px; altura: 3em; preenchimento: 0 1em; esboço: 0; intensidade da fonte: Negrito; tamanho da fonte: 1.3em; espaço branco: nowrap; quebra de linha: normal; Alinhamento vertical: meio; cursor: ponteiro; -moz-border-radius: 2px; -webkit-border-radius: 2px; raio de fronteira: 2px; background-color: #fff; imagem de fundo: -moz-gradiente linear (topo, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222222222) 100%); background-image: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (2%, rgb (255,255,255)), cor-stop (2%, rgb (240,240,240)), cor-stop (100%, rgb (222,222,222))); imagem de fundo: -global linear-ladelo (em cima, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagem de fundo: -o-gradiente linear (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagem de fundo: -ms-gradiente linear (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imagem de fundo: gradiente linear (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); borda: 1px sólido # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); cor: # 818181; background-color: #fff; imagem de fundo: -moz-gradiente linear (topo, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (2%, rgb (255,255,255)), cor-stop (2%, rgb (244,244,244)), cor-stop (100%, rgb (229,229,229))); background-image: -bebkit-gradiente linear (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagem de fundo: -o-gradiente linear (topo, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagem de fundo: -ms-gradiente linear (topo, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imagem de fundo: gradiente linear (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color: #aeaeae; box-shadow: inserção 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Você pode até mesmo descartar o tipo de redefinição e usar esse esquema de cores branco / cinza como seu principal botão de envio. Eu usei muitos dos mesmos estilos de gradiente e efeitos de sombreamento, junto com uma sombra de texto para o rótulo interno. Definitivamente fornece um sentimento diferente para a experiência do usuário.
Alterações de layout responsivo Passando para o meu outro arquivo CSS, podemos dar uma olhada nas simples consultas de mídia responsiva que eu configurei. Qualquer janela do navegador acima de 800px terá a interface completa da barra lateral. À medida que você fica abaixo desse limite, a coluna da esquerda se expande para 100% de largura e você vê os elementos da barra lateral abaixo.
@media screen e (max-width: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; float: nenhum; display: bloco; #hongkiat-form #aside width: 100%; display: bloco; float: nenhum; # hongkiat-form .txtinput, # hongkiat-form textarea largura: 85%; #prioritycase float: left; display: bloco; #recipientcase float: left; display: bloco; margin-right: 55px; À medida que nos aproximamos do tamanho, tento adaptar cada uma das formas de entrada. A propriedade width pode acabar por mais tempo do que a própria página da web e, em seguida, temos formas de entrada saindo pela borda. Isso acontece em torno de 550px, que é onde eu quebro a próxima consulta, juntamente com as resoluções de tela do iPhone para retrato e paisagem.
/ * menor tela dropoff ******* / @media apenas tela e (max-width: 550px) # hongkiat-formulário .txtinput, # hongkiat-forma textarea largura: 80%; / * Paisagem do iPhone ******** / @media only screen e (max-width: 480px) body padding: 10px 0px; select.selmenu largura: 190px; / * Retrato do iPhone ******* / @media only screen e (max-width: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea largura: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu largura: 160px; #recipientcase margin-right: 30px; O modo de paisagem horizontal ainda mantém tudo muito bem. Eu só fiz o dropdown menu select um pouco mais fino para dar espaço para os botões de rádio. Na vista de retrato, redimensionei todos os elementos para larguras muito menores. Agora o nosso código não vai quebrar mesmo em janelas de navegador redimensionadas. Mas é bom ter suporte para smartphones iOS / Android também.
Demonstração Download do Código Fonte Conclusão Espero que este tutorial tenha sido informativo para explicar o quanto pode ser feito em seus webforms. As novas propriedades CSS3 são poderosas o suficiente para criar animações totalmente funcionais com apenas algumas linhas de código. É realmente um momento empolgante para trabalhar no desenvolvimento da Web e seguir essas tendências.
Se você tiver ideias ou sugestões sobre o código do tutorial, sinta-se à vontade para compartilhá-las conosco por meio da caixa de comentários abaixo.
