tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Forms


O olhar de um formulário HTML pode ser muito melhorada com CSS:

Tente você mesmo "

Styling Campos de Entrada

Utilizar a width propriedade para determinar a largura do campo de entrada:

Exemplo

input {
    width: 100%;
}
Tente você mesmo "

O exemplo acima se aplica a todos <input> elementos. Se você só quer denominar um tipo de entrada específico, você pode usar seletores de atributo:

  • input[type=text] - só irá selecionar campos de texto
  • input[type=password] - só irá selecionar campos de senha
  • input[type=number] - só irá selecionar campos de números
  • etc ..

Entradas acolchoadas

Use o padding propriedade para adicionar espaço dentro do campo de texto.

Dica: Quando você tem muitas entradas após o outro, você pode também querer adicionar um pouco margin , para adicionar mais espaço fora delas:

Exemplo

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
Tente você mesmo "
Nota Note que temos que definir a box-sizing propriedade para border-box . Isso garante que as fronteiras de enchimento e, eventualmente, estão incluídos na largura e altura total dos elementos.
Leia mais sobre o box-sizing propriedade em nossa CSS3 Box Dimensionamento capítulo.

Entradas com limites

Use a border propriedade para alterar o tamanho da borda e cor, e usar o border-radius propriedade para adicionar cantos arredondados:

Exemplo

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
Tente você mesmo "

Se você quiser apenas uma borda inferior, use o border-bottom propriedade:

Exemplo

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
Tente você mesmo "

Entradas coloridas

Use a background-color propriedade para adicionar uma cor de fundo para a entrada, ea color propriedade para alterar a cor do texto:

Exemplo

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
Tente você mesmo "

Entradas focalizados

Por padrão, alguns navegadores irá adicionar um contorno azul em torno da entrada quando ele recebe o foco (clicou). Você pode remover esse comportamento adicionando outline: none; à entrada.

Use o :focus selector de fazer alguma coisa com o campo de entrada quando ele obtém foco:

Exemplo

input[type=text]:focus {
    background-color: lightblue;
}
Tente você mesmo "

Exemplo

input[type=text]:focus {
    border: 3px solid #555;
}
Tente você mesmo "

Entrada ícone / imagem com

Se você quer um ícone dentro da entrada, use o background-image bens e posicioná-lo com o background-position propriedade. Note também que nós adicionamos um grande estofo esquerdo para reservar o espaço do ícone:

Exemplo

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
Tente você mesmo "

Animated Pesquisa Input

Neste exemplo, usamos o CSS3 transition propriedade para animar a largura da entrada da pesquisa, quando se obtém o foco. Você vai aprender mais sobre a transition de propriedade mais tarde, em nossa CSS3 transições capítulo.

Exemplo

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
Tente você mesmo "

styling textAreas

Dica: use o resize propriedade para evitar textareas seja redimensionada (desativar o "grabber" no canto inferior direito):

Exemplo

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
Tente você mesmo "

Styling Select Menus

Exemplo

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
Tente você mesmo "

Styling botões de entrada

Exemplo

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */
Tente você mesmo "

Para mais informações sobre como estilo de botões com CSS, leia o nosso CSS botões Tutorial .