CSS: Formulários e galerias de imagens

Name: CSS: Formulários e galerias de imagens
Author: Cliff Brozo

Como maximizar o interesse do usuário e facilidade de uso.

Preview the first lesson free — get full access to all 4 lessons.

Curso: sob demanda

(Música animada) Bem-vindo de volta ao curso da KnowledgeCity em folhas de estilo em cascata. Sou Cliff Brozo, sou seu professor. Hoje, vamos examinar os formulários e como aplicar estilos CSS para uma série de coisas que você encontra em sua forma média. Primeiro, veremos a entrada de texto padrão. Agora, pode ser uma caixa normal, ou pode ser estilizado com alguns efeitos 3D. Veremos as caixas de lista suspensa, onde, mais uma vez, pode ser uma lista simples de itens ou pode ser estilizado. Vamos ver como colocar um calendário em nossa tela, e como podemos estilizar os calendários para torná-los mais bonitos. Faremos algo diferente com sua caixa de seleção média, talvez transformá-lo em estrelas em vez de caixas. Vamos examinar o que acontece quando você passa o mouse sobre um item, como pode mudar as cores, e vamos lidar com o fator de opacidade. Veremos alguns recursos da interface do usuário, onde se eu passar o mouse sobre um item, ele pode ficar maior. Pode mudar de cor. Pode me dar algumas informações, ou pode até não me deixar digitar nada. Por fim, veremos alguns designs responsivos, onde examinamos qual dispositivo está olhando para nossa página e agir de acordo. Posso fazer isso com várias folhas de estilo, ou posso fazer isso com uma consulta de tela de mídia, e altere o que você vê com base na largura do seu dispositivo. Vamos dar uma olhada nesses formulários. Como fizemos no passado, Atom é o nosso software de design preferido, e o que você vê é uma forma estilizada apresentando algumas das coisas que acabamos de ver. O HTML tem um link para minha página CSS do Forms. Eu só tenho um, um pequeno logotipo, e obviamente você se lembra do seu conhecimento de HTML que os formulários precisam de algum tipo de ação para fazer algo acontecer com os dados depois de digitados. Eu criei uma tabela para alinhar todos os meus itens e fazer com que pareçam mais ordenados, e para cada um dos dados da tabela, Eu apliquei uma classe chamada maior. E o que isso faz é quando você passa o mouse sobre um item, Eu fiz esse item crescer um pouco, e eu apliquei aquela classe chamada maior em cada célula da tabela. Vamos descer nosso HTML. Para inserir Estados, temos uma caixa de lista suspensa, que tem todos os estados disponíveis. Quando eu clico no item, todos os estados são listados junto com uma barra de rolagem. Eles estão facilmente disponíveis na web, para que você não precise digitar tanto. É especialmente útil se você estiver inserindo códigos de país. Descendo nossa lista de itens de formulário, Eu tenho um recurso de encontro, onde posso selecionar uma data. Quando eu ligo para o calendário, os itens aparecem, mas você notará que há um círculo vermelho na tela, e isso está me dizendo que não tenho permissão para digitar nisso. Eu tenho o mesmo item para State. Eu não quero que as pessoas digitem nessa área, e veremos como podemos controlar isso em nosso código CSS. O calendário real é construído diretamente em HTML. Eu tenho caixas de seleção normais para um tipo de animal que você prefere e um botão de envio que aumentaria quando você passa o mouse sobre ele. Descendo a página, Eu tenho uma área onde você pode digitar alguns comentários, e seus comentários são armazenados nesta área de texto, junto com barras de rolagem que permitem que você para mover para a esquerda e direita, bem como para cima e para baixo. Uma maneira diferente de pedir contribuições às pessoas é escolher estrelas. Eu amo essa classe. Sim, tudo bem, eu gosto, e espero que você escolha É incrível. E tudo o que fiz foi em CSS, Eu mudei as estrelas que estão aparecendo. Um dos problemas que uso é a opacidade, onde quando passo o mouse sobre um botão, e fiz este botão muito grande, a cor muda para um verde mais escuro. Finalmente, em torno de um botão, e eu poderia ter colocado isso em torno de qualquer um dos objetos, Eu tenho algumas sombras, que já fizemos no passado.

Intermediário Fornecedor : Cliff Brozo 4 lições · 25m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Neste curso, aprenderás a criar formulários e estilizá-los para gerar o interesse do usuário e facilidade de uso. Também examinará diferentes barras de progresso e como os controlos deslizantes podem mostrar aos usuários onde eles estão em uma página. Também aprenderás a criar uma galeria de imagens para exibir fotos em um formato visualmente atraente para os usuários, estejam eles em um desktop, tablet ou telemóvel. Por fim, verás como fazer ajustes no CSS sem fazer alterações em teu site.

O Que Você Vai Aprender

Criar e estilizar formulários CSS para interesse e facilidade de uso do usuário
Projetar formulários com atenção à acessibilidade do usuário
Criar galerias de imagens que exibam fotografias em desktop, tablet e telefone
Utilizar sliders e barras de progresso para mostrar aos usuários onde estão na página
Compreender os componentes visuais do CSS
Fazer ajustes em CSS sem alterar seu site

Principais Conclusões

O CSS pode ser usado para criar e estilizar formulários que geram interesse e facilidade de uso do usuário.
Diferentes barras de progresso e sliders podem mostrar aos usuários onde estão na página.
As galerias de imagens podem exibir fotografias em um formato visualmente atraente em desktop, tablet e telefone.
O CSS permite que você faça ajustes sem fazer alterações no seu site.

Perguntas Frequentes

O que aprenderei neste curso?

Você aprenderá a criar e estilizar formulários para interesse e facilidade de uso do usuário, examinar barras de progresso e sliders que mostram aos usuários onde estão na página, criar galerias de imagens para exibir fotografias em desktop, tablet ou telefone, e fazer ajustes em CSS sem alterar seu site.

Quais tópicos este curso abrange?

O curso abrange formulários em duas lições (Formulários Parte 1 e Formulários Parte 2) e galerias de imagens em duas lições (Galerias de Imagens Parte 1 e Galerias de Imagens Parte 2).

Que habilidades este curso me ajuda a desenvolver?

Este curso desenvolve habilidades em Códigos CSS, Frameworks CSS, Design de Formato Web, Layout de Formulário, CSS Orientado a Objetos e Design de IU Web.

As galerias de imagens funcionarão em diferentes dispositivos?

Sim. Você aprenderá a criar uma galeria de imagens que exiba fotografias em um formato visualmente atraente, quer os usuários estejam em um desktop, tablet ou telefone.