CSS: Design com grid

Name: CSS: Design com grid
Author: Cliff Brozo

Como entender e utilizar o design da grade

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 Knowledge City em folhas de estilo em cascata. Sou Cliff Brozo, sou seu instrutor. E hoje vamos falar sobre design, usando uma grade. Vamos descobrir como usar contêineres, vamos brincar com o layout e vamos descobrir quais itens para colocar em qual área da grade que criamos. Também vamos dar uma olhada em alguma formatação para criar páginas com várias colunas. Vamos brincar com um menu sofisticado e vamos criar artigos e comentários e estilizá-los. Vamos dar uma olhada em como será. Vamos criar uma página com três colunas desiguais. Algumas das colunas serão menores, outras maiores mas vamos torná-los todos diferentes. Usaremos um contêiner e dentro do contêiner, vamos colocar algum texto e algumas fotos. Vamos variar o tamanho dos contêineres e criar artigos nos apartes e faça um layout de três colunas. Usaremos um contêiner de grade e colocar muitas imagens em nossa grade. Você está pronto? Eu sou. Vamos lá. De novo, estamos usando Adam como nosso software de design. E aqui, vamos dar uma olhada em nossa primeira página, lidar com um contêiner. Esta linha azul que você vê é o contêiner real. E qualquer coisa que eu colocar aqui dentro pode ser estilizado de forma diferente do que a parte externa do contêiner. Agora você pode escolher colocar essa linha azul ou qualquer cor ou não ter linha. Assim, ninguém sabe que você está lidando dentro do contêiner. Tudo que você realmente precisa, é configurar uma área de conteúdo em CSS e chame-o em seu HTML. Então, nesta imagem, no lado direito da tela, Eu tenho uma área chamada "conteúdo" e a largura do conteúdo é 80% e as margens esquerda e direita são definidas automaticamente. Então, meu contêiner é 80% da página com 10% à esquerda e 10% à direita. Eu uso esse contêiner chamando-o em uma divisão, diga conteúdo igual de classe. Eu sou capaz de redimensionar isso e ainda manter minha janela de conteúdo de 80%. E se ficar grande ou pequeno, o texto é redimensionado automaticamente de maneira adequada. Vamos dar uma olhada no CSS que nos permite fazer isso. No CSS do meu contêiner, minha etiqueta corporal tem o fundo de chiffon de limão, algumas margens, o tamanho da fonte e eu escolhi uma fonte chamada MV Boli. Minha classe de conteúdo define a largura em 80%, e o que você está vendo aqui é a mesma coisa que você vê na foto que está incluído na página da web. A fronteira é esta linha azul Dodger. E o que estou fazendo é tirar isso para que você possa ver exatamente a aparência do contêiner com a fronteira que é onde está agora e sem a fronteira. Vou deletar essa linha e salvar o CSS e eu tenho a página novamente sem a borda. Agora, não há resposta certa ou resposta errada se você deve ou não mostrar uma borda. Algumas pessoas adoram, algumas pessoas não, vamos colocá-lo de volta e temos uma linha azul ao redor do nosso contêiner. Eu usei um raio de borda de 25 pixels para me dar um canto curvo e coloquei um pouco de panorâmica apenas para afastar o texto da borda do canto. Desenvolvemos um site, lidando com containers. Mostraremos como criar três colunas. Vamos dar uma olhada em uma cidade em New Hampshire, e outra cidade em New Hampshire, a estrada automotiva em New Hampshire, e então discutiremos alguns comentários CSS. Avançaremos para nosso layout de três colunas. E antes de clicarmos neste botão, Gostaria de salientar que os botões são estilizados com algum código CSS sofisticado. Vamos dar uma olhada nesse código. No final da nossa página é a seção de navegação para CSS. Eu criei uma cor de fundo para minha barra de navegação de azul Dodger. Esse é o azul que você vê aqui. Eu escondi qualquer estouro para evitar sobreposição de imagens, e eu contornei os cantos mais uma vez. Meus links estão flutuando à esquerda. Eles são da cor do chiffon limão que combina com o fundo e esse é um truque legal de se fazer. Seja qual for a cor da sua caixa para navegação, use a cor contrastante. Essa é a página de fundo. Estou alinhando o texto no centro. Minha decoração de texto de nenhum remove o sublinhado. E lembre-se, este é um link de hipertexto. Portanto, remove o sublinhado, e coloquei um pouco de preenchimento à esquerda e o direito de cada palavra. Aqui está a parte chique. Quando passo o mouse sobre o link, Estou mudando a cor e a cor de fundo mudando de azul Dodger para chiffon limão. Onde eu tinha Dodger blue como fundo, agora o azul Dodger é a cor. Chiffon limão era a cor, agora chiffon de limão é o fundo e fazer o botão parece que também tem cantos arredondados, Vou colocar um raio de fronteira. Quando passo o mouse sobre cada um dos links, o texto muda para a cor de fundo e dá a ilusão de um botão.

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

Descrição do curso

Neste curso, examinarás o layout e o design da grade, a pegar um código complicado e converter em algo que faça sentido visualmente, para que possas entender melhor o que estás a fazer. Terás a oportunidade de manipular o layout da grade, aprender a usar contêineres e determinar quais itens deves colocar em qual área da grade criares. O layout de grade é uma parte importante do CSS e uma ferramenta essencial para dar vida aos teus sites.

O Que Você Vai Aprender

Projetar um layout de grid em CSS
Explorar as ferramentas disponíveis para design de grid
Usar containers para estruturar layouts de grid
Determinar quais itens colocar em cada área da grid
Criar menus atraentes com CSS Grid
Estilizar artigos e asides dentro de uma grid

Principais Conclusões

O curso converte código de grid complicado em algo que faz sentido visual para que os aprendizes entendam melhor o que estão fazendo.
Os aprendizes praticam manipulação de layout de grid e uso de containers para organizar conteúdo.
Layout de grid é apresentado como uma parte importante de CSS e uma ferramenta essencial para dar vida aos websites.
O curso abrange colocação de itens em áreas específicas de uma grid e estilo de elementos como menus, artigos e asides.

Perguntas Frequentes

O que aprenderei neste curso?

Você examinará layout e design de grid, manipulará layout de grid, aprenderá como usar containers e determinará quais itens colocar em qual área da grid. Os objetivos incluem projetar uma grid em CSS, explorar ferramentas para design de grid, criar menus atraentes e estilizar artigos e asides.

Como o curso é estruturado?

O curso é organizado em quatro lições: Design de Grid Parte 1, Design de Grid Parte 2, Design de Grid Parte 3 e Design de Grid Parte 4.

Quais habilidades este curso abrange?

Abrange Códigos CSS, Frameworks CSS, CSS Grid, Sistema de Grid, Layout de Grid e CSS Orientado a Objetos.

Por que é importante aprender layout de grid?

Layout de grid é uma parte importante de CSS e uma ferramenta essencial para dar vida aos seus websites.