Transcrições
1. Introdução básico de CSS: Olá e bem-vindo ao web design básico para criativos. Nesta aula vamos explorar folhas de estilo em cascata e como elas ajudam você a controlar os elementos em sua página da Web. Esta é uma habilidade que você precisa ter se você quiser pegar um arquivo de design estático, como algo do Sketch, Photoshop ou Illustrator e traduzi-lo em uma página web funcional. Vamos construir um site para um festival de música falso, e vai ser divertido. Vou mantê-lo andando bem rápido para você. Tenho muitos slides, ilustrações e código junto com demonstrações. Nós vamos fazer isso, você vai fazer isso, aperte os cintos. Vamos começar a rolar.
2. Rápido: Aqui vamos nós. Vamos desenvolver o seu site a partir de uma pasta na sua área de trabalho. Então, crie uma pasta em sua área de trabalho. Você pode chamá-lo do que quiser e isso vai conter todos os arquivos de
projeto que usamos neste projeto. Você vai precisar de um Editor de Texto. Recomendo que usemos o Atom. É o que usarei nessas demonstrações. É gratuito, funciona para Mac e Windows, é de código aberto. Se você vai para Atom.io, você pode baixar este IDE, que é a abreviação de ambiente interno de desenvolvedor, eu acho. De qualquer forma, vá baixar este IDE. É grátis, seu editor de texto vai funcionar muito bem. A próxima coisa que precisamos fazer é ter certeza de que você está trabalhando no navegador Chrome, Google Chrome, eu estarei trabalhando nesse navegador, e apenas para ter certeza de que não temos quaisquer inconsistências que são bugs que aparecem porque diferentes navegadores às vezes tratam o código de forma diferente, que é um assunto para outro momento, mas hoje, apenas mantenha-o consistente. Vamos trabalhar no Google Chrome. Então baixe Atom, tenha certeza que você tem o Google Chrome e então você pode ter que baixar um arquivo zip do meu site, ele tem todos os arquivos iniciais e os arquivos de projeto finalizados também se você quiser espreitar em frente e ver como tudo se transforma para fora ou se referir a eles ou qualquer outra coisa. Você pode encontrar um link para baixar esses arquivos na descrição do curso logo abaixo. Então baixe o arquivo zip do meu site. Depois de fazer isso, copie o arquivo de índice dos arquivos iniciais que você baixou do meu site para sua pasta na área de trabalho. Você vai copiar index dot html lá e,
em seguida, ir para o navegador Google Chrome e abrir index dot html. Vai parecer terrível porque não tem estilo. O que vamos fazer é pegar este conteúdo HTML básico e adicionar CSS a ele para que a nossa página web pareça com a nossa maquete. Vejo você no próximo vídeo. Vá baixar essas coisas e vamos começar.
3. Anatomy de CSS básico: Vamos começar. Neste vídeo, eu vou mostrar três lugares diferentes que você pode colocar estilos. Vou mostrar-lhe por que vamos escolher uma folha de estilo em cascata para os nossos estilos, e então eu vou mostrar-lhe no código como ele funciona, e então você irá codificar sua própria folha de estilo que vamos usar para a base do resto do projeto. Aqui vamos nós para o quadro branco. Quero contar a vocês um pouco sobre especificidade e CSS. Existem diferentes lugares onde você pode colocar estilos e seu navegador irá tratá-los de forma diferente também. Você pode escrever estilos em linha, o que significa, tão rápido. Esta é uma página HTML. Se você não estiver familiarizado com HTML, você pode fazer meu outro curso sobre HTML básico para criativos. Eu vou assumir que você sabe escrever HTML. Aqui temos duas tags div aqui, e cada uma tem um estilo escrito em linha direita na tag. Eu também posso colocar estilos localmente aqui na seção principal da minha página HTML, e então eu também posso ter estilos remotos em uma folha de estilo em cascata, e é assim que vamos escrever nosso site hoje. Seu navegador dará peso diferente aos estilos, dependendo de como você os usa. Um estilo embutido será o estilo mais pesado. Em segundo lugar vai ser um estilo local, e em seguida, o terceiro vai ser algo em uma folha de estilo. Você vê aqui eu tenho estes estilos é cor vermelha. Estas divs vão ter texto vermelho nelas. Se eu tiver cor azul aqui em um estilo local e eu apagar cor vermelha, agora que o texto dentro dessas divs vai ser azul. Você vê como a especificidade, o lugar que eu coloquei o estilo vai afetar como ele se torna no navegador. Isso é parte da cascata, parte de folhas de estilo em cascata, e há um pouco mais para ele que eu vou dizer-lhe quando nós começamos a realmente escrever uma folha de estilo também. Mas isso é CSS e especificidade. Vamos dar uma olhada em como isso acontece no código no navegador. Eu tenho um semelhante, aqui está o nosso arquivo HTML inicial. Estou no index.html. Este é [inaudível] aqui e este é o Chrome aqui, e eu quero mostrar a vocês este estilo em linha que eu escrevi estilo cor é igual a vermelho. A cor do primeiro plano, a cor do texto é vermelha aqui. Se eu me livrar desse estilo embutido e salvar a página, então vá atualizar o navegador, que eu uso Command R. Você também pode clicar neste pequeno ícone de atualização, mas se você usar o Command R, irá atualizá-lo rapidamente e é um Uma coisa rápida e fácil. Vou lhe dizer alguns comandos de teclas, atalhos que eu fiz, que eu uso assim que passamos. O outro que eu vou usar para ir e voltar entre diferentes aplicativos é Command Tab, então eu posso Tab entre estes, se eu pressionar Shift, ele vai para o outro lado. Essa é uma maneira rápida e prática de alternar entre aplicativos. De volta ao que estamos falando. Eu me livrei do estilo que estava inline aqui que disse cor é igual a vermelho, e aqui eu tenho cor igual a azul em um estilo local, até a cabeça do documento, e quando eu atualizei, boom, tudo ficou azul. Vamos configurar nossa folha de estilo em cascata. Esta vai ser a folha de estilo remota, e nós chamamos isso de remoto só porque ele não está realmente neste corpo de código aqui. Se você clicar com o botão direito do mouse em 'Nova pasta' e chamá-lo de CSS
e, em seguida, dentro disso, faça um novo arquivo. Vamos chamar isso de styles.css. É importante colocar a extensão that.css no final, e agora, vamos escrever muito rápido. Vou escrever um estilo aqui na nossa folha de estilo. Eu vou segmentar esse mesmo corpo de texto, e não se preocupe em digitar comigo. Vou entrar em um segundo sobre a anatomia de um estilo. O que acabou de verificar isso muito rápido. Cor verde, guarde isso. Agora, nossa página de índice ainda não sabe sobre a folha de estilos, mesmo que esteja no mesmo diretório, precisamos dar instruções específicas e dizer-lhe para usar as folhas de estilo. Nós escrevemos uma tag link com um href e href é como um mapa para onde este arquivo será encontrado, então css/ styles.css, e então vamos dizer ao navegador para que este arquivo é usado, rel é igual a stylesheet. Em seguida, a tag de link não tem um mais próximo, você está acostumado a ver esta sintaxe com elementos HTML, você não precisa dela com uma tag de link. Agora, eu volto aqui e atualizo a página e todo esse texto fica verde. Vamos dar uma olhada em algo muito rápido. Você vê onde este link é colocado? É depois deste estilo inline. Você percebe que se eu movê-lo aqui e salvá-lo, certifique-se de recuar. É azul. Por que é isso? Temos outra especificidade que estamos jogando aqui. O navegador carrega este arquivo primeiro e ele lê verde colorido. Então ele vai até aqui e lê isso e é como, oh, não, a cor é suposto ser azul, torná-lo azul. Se eu remover isso, salvá-lo e atualizar, você verá que está verde. Especificidade é importante e esta mesma coisa vai jogar fora dentro de sua folha de estilo, bem, então sempre que eu tenho um estilo duplicado, qualquer que seja o estilo foi escrito por último, ele vai ter preferência. Veja lá, fica vermelho. Isso é um pouco sobre CSS e especificidade. Muito rápido, uma aula de anatomia estudantil sobre um estilo. Havia um par de componentes diferentes aqui para um estilo que você precisa estar familiarizado com. Você tem o seletor aqui, nós temos a propriedade e, em seguida, o valor, então você vai ver este padrão repetido uma e outra vez e outra como você escreve estilos. Eles são pares de valores-chave. Este é um termo que só vai
explicar sempre que você tem uma propriedade aqui e, em seguida, um valor para ele ali. Como tamanho da fonte, 18 pixels, cor vermelha, essa é a anatomia de um estilo. Seus seletores vêm em um par de variedades diferentes. Este é um elemento, uma tag de parágrafo. Qualquer tag de parágrafo terá a cor vermelha e o tamanho da fonte de 18 pixels. Você tem uma classe que começa com um ponto, então nós poderíamos ter, como no exemplo anterior, alinhar-se, que era uma classe, e você tem IDs e ID é precedido por um hash, e seria algo como, Não sei, homepage. Em seguida, há diferentes maneiras de usar classes e IDs, e seletores de elementos quando você estiver construindo seus estilos, e nós entraremos nisso em apenas um momento. Você sabe sobre especificidade. Você viu o funcionamento interno de um estilo. Você sabe o que são componentes. Você sabe onde vai. Vamos começar a escrever alguns estilos para este site. Verei no próximo vídeo.
4. Conheça suas caixas: Bem-vinda de volta. Como designer, você provavelmente preparou seus arquivos no Photoshop, Sketch, algum software de design estático como esse. Agora, você tem que transformá-lo em um site, e ter controle sobre todos esses elementos. Você precisa saber como fazê-los se comportar. Pode ser muito confuso. Existem tantas tags HTML diferentes, e todas elas se resumem a apenas duas categorias embora. Você tem elementos inline, e eles vão se alinhar um ao lado do outro como texto. Você tem elementos de nível de bloco. Eles vão empilhar-se um em cima do outro. Cada página web é uma combinação dessas duas coisas. Eles existem no eixo x, y. Deixe-me mostrar-lhe alguns slides que preparei apenas para você que ilustram este conceito. Vou mostrar-lhe como você pode manipular os elementos básicos em uma página HTML usando folhas de estilo em cascata. Aqui estamos nós. CSS Layout é fácil como XYZ. Por isso quero dizer o eixo x, o eixo y e o eixo z. O eixo x é horizontal e vai da esquerda para a direita. O eixo y é vertical e vai de cima para baixo, e o eixo z, sobre o
qual falaremos mais tarde, é como os elementos se acumulam um sobre o outro em camadas. O que você pode ver por essas três barras laranja, ele ilustra que os elementos em linha querem empilhar um ao lado do outro, e eles continuarão empilhando um ao lado do outro até que eles alcancem a borda de seu contêiner e tenham que embrulhar. Quero apresentá-los a um site chamado CodePen. CodePen é um recurso incrível. Ele permite que você teste rapidamente idéias sem ter que configurar um site inteiro. Você pode encontrar o link para esta CodePen
no PDF de recursos que está incluído nos arquivos baixados para esta classe. Vamos dar uma olhada em uma CodePen que ilustra esse ponto. Aqui temos um corpo sem estilo de HTML. Agora, na CodePen, eu não preciso escrever a tag HTML, a tag head, a tag body. Eles cuidam disso para você. Isso torna muito rápido e fácil testar código e ver um resultado imediato. Vamos fazer algo como aplicar um estilo à etiqueta de corpo. Tudo o que estou a fazer é, estou a comentar este CSS. Quando você está trabalhando em uma folha de estilo, você pode pedir que ele não leia código usando esta sintaxe aqui, que é uma barra e depois uma estrela, e depois uma barra de estrela para fechar o comentário. Muitas vezes, isso será usado para deixar notas. Você pode dizer algo como, isso começa os estilos para a parte superior da página. Essa é a maneira que você pode deixar notas para si mesmo, ou para qualquer desenvolvedor que vai trabalhar neste projeto no futuro. comando de teclado realmente rápido vai
economizar algum tempo enquanto você está seguindo por aqui. Você pode manter pressionada a tecla Shift e usar
as setas para a direita ou para a esquerda para selecionar uma linha inteira de texto, e então você pode usar a barra de comando, que é a que está abaixo do ponto de interrogação para ativar e desativar os comentários. Isso funciona em HTML2. Eu usei isso aqui para nos permitir revelar estilos um de cada vez sem ter que tomar tempo para escrevê-los. Deixe-me aplicar um na etiqueta do corpo. Você pode ver que eu tenho meu seletor aqui. Não há ponto ou haxixe na frente dele. Isso vai procurar um elemento HTML. Nós vamos encontrar a tag body e o tamanho da fonte aplicado é igual a 24 pixels para ela. Assim que eu decodificar isso, você vê todo esse texto adotar esse estilo. Observe aqui como tudo está escrito em caixas. Esses níveis de recuo mostram onde uma nova caixa começa. Aqui está uma caixa de pais, e contém estas quatro caixas de crianças. Estes são todos vãos. Os vãos são elementos em linha, então eles vão se empilhar um ao lado do outro, e vemos isso acontecendo aqui. Imagens, aqui está uma imagem, também um elemento embutido, e também está ficando alinhado com tudo o resto. Agora, vamos falar sobre os elementos do bloco do eixo y. Estas são tags HTML como divs, parágrafos, cabeçalhos, rodapés, seções, todas essas coisas. Eles, por natureza, se empilham um sobre o outro e se expandem o mais amplo possível para caber em seu contêiner pai. Vamos dar uma olhada em como os elementos de nível de bloco funcionam. Se eu quisesse que todo esse texto se empilhasse em estrofes, como você veria em um livro, eu poderia voltar e mudar todos esses vãos para um elemento de nível de bloco como uma div. Deixe-me tentar isso muito rápido. Colocamos um div aqui. Você vê que a primeira estrofe, ele realmente retorna e faz com que o resto do tipo continue abaixo dele, então ele está se estendendo para preencher a largura do contêiner pai, e está empilhando sobre o conteúdo que está abaixo dele. Outra coisa que você pode fazer, é usar a propriedade display para controlar a forma como estes olhar. Deixe-me comentar este próximo pedaço de CSS. Ele vai aplicar a altura de 32 pixels a uma tag span. Uma coisa sobre elementos inline é que eles não podem aceitar propriedades de
altura ou largura porque, por natureza, eles apenas se alinham um após o outro. Não há necessidade de ter altura e largura. Se eu disser isso para se comportar como um elemento de nível de bloco, de repente eles adotam todas as propriedades de um elemento de nível de bloco. Eles vão empilhar-se um em cima do outro. Eles adotam essa altura, que você pode ver. Se eu comentar isso,
veja como eles encolhem assim. A altura da linha entre os elementos é reduzida. Esta é uma maneira fácil de ilustrar a diferença entre um elemento de nível de bloco e um elemento em linha. Quando você está fazendo layout, é muito mais provável que você vai usar um div ou outro elemento de nível de bloco. Por exemplo, você vai empilhar coisas com elementos de
nível de bloco e colocar as coisas em linha com elementos embutidos. Mas isso mostra como você pode usar a propriedade display para controlar seu comportamento. Elementos em linha e bloco combinam-se para nos dar os layouts que estamos familiarizados com ver em sites. Você sabe um pouco mais sobre como os estilos afetam os elementos HTML. Você provavelmente está dizendo, “Mark, quando vamos realmente escrever algum código?” Bem, vamos escrever algumas muito em breve sobre o projeto, mas eu quero ter certeza que você entende como essas coisas funcionam antes de mergulharmos. Não quero que seus estilos, quando estiver escrevendo, se sintam como encantamentos mágicos que você joga lá fora. Eu quero que eles se sintam como comandos que você está confiante em executar. Nós vamos fazer um pouco mais de uma palestra com alguns slides, e então nós vamos começar a escrever um pouco de código. Aguente aí. Vejo você no próximo vídeo.
5. Estratégia de layout: As páginas da Web são essencialmente caixas dentro de caixas. Alguns deles vão para o lado, alguns deles se empilham um sobre o outro, e eles se combinam para formar padrões de layout complexos. Os padrões complexos que eles formam, suas páginas da Web essencialmente, são chamados de objetos de documento, e eles têm o que é chamado de modelo de objeto de documento. Essa é essencialmente a relação de uma caixa para outra. Quantas caixas estão dentro da caixa dos pais? Se você pudesse visualizá-los como uma árvore hierárquica, começando com a caixa pai aqui, as caixas
filho abaixo que se dividem em outras caixas pequenas filhas. Esse é o modelo de objeto do documento. É muito útil ser capaz de ver isso enquanto você está desenvolvendo uma página web para que você possa ter uma idéia visual de como esses elementos estão interagindo uns com os outros. Deixe-me apresentá-lo ao seu novo melhor amigo, o inspetor. Se você acessar uma página da Web no Chrome e clicar com o botão direito do mouse, verá um menu que tenha inspecionar na parte inferior dela, toque em inspecionar. Ele abrirá um pequeno painel que tem todos os tipos de informações sobre cada elemento em sua página. Vamos dar uma olhada em algumas de nossas caixas e começar a dar-lhes alguns dos estilos que vão nos ajudar a alcançar. Olha que foi definido nas composições de design aqui, nós vamos para esta cor magenta louca atrás do cabeçalho e tentamos fazer com que pareça exatamente com isso. Então vamos começar aplicando essa cor à nossa barra de navegação. Se clicar com o botão direito do mouse aqui em cima, podemos olhar ao redor em nosso inspetor e ter uma boa idéia de quais caixas compõem isso. Nós temos uma caixa principal lá, que é a barra de navegação, você pode ver classe navbar. Vamos usar isso como um seletor para atingir essa caixa. Então dentro tem o contêiner 960. Eventualmente, isto vai ajudar-nos a fazer uma boa coluna. Então, dentro disso, temos os nomes das páginas para nossa navegação. Então nós temos ícones de mídia social, que você não pode ver porque eles são brancos no branco agora. Vamos consertar isso. Nós vamos escrever nosso primeiro estilo para o site aqui, eu tenho estilos CSS aberto em meus arquivos iniciais. Eu vou continuar construindo sobre isso e vamos atacar a classe navbar dizendo .navbar. Vamos dar-lhe uma cor de fundo de E03ED7. Eu vou copiar colar essas coisas e avançar muito rapidamente nessas demonstrações de código. Definitivamente parar o vídeo e ter tempo para alcançá-lo. Vou tentar fazê-las rápido para não
desperdiçarmos muito do teu tempo a ver-me datilografar as coisas. Não fique desencorajado ou ofendido se eu estiver voando por isso, basta clicar em “Pausa”. Se salvarmos isso e voltarmos ao navegador, percebemos que temos uma cor magenta louca aqui atrás. Podemos ver nossos ícones de mídia social. Agora olhe em volta para esta fronteira aqui. Isto vai levar-nos a uma discussão sobre o modelo da caixa. Esta é uma ilustração do modelo de caixa que o inspetor nos fornece. Bem aqui no núcleo, vemos as dimensões da própria caixa do núcleo, e então vemos essas três propriedades diferentes da caixa. Temos estofamento, borda e margem, e você vê aqui esta linha dura desenhada perto que é o diferencial. Embora não tenha largura real na vida real. Isso é dentro e tudo o passado que está fora. Todas as bordas aplicadas são calculadas como estando no interior dessa dimensão. O preenchimento aplicado se aplica ao interior dessa dimensão. Qualquer margem que você aplicar se aplica ao exterior. Podemos ver que há alguma margem aplicada aqui, por todo o caminho. O que isso é, é um estilo de agente de usuário. Se você olhar para esta área cinza aqui, é em itálico, você verá que há um monte de elementos chamados para fora e eles são chamados como bloco de exibição. Existem todos os tipos de estilos de agente de usuário. Estes são estilos que moldam com o navegador. Estes são os padrões. Agora nem todos os navegadores implementa estes mesmos. Alguns navegadores sentem que oito pixels é a quantidade certa de preenchimento em torno de algo ou margem. Outros navegadores podem achar que são 10. Alguns sentem que um tamanho de fonte é melhor do que outro. Se você está construindo um site e você tem seus estilos escritos, e você está confiando em estilos padrão para ajudá-lo,
você tem que levar em conta todos esses navegadores diferentes ou apenas redefinir cada um deles. muito tempo, em termos de web, as pessoas começaram a escrever folhas de estilo reset. Basicamente, eles pegam coisas como tags H1, margem
padrão, preenchimento
padrão, altura da linha padrão, todas essas coisas diferentes, e declararam expressamente para que a folha de estilo do agente do usuário não os influencie. Em seus arquivos extras aqui, você verá que eu tenho um reset.css. Este é um que acabei de pegar na internet. Eric Meyers fez um muito popular. Você pode, há realmente um ótimo artigo sobre truques
CSS sobre o histórico da folha de estilo de reset, que é uma ótima leitura, se você quiser alguma leitura de novo nível. Vamos colar esta redefinição no topo da nossa folha de estilos aqui e salvá-la. Quando vamos atualizar, essa margem se foi, e agora começamos a ver nossos estilos. Considerando que antes só vimos os estilos cinza do agente de usuário. Agora dizemos corpo H1, H2, blá blá blá. Todos foram definidos para a margem 0, preenchimento 0. Teremos que entrar e especificar realmente o que queremos margem e preenchimento para esses elementos. Mas o que fizemos é garantir que todos os navegadores os exibirão de forma consistente. A próxima coisa aqui vai tentar fazer com que um pouco desse conteúdo se comporte. Nós temos todo esse texto fazendo o que ele deve fazer é em textos de linha, apenas enchendo seu recipiente. Tudo é batido para o lado esquerdo sem margem. Coisas que deveriam estar próximas umas das outras estão empilhadas umas sobre as outras. Vamos impor uma coluna sobre isso. Se olharmos no arquivo de design, podemos ver este design, uma coluna que vai todo o caminho para baixo toda a página e mantém as coisas agradáveis e ordenadas. Vamos fazer a nossa página web ter o mesmo comportamento escrevendo um estilo de coluna mestre. O que fiz aqui foi o contentor chamado contentor 960. Uma vez que aplicamos nossos estilos a ele, ele ajudará cada uma dessas seções a se centrarem e se tornarem 960 pixels de largura. Vamos adicionar esses estilos agora mesmo. Eu gosto de deixar alguns comentários apenas para me ajudar a organizar minhas folhas de estilo. Podemos usar estrela barra e estrela barra para começar e terminar nossos comentários. Eu vou dizer, começar estilos de site. Temos a nossa barra de navegação. Vamos fazer um para o contêiner 960. Esta é a técnica de centragem automática de margem e é uma das técnicas mais confiáveis para centralização e imagem em uma página web. O que ele faz é dar uma olhada na largura do objeto e, em seguida,
calcula automaticamente a quantidade de margem em cada lado que vai levar para centralizar este objeto. É por isso que funciona tão bem. Há uma coisa que você precisa saber, e é que isso funciona apenas em elementos de nível de bloco. A razão é, que os elementos inline não podem ter uma largura ou altura aplicada a eles porque seu trabalho é apenas ir e
sobre e alinhar até que eles viraram seu recipiente. Temos que usar um elemento de nível de bloco, e neste caso estamos usando um div bem aqui, classe div. Tendo definido a largura e margem auto para isso, eu apertei “Salvar” na minha folha de estilo, voltar para o site aqui e isso
vai encaixar tudo em uma coluna no meio. Dê uma olhada nisso e ele vai se centrar. Não importa o quão grande ou pequeno eu faça esta janela. Eu espalhei essa classe para cima e para baixo através deste site, toda vez que eu vou para uma nova seção, então aqui na seção de heróis, lá está ela. Aqui na seção de linha acima, ali está. Esta é uma ótima estratégia para manter uma coluna sólida e sublinhar o poder de uma folha de estilo em cascata. Você pode ver como nós escrevemos em um lugar e ele em cascata sobre toda a nossa página sempre que esse estilo é referenciado. Esta é uma ótima maneira de obter um monte de alavancagem fora de apenas um pouquinho de código. Só requer um pouco de planejamento inicial. Como você se aproxima de construir um site por conta própria. Vá para esta caneta CSS aqui, esta é a CodePen. Vá a esta CodePen e brinque. Eu tenho alguns estilos comprometidos que você pode descomentar e usar para ver como margem, auto e largura combina um conjunto de coisas na página. Você pode jogar com valores e ver o que acontece quando você altera alguns desses valores. Ou se você mudar a margem ou o que quiser fazer, mexa com ela, quebre e sinta como funciona.
6. Layout baseado em Float: Uma das primeiras ferramentas que os desenvolvedores e designers da web obtiveram que ajudaram a controlar o layout da página foi o float. Quando você aplica um flutuador a um elemento, ele levará o elemento todo o caminho para a esquerda ou todo o caminho para a direita. No entanto, os carros flutuantes tiram o elemento do fluxo normal do DOM. Eles são um pouco peculiares. Embora o conteúdo flua em torno deles, eles não são suficientes para manter um contêiner aberto por conta própria. Quando você flutua um elemento ele o transforma em um elemento de nível de bloco que pode ser flutuado para a esquerda ou para a direita. Flutuante precisa ser ligado e desligado e você tem que
limpar seus carros alegóricos, a fim de parar o comportamento flutuante. É um pouco estranho. Você pensaria que poderia colocar algo para a esquerda ou para a direita e funcionaria. Mas eles são realmente um hack porque eles foram a primeira ferramenta que os designers tiveram que mover conteúdo da esquerda para a direita. Eles rapidamente descobriram como explorá-los para criar layouts complexos, como um layout de duas colunas que estamos acostumados a ver na web hoje e que vimos na impressão por centenas de anos. Você precisa desligar seus carros alegóricos, limpando-os. Se você não os limpar, o comportamento flutuante, comportamento
que os tira do fluxo normal do DOM não será redefinido. O que pode acontecer é que um recipiente entrará em colapso atrás dos elementos flutuantes. Se você tem uma situação estranha como esta em que você tem algum conteúdo exibindo atrás de algo que você flutuou, provavelmente não foi limpo. Uma das maneiras mais comuns de fazê-lo é selecionar um elemento que aparece na ordem natural do DOM que é, no final da página, após os elementos que foram flutuados e limpar ambos os carros alegóricos. Você pode limpar os dois. É assim que se limita. Vou fazer uma pequena demonstração para isso. Espere um segundo. Outra maneira de fazer isso é dar o contêiner pai dos flutuadores estouro oculto. O que isso faz é garantir que nenhum conteúdo colocado dentro de qualquer elemento pode transbordar seus limites. Ao configurá-lo para estouro oculto, você o torna autoconsciente de uma forma e calcula o espaço
necessário para exibir esses objetos flutuados e o resto do conteúdo dentro de si mesmo. Vamos a uma CodePen e ver como tudo isso funciona. Aqui está a nossa conhecida CodePen antiga. Vamos fazer os últimos pedaços disso, e então eu tenho outro para você também. Aqui vamos nós. Temos todos os versos exibidos como bloco, e vamos tentar colocar a casa no lado direito. Nós vamos dizer flutuar para a direita para a ilustração e você pode vê-lo flutuar sobre a direita enquanto todas essas coisas ficam à esquerda. É assim que obtemos layouts de 2 e 3 colunas para trabalhar na web. Existem outras maneiras, mas esta é uma das mais antigas e amplamente utilizadas e francamente mais difíceis de entender também. Quero ter certeza que você consegue lidar bem com isso. Vamos passar para a segunda CodePen aqui. Aqui está uma CodePen que você pode usar para brincar com layout baseado
em flutuação e ter uma sensação para isso. Tenho tudo comentado agora. Temos o nosso blob habitual de conteúdo sem estilo. Vamos descomentar alguns desses estilos e ver o que temos aqui. Estes são estilos básicos de página, eu adiciono algum preenchimento para o cabeçalho e o rodapé, e o corpo. Agora, você vê essas vírgulas aqui? Sempre que você tiver estilos que são usados em mais de um lugar, você pode colocá-los em uma lista separada por vírgulas. Por exemplo, cabeçalho aqui refere-se ao elemento cabeçalho aqui mesmo, então elemento HTML5. O rodapé é o nosso rodapé. Dot corpo vai ser, olhar para alguns da classe do corpo. Esta seção tem a classe de corpo sobre ele. Vai ser aplicado lá também. Estou aplicando 10 pixels de preenchimento por todo o lado e você pode ver aqui, eu tenho uma bela borda que eu criei em torno de todo esse conteúdo. Acabei de escrever uma linha de código,
então, se mais tarde eu ficar tipo, oh, eu realmente gostaria que fosse 8 pixels. Eu escrevo em um só lugar e é aplicado a todos esses diferentes elementos simultaneamente. Esse é outro exemplo da parte em cascata das folhas de estilo em cascata. É uma ferramenta muito poderosa. Aqui temos outra lista separada por vírgulas. Esta é a cor de fundo para o cabeçalho e rodapé. Veja como isso se aplica a ambos. Vamos ver aqui. Obter alguma cor de fundo lá para a div. Você pode distingui-lo das outras partes dessa composição. Faça a ilustração se encaixar, tornando-a com 100. Agora, eu vou definir as larguras para as colunas aqui que estão empilhadas agora. As divs, os elementos de nível de bloco, eles querem empilhar e porque eles não têm mais nada dizendo a eles para fazer o contrário, eles estão fazendo seu comportamento natural de encher seus pais e empilhando um em cima do outro. Vamos torná-los 45 por cento de largura e ver isso de novo. lista separada por vírgulas aplica-se a ambas as colunas. Aquele com a classe esquerda e aquele com a classe direita ao mesmo tempo. Vamos aplicar algum preenchimento à direita para
a coluna esquerda e algum preenchimento à esquerda para a coluna direita. Isso vai dar-nos uma boa sarjeta entre os dois. Agora aplicamos os carros alegóricos. Eu flutuo para a esquerda, flutuo para a direita. Estou flutuando pela coluna esquerda, esquerda, minha coluna direita direita. Você pode ver que eu tenho uma bela calha aqui. Nota rápida aqui, acabei de pausar o vídeo. Viste como este texto e a imagem foram empilhados aqui em baixo? Eu tive que apenas fazer este 44 e, em seguida, 45 novamente muito rápido e corrigi-lo um pequeno bug layout. Se você está tendo o mesmo problema, basta fazer isso e você verá que eles vão empilhar um ao lado do outro. Só uma pequena falha. Vemos que isso está sobrepondo o rodapé. Vamos tentar a primeira técnica que está aplicando clara tanto para o rodapé. Vemos que o rodapé está aqui depois de nossos dois elementos flutuados e dizendo ao navegador,
hey, uma vez que você alcança o rodapé, pare de fazer o comportamento de limpeza, ele faz. Todos eles podem se empilhar em colunas como você deseja. Vamos olhar para a outra técnica que foi, ver se tiramos isso, eles desmoronam. Aplicar overflow oculto para o elemento body, que é o elemento Seção aqui que tem todos esses outros elementos nele. Vamos aplicar overflow escondido a isso e boom, ele se torna auto-consciente, ele conta para os carros alegóricos e os elementos não flutuados e exibe todos eles. Há uma terceira maneira que você pode limpar um flutuador e isso é chamado de técnica clara de correção flutuante. Ele tira vantagem de elementos chamados pseudo-elementos, que não vamos entrar realmente no curso deste tutorial. Mas é uma ótima maneira de
limpar carros alegóricos e é usado muito em frameworks responsivos e coisas assim. Espero fazer uma lição futura sobre design responsivo e ela será incluída lá. Isso é o que o CF se refere aqui. Na verdade, isso é, lá vamos nós, no comentário que, e isso funciona. Se você quiser, você pode pesquisar no Google por conta própria e conferir. Jogue com esta caneta e dê uma olhada em como mudar valores diferentes muda esse layout e seu comportamento e então vamos aplicar o que sabemos sobre carros alegóricos agora, ao cabeçalho do nosso projeto. Em nossa folha de estilo, vamos começar a colocar as classes no lugar e os estilos no lugar, que vão fazer nossa barra de navegação olhar como deveria. Com estes ícones sociais à direita e a navegação à esquerda. Aqui vamos nós. A primeira coisa que eu vou fazer é adicionar estouro escondido para o recipiente 960 elemento. O que isso vai fazer é sempre que fizermos um layout baseado em flutuação dentro deste contêiner, ele irá automaticamente limpá-lo. Nós não temos que
pensar em nada além de escrever nosso flutuador esquerdo em nossa direita flutuante. Vamos fazer isso primeiro e depois deixe-me dar uma olhada nos nomes dos nossos contêineres aqui. Nós temos navbar aqui que nós
vamos para a esquerda então vamos dizer, oh, nós temos navbar lá. Desculpe, não é navbar, é? O que é isso? Temos um chamado de navegação principal e outro chamado social. Isso é o que eu estou procurando. Nós vamos dizer que a navegação principal vai ser flutuar para a esquerda e então, como o único social vai ser flutuar para a direita. Vês como estou a recuar um bocadinho destes? Eu aperto Tab toda vez que eu dividir essas chaves e ajuda a digitalizar o documento quando você está olhando, especialmente quando ele se torna longo. Quando você está procurando classes diferentes para voltar e editar e especialmente no HTML. Toda vez que eu entro em uma nova caixa, eu estou recuando coisas para que eu possa olhar para um código de bloco como este e dizer, oh, isso é uma caixa e tem outra caixa, que é um irmão e este é um pai. Eu posso dizer todas essas coisas só olhando para o quão mais recuado. Outra coisa é, você vê essa pequena linha azul aqui? Em Atom, quando eu toco em um elemento, ele me mostra onde está a tag de abertura ou fechamento correspondente. Essas são algumas outras maneiras úteis de ter uma representação visual para as caixas abstratas que você está construindo no código. Temos a navegação principal flutuando para a esquerda e social flutuando para a direita. Nós temos overflow escondido especificado, então deve funcionar. Presto. Lá vamos nós. Isso é para a direita, é para a esquerda. Agora isso ainda parece lixo, mas vamos falar sobre o estilo do texto muito em breve aqui. Uma coisa que eu quero que você faça, vá para a CodePen e basta apertar criar e bater caneta e tentar escrever a si mesmo, um layout muito simples baseado em flutuação. Eu vou fazer isso muito rápido. Se você quiser pode pular para o final do vídeo se você está tipo, não, eu entendi, mas muito rápido, vamos fazê-lo. Nós vamos ter uma div com a classe de contêiner e então eu vou fechar essa div, e então eu vou ter uma coluna. Nessa coluna de uma div, que será dada uma classe de esquerda, feche essa div e então teremos uma div com uma classe de direita, e então vamos Olá aqui e World aqui. Você vê que eles estão empilhados bem ali. Vamos tentar fazê-los alinhar à esquerda e à direita. Para o recipiente, digamos que largura é digamos 500 pixels, margem é Auto e eu quero colocar overflow escondido lá. Vamos fazer uma cor de fundo só para que possamos ver como as caixas se parecem. Deixe-me fazer vermelho. Agora ponto à esquerda vai ficar flutuando à esquerda e ponto à direita, é flutuar à direita. Lá estão eles. Agora você vê que o vermelho se afastou do nosso contêiner principal de fundo. Isso é porque não está claro. Vamos fazer um estouro escondido e ele volta. Há um flutuador de duas colunas realmente básico. Nós nem sequer colocamos larguras aqui. Poderíamos se quisermos, mas só queria que escrevesse isso rápido. Só para dar a si mesmo um exercício de layout de duas colunas, muito simples sem eu ter escrito qualquer um do código. Parabéns, porque esta é uma convenção de layout complicado e se você dominar isso, você será capaz de escrever seus próprios layouts facilmente e depurar quando eles vão mal, que é muito importante. Parabéns pessoal. Vamos passar para o próximo vídeo. Vamos começar a fazer com que isto pareça um site de verdade.
7. Fontes web: Ok. Isso vai ser muito divertido e vai ser alto impacto e rápido. Vamos adicionar algumas fontes da web. Agora, nos velhos tempos, você realmente só tinha algumas fontes diferentes para escolher. Você tinha que confiar que as fontes estavam presentes no computador de um usuário. Bem, agora com fontes web e Google e todos esses outros serviços hospedando-os em CDNs, você pode obter fontes realmente confiáveis, bonitas de graça ou [inaudível] serviços pagos como Typekit e coisas assim. Mas toneladas de maneiras de obter grandes fontes em seu site. Nós vamos olhar para um recurso livre, biblioteca de fontes do Google, e nós vamos colocá-los e obter este site moldado um pouco. Aqui vamos nós. Off para fontes do Google. Este é o Google Fonts. Nós temos, apenas provavelmente centenas de fontes para escolher aqui. Quero checar algumas coisas. Alguns termos, Serif, Sans Serif, Display, Manigrafia, Monospace. Vamos dar uma olhada em como essas fontes se parecem. Uma fonte Serif, veja estas pequenas caudas, pequenas peças horizontais e todos estes números
[inaudíveis], muito pronunciado Serif. Este M, tem aqueles pezinhos que saem do topo e do fundo. Isso é o que um Serif é. fonte Serif tem uns pezinhos nela. Sem Serif. Sans significa sem. Você vai notar que estes são todos sem os pezinhos. O tipo de exibição geralmente é tipo com muita personalidade. Geralmente é inadequado para cópias
corporais onde você tem que ler toneladas e toneladas dele. Pode ser difícil de ler, mas geralmente tem muita personalidade e é ótimo para uma manchete ou algo assim. Obviamente caligrafia vai ser, eu sinto que isso está na categoria maior do tipo de exibição. Personalidade? Sim. Legibilidade? Nem tanto. Então Monospace é um muito, quase
parece um terminal de computador. É onde todas essas coisas estão. Eu uso Monospace e caligrafia, desligado. Para este projeto específico, escolhi um tipo de Display e um tipo Sans Serif. O tipo Display era Bungee e o Sans Serif era Open Sans. Vamos procurar por Bungee aqui. Bem aqui. Se você clicar neste “PLUS BOTON”, ele
adiciona-o a uma coleção para você aqui. Vamos acrescentar. Vamos colocar Open Sans lá também e eu vou te mostrar. Abra Sans, adicione isso. É incrível como o Google torna isso fácil. Tudo que você tem que fazer, isso vai ser hospedado em seu CDN. Sim, existem diferentes maneiras de hospedá-los em seu próprio servidor e você tem que usar uma declaração de face de fonte. Não vou entrar nisso nesta lição em particular. Vamos fazer da maneira mais fácil. Você copia isso e cola-o no cabeçalho do seu arquivo HTML. A razão é que você deseja carregar suas fontes antes de
começar a dizer à sua folha de estilos o que fazer com elas. Se a sua folha de estilos for carregada antes das fontes, há uma chance de que seu navegador não reconheça o que está acontecendo. Você basicamente estaria dizendo, “Ei, use Bungee para todas essas manchetes.” O navegador diria: “Eu nem sei o que é Bungee. Eu não baixei nada que corresponda a isso.” Vamos carregar as fontes primeiro aqui. Você vê Bungee e Open Sans sendo carregados. Vamos especificar os pesos que queremos usar porque eles vêm com, aqui você vai personalizar, um monte de pesos diferentes. Você pode escolher, como 300 e bold 700 para Open Sans e, em seguida, para Bungee, estamos apenas usando o 400 normal, esse é o único tamanho que ele tem. Volte para incorporar, copie isso. Você vê como os tamanhos lá também. Agora estamos prontos para começar a estilizar qualquer texto que quisermos. Olhando para o nosso arquivo de design aqui, vemos que este cabeçalho tem textos Bungee, seu botão tem textos Bungee, isso é tudo Bungee, Bungee em todos os lugares. Vamos começar a escrever alguns estilos para essas coisas. Parece que temos a etiqueta H1, a etiqueta H2, todos eles vão ser Bungee. Vamos para os nossos estilos aqui e podemos escrever H1. Existem todas essas propriedades diferentes que pertencem sob a declaração de fonte. Vamos começar com a família de fontes. Vamos dizer entre aspas, Bungee. Então isso vai ser uma pilha de fontes. Uma pilha de fontes é uma ordem de retorno. Vamos dizer Sans Serif aqui. O que isso significa é que, se o navegador não consegue encontrar o Bungee, basta exibir qualquer que seja o padrão Sans Serif. Vamos colocar mais um e então digamos, Helvetica. Se você não consegue encontrar Bungee, use Helvetica, se você não consegue encontrar Helvetica, use qualquer velho Sans Serif. Poderíamos dizer que isso é verdade para as tags H2 também e H3. Guarde isso e vamos dar uma olhada no nosso site aqui para ver o que conseguimos. Lá a folha de estilo errado aberto. Isso é o que estamos fazendo errado. Estou guardando essas folhas de estilo no final de cada lição para que você tenha um registro de tudo o que foi feito para essa lição. Comecei com aquela para esta lição e comecei a escrever no lugar errado. Aqui vamos nós, vamos fazer isso. H1, H2, H3, re fazê-lo e lá você vê que temos Bungee aparecendo para todo o nosso texto. Vamos tomar a abordagem oposta para o que eu vou chamar de fonte corporal. Vamos usar o Open Sans anexando-o à etiqueta do corpo. Basicamente, isso diz, fazer todas as fontes Open Sans. Depois voltamos e mudaremos especificamente os que queremos para Bungee. Aqui vamos nós. A razão pela qual isto está entre aspas é que tem um espaço. Se eu não colocar isso entre aspas, então o navegador vai interpretar isso como duas fontes separadas. Vírgula, agora vamos voltar e dar uma olhada. Devemos ver um monte de Open Sans, por padrão ele vai para Times New Roman. Isso tudo deve mudar para um bom e fino Sans Serif. Lá vamos nós. Temos boas mensagens agora. Vamos dar uma olhada nos fundos
na próxima lição e então vamos chegar ao posicionamento absoluto, que
possamos encerrar isso. Na pasta extras, na pasta lição sete, adicionei todos os estilos relacionados ao tipo à folha de estilo. Percorra e remova
os comentários desses estilos relacionados ao tipo um de cada vez para ver como eles afetam seu layout. Então, vemo-nos na próxima lição.
8. Posicionamento absoluto: Posicionamento é um dos aspectos mais incompreendidos do layout CSS, mesmo desenvolvedores experientes às vezes não acertam. Há quatro posicionamentos diferentes, e esses quadrados ilustram as maneiras como eles funcionam. Estática é o tipo de posicionamento padrão e é o que você
esperaria é um elemento que ocupa um espaço no DOM. O próximo é relativo. posicionamento relativo é único, o próprio elemento ocupa o mesmo lugar no DOM que tinha antes de o posicionamento ser aplicado, mas aparecerá em outro lugar como um holograma, vou ilustrar isso com o código de demonstração caso isso não esteja fazendo muito sentido. Depois há os dois que chamo de fantasmas, posicionamento
fixo e absoluto. Eu me refiro a eles como fantasmas porque embora você possa vê-los, eles realmente não têm a capacidade de empurrar qualquer coisa para fora do caminho. Um pouco como um carro alegórico, mas mesmo com menos presença no DOM, verdade, são retirados inteiramente do DOM quando eles são invocados. posicionamento fixo é puxado para a parte superior ou inferior da porta de exibição, e ele faz referência apenas à porta de exibição,
a porta de exibição é a sua janela, a janela do navegador. Sempre que você tiver visto um cabeçalho fixo quando você rolar para baixo um site e o cabeçalho permanece no topo, isso geralmente é um posicionamento fixo. Então finalmente chegamos ao posicionamento absoluto, que é o tipo que você provavelmente usaria mais. Ele é puxado para fora do fluxo normal, e para sua posição, como quão longe no x, quão longe para baixo no y, ele faz referência ao próximo contêiner pai que tem posicionamento especificado. Eu vou fazer uma ilustração aqui, porque isso é difícil de entender, ou pelo menos foi para mim. Se eu tiver esse retângulo azulado e o retângulo laranja, e o retângulo laranja não tiver algum posicionamento especificado, ele irá para o contêiner pai ou
o contêiner laranja procurando por referência de posicionamento. Se esse contêiner não tiver referência de posicionamento, ele continuará indo até atingir a borda da janela do navegador. O que você tem que fazer é no recipiente pai do objeto a ser posicionado absolutamente, você tem que colocar posição relativa. Você tem que usar absoluto e relativo em conjunto um com o outro, é uma maneira muito estranha de fazê-lo, mas é assim que é. Não sei por que tem que ser tão complicado, mas sei como controlá-lo. Vamos dar uma olhada no nosso código. Vá para a pasta de lições de posicionamento absoluto e basta copiar tudo e colá-lo em seu CSS, e então vamos passar por algumas dessas linhas comentadas de código. Agora, o primeiro que você vai chegar na verdade é esta posição relativa, deixe isso em paz por agora. Vamos descer para esta linha moozedoo aqui. Quando descomentarmos
isto, vai aplicar um posicionamento absoluto a esse pequeno personagem aqui, este tipo. Lá está ele, e seu elemento vai começar a procurar o DOM até encontrar outro elemento que tem posicionamento aplicado a ele, um elemento que é seu pai. Não há outros elementos com isso especificado agora, então basicamente vai até a janela do navegador, então veja isso, lá vai ele. Ele está seguindo estas direções, inferior zero esquerda três se marcar estes off, ele vai, ele não tem qualquer posicionamento em dobra todos. Deixe-me mostrar-lhe como é com a posição relativa, e desligar isso. Com posição relativa, ele ainda ocupa um lugar no DOM, mas se eu fizer algo como mudar a distância a partir do fundo, vamos usar um 100 pixels, você verá um movimento e você pensaria que
isso permitiria para mover por cima porque ele está centralizado. Mas não porque seu elemento ainda existe no DOM aqui, entanto, ele está apenas sendo exibido aqui. Mas algo bizarro sobre o posicionamento relativo, e eu não encontrei um grande uso para ele, honestamente, além de ser usado como uma classe de posicionamento de contêiner pai para posicionamento absoluto, vamos ver como esses Dois trabalham juntos. Aqui ele está com posicionamento absoluto aplicado, se vamos até o elemento que queremos que ele faça referência, que neste caso é o herói, e colocamos posição relativa em seu quarto. Agora ele procura todo o caminho até encontrar isso e então de lá ele diz que tudo bem, eu vou para baixo zero, esquerda 3%, é assim que encontramos a posição dele. Podemos ir até aqui agora, descomentar esta linha de texto no herói contra herói. Lá vamos nós, e ele vai para onde quer que seja suposto ir. Espero que isso explique um pouco o posicionamento absoluto, vou mostrar-lhe outro exemplo aqui em baixo também. Vamos brincar com o posicionamento fixo muito rápido. Isso não faz parte do projeto, mas pode ser algo divertido para você conferir. Nós vamos pegar nossa barra de navegação aqui, vamos fazer um cabeçote pegajoso fora dele. Vamos fazer posição fixa, lembrar que posição fixa funciona apenas na parte superior e inferior da janela do navegador, e só pode referenciar a janela do navegador para
posicionamento para que você não a use com posicionamento relativo. Você viu que desapareceu, temos que dar um índice z, então você tem um índice x que é da esquerda para a direita, um índice y que é de cima para baixo, um índice z sai em zero. Isso acabou de cair para a posição zero, e nós precisamos movê-lo para a posição de um ou superior para que ele possa estar acima do resto do conteúdo, e então nós só temos que dar a este a largura de 100 por cento para fazê-lo preencher esse backup, então agora temos um cabeçalho pegajoso. Uma coisa que você percebe é que uma vez que isso é puxado para fora do DOM, ele não empurra esta imagem de cima para baixo, então se eu desligar isso, por exemplo, você vai notar que ele salta, e agora ele está empurrando esta imagem de herói para baixo, então isso é algo a considerar quando você está colocando para fora,
você vai ter que permitir qualquer que seja essa distância, mas de qualquer maneira, esse é um experimento final lá, você pode brincar com isso você mesmo. O que nós vamos fazer é descer aqui e usar algum posicionamento absoluto para fazer essas cartas de banda parecerem com o design, assim. Eles têm um retângulo semitransparente com um pouco de informação nele. Vamos começar por descomentar o cartão da banda, vamos olhar para isso, nada realmente acontece, nada realmente deveria, ele apenas define a altura, torna a posição relativa, que nos define para usar o posicionamento absoluto e coloca uma margem sobre ele. Vamos fazer a barra de título aqui, mas comente o posicionamento absoluto para agora. Você vê que ele renderiza abaixo aqui, é suposto estar acima, nós vamos usar o posicionamento absoluto para colocá-lo em cima dessa imagem. Vamos colocar alguns desses outros estilos aqui, barra de
título, nome da banda, você verá que há um carro alegórico, porque nós temos um título à esquerda e uma noite à direita, então aqui está a noite, veja se está flutuando à direita, então isso deve ir para a direita, e lá vai ele, agora vamos descomentar posição absoluta e ver o que acontece. Agora todo esse conteúdo pode ser retirado
do DOM e sobrepor seus vizinhos aqui dentro desta div. Muito rápido, só porque eu quero dirigir esta casa, este bloco de contêiner aqui tem posicionado relativo, e então qualquer coisa dentro dele com uma posição absoluta pode referenciá-lo para posicionamento, então você vê que nós temos tem baixo zero bem ali, e que está aderindo ao fundo bem ali. Agora vamos realmente rápido pegar esses estilos e colocá-los flutuando para a direita, isso deve ser muito velho já ouvido agora. Eu vou adicionar alguma cor de fundo para essas coisas, e vamos estilizar o cabeçalho, chave lá. Agora, aqui está algo interessante no cabeçalho ou um pequeno truque que eu usei, eu coloquei preenchimento todo o caminho em torno desse cabeçalho, e ele está dentro de uma caixa que tem preenchimento. Mas eu queria que o roxo se estendesse até o fim, então o que eu tinha que fazer era usar margem negativa. Dê uma olhada neste truque, sempre que você precisar você pode usar uma margem negativa, você vê este negativo 20 pixels? Vamos definir isso para zero, e você pode ver o comportamento padrão, ver que tem essa lacuna feia. Usando margem negativa, eu posso estender sobre a margem. Isso é um pouco contra-intuitivo, mas é um ótimo hack. Temos essas caixas, vamos aplicar uma largura e um flutuador para que
possamos fazer essas coisas se alinharem da maneira que deveriam. Um pouco de estilo para o preço, estilo a descrição, lá vamos nós, está começando a ficar bem, e então, finalmente, temos todo esse estilo de recipiente. Estes são todos estilizados, vamos voltar aqui e fazer os carros alegóricos, então devemos ter o layout da página inicial terminado. Lua. Você poderia reproduzir algo como isso, quero dizer, definitivamente cavar por aí, brincar com isso, conhecer como funciona, quebrá-lo, corrigi-lo, mas com base no que você aprendeu nessas lições, você poderia executar esse tipo de layout. Talvez não seja rápido, indolor e fácil, mas você definitivamente tem as ferramentas para fazê-lo, e se você fizer isso algumas vezes vai fazer sentido. Agora vamos pegar o que temos aqui e reutilizar e reciclar para configurar rapidamente o resto de nossas páginas.
9. Receita para velocidade: A melhor coisa sobre o código é que uma vez que você o tenha escrito, você pode reutilizá-lo. Temos alguns elementos nesta página que repetem o cabeçalho, o rodapé, o fundo por trás desta seção do meio. Vamos copiar essas coisas para nossas próximas duas páginas para começar a criar. Open Experience dot HTML a partir dos arquivos iniciais, ele está vazio, mas o que estamos fazendo aqui é pegar as partes reutilizáveis do site. Então pegamos a cabeça HTML do tipo doc-type, usamos as mesmas coisas lá, classe corporal, casa, vamos mudar para a experiência, mas tudo, vamos fazer o cabeçalho por enquanto. Do tipo doc-type todo o caminho até o cabeçalho, copie isso e cole-o aqui, e você sabe o que meus olhos vão agarrar o rodapé porque nós usamos isso. Então vamos obter o HTML próximo e todo o caminho até o rodapé, e podemos dizer que pegamos a quantidade certa de código porque ver como todos os colchetes combinam, então temos nossas caixas alinhadas exatamente para a direita. Agora, vamos mudar isso para experiência. Eu não sei se você se lembra ou não, mas nós escrevemos um par de estilos em nossa folha de estilo para que ele forneça um herói diferente para a página de experiência faz experiências e nós podemos fazer a mesma coisa para localização. Todos o mesmo código, vamos trocar a imagem em segundo plano. Então vamos dar uma olhada no que temos aqui. Vou recarregar isso para a experiência, temos o nosso cabeçalho, temos o nosso rodapé. Vamos alterar isso para que ele indique que estamos na página de experiência. Aqui eu tenho essa aula ativa. Ativo é aquele que coloca a linha abaixo da página em que estamos, então se eu mudar isso para o link de experiência, lá vai você. Então agora temos uma maneira de dizer em que página estamos. Que outras coisas podemos emprestar? Toda a seção de heróis é a mesma, então vamos pegar emprestado, temos herói todo o caminho, onde ele fecha? Bem ali, e apenas vá e coloque isso dentro. Veja tudo alinhado para que saibamos que estamos no nível certo de caixas. Então nós temos nosso histórico diferente e nós podemos apenas trocar essas
coisas de acordo com a base necessária para a cópia que nós precisamos. Então, não precisamos do logotipo Moozedoo, nos livramos disso, não
precisamos mais desse RH, não
precisamos mais do botão de ingressos, e não precisamos do pequeno personagem. Tudo o que precisamos é da manchete. Para olhar para a nossa composição de design, podemos pegar a manchete a partir disso, lá vamos nós. Então, apenas assim, temos uma configuração de página inteira e, em seguida, obviamente, temos que fazer algum conteúdo no meio aqui, mas vamos tomar isso como nossa outra página ou página localização apresenta os mesmos tipos de layout de página, podemos realmente rapidamente colocar isso na fila para comprar copiar tudo isso em nossa página de localização. Tudo o que temos que fazer é mudar essa classe ativa para local e mudar essa classe corporal para local, e lá vamos nós. Então, podemos realmente rapidamente duplicar layouts uma vez que tenhamos alguma dessa cópia planejada. Vamos fazer a parte do meio da experiência, a última coisa que eu queria mostrar é como você pode usar a galeria secreta flutuante. Vá para a pasta de extras da lição 10, e eu tenho o conteúdo preparado para ambas as páginas. Então vamos conferir a página de experiência. Pegue tudo de herói,
bem, basta pegar tudo, porque é apenas todo o conteúdo principal, e vamos colar isso em nossa página de experiência. Vamos passar por cima de herói, devemos pegar tudo do herói e do meio e tudo mais. Parece que nosso recuo desmoronou um pouco aqui, então você pode empurrar o comando, chave
encaracolada esquerda e recuo 1, e você pode empurrar o comando de chave encaracolada nisso, do outro lado. Então eu vou recuar isso de volta também, para ter tudo alinhado. Isto pode parecer ridiculamente TOC, mas estou a dizer-te que vai ajudar-te na tua codificação a perceber quantas caixas tens dentro de ti. Então eu salvo isso e dou uma olhada no navegador, mas na página de experiência, e eu tenho esses recursos diferentes aqui. Então, em nosso layout, eles se parecem com telhas ou eles são como um layout de estilo de galeria, que
possamos facilmente realizar esse efeito usando carros alegóricos, e ao contrário do nosso flutuador de duas colunas que tínhamos antes,
podemos configurá-los todos como flutuam à esquerda, e se eles são metade da largura que seu contêiner pai, eles vão apenas todos empilhar. Mas eu vou mostrar-lhe um seletor CSS realmente puro para usar para ajudar com isso. Vamos pegar os estilos desta pasta da lição 10,
selecioná-los todos, copiar, ir para a nossa folha de estilos, que está bem aqui. Cole-os, se descomentar o texto pull, isso vai nos dar este texto aqui. Não há muita coisa acontecendo lá, nada que você não poderia descobrir, apenas alguns estilos de fonte normais. Vamos descomentar recurso, que vai começar a emprestar algum estilo para isso. Vamos olhar para o que adicionamos, o recurso que adicionamos uma largura que permitiu estes.
10. Valeu!: Obrigado por fazer minha aula de Skillshare. Espero que tenha saído muito disso. Se você tem sugestões, comentários, críticas, por favor deixe uma mensagem e eu adoraria se você pudesse me deixar uma nota positiva. Se você tem alguma idéia para tópicos futuros, eu adoraria ouvi-los também. Boa sorte, e te vejo lá no Skillshare.
Marc Nischan, Artsy people can code!
