Conceitos básicos de layout em web design: saiba como desenvolver seu projeto com HTML & CSS

1. Por que você deveria fazer este curso: Ei, é o Rich aqui. Lembro-me de desenhar o meu primeiro website. Foi divertido e incrível, mas tentar codificar foi um pesadelo. Eu não entendia como acertar as coisas. Um deles, eu não sabia por que tudo começou no canto superior esquerdo. Eu não sabia quando usar flutuador ou posição. Eu não entendia profundidade. Eu não sabia por que alguns elementos são mais largos do que eu defini para ser e eu certamente não sabia como colocar meu conteúdo no meio da tela. Em suma, Não era nada como o Photoshop. A coisa é, que foi em 2007 e embora aplicativos de web design são incríveis, o que você projetar e, em seguida, ainda nunca o site final. O site final é aquele que você pode navegar. É o que está na frente do seu cliente e a habilidade de saber como descrever um design para um navegador usando HTML e CSS está se tornando uma habilidade fundamental e muitas vezes necessária. HTML e CSS são um par de linguagem de design descritivo que pode ser aprendido exatamente como você aprende a usar o Sketch ou o Photoshop. Então, após esta classe você vai entender o HTML Box Model, flutuadores, tipos de exibição, posicionamento e profundidade. Você saberá quando deixar o navegador colocar as coisas acima, que ele faz um bom trabalho, e quando você deve assumir o controle. Você entenderá mais sobre como o navegador funciona e como ele difere dos aplicativos de design. Quando você está projetando, sabendo essas coisas permitirá que você tome decisões de design informadas e quando você está escrevendo HTML e CSS, isso torna tudo mais fácil de entender. Então, em poucas palavras, esta classe irá cobrir cinco tipos diferentes de posicionamento, gerenciamento de profundidade, tipos de exibição comuns, preenchimento, margens, bordas, traduzir X e Y, HTML e CSS terminologia e muitos exemplos. Terminaremos criando uma página web usando o que aprendemos durante a aula. Então, se isso soa divertido, então siga junto. 2. Teoria de caixas em HTML: Vamos cobrir o que eu gosto de chamar de Teoria da Caixa HTML. É útil fazer isso para que você entenda como o HTML funciona. Na maioria dos aplicativos de design, como o Photoshop, o Sketch e o Illustrator, uma camada aparecerá visualmente em uma profundidade maior a outra, se estiver mais alta no painel de camadas. Isso também se aplica a grupos e subcamadas. Em HTML, é um pouco diferente. Quando um elemento HTML, que é como uma camada, é maior no documento HTML do que outro, ele aparece antes dos elementos subseqüentes na página. Se ele vem primeiro no documento, ele vem primeiro visualmente, é mais alto. O código se correlaciona com o que vemos. Em HTML, os elementos são como caixas e são empilhados por padrão da parte superior do documento para a parte inferior. Um elemento HTML é caracterizado por uma tag de abertura e uma tag de fechamento. Quando você adiciona outro elemento, é como adicionar outra caixa em cima de todos os outros. Agora, você pode colocar elementos dentro de outros elementos e isso é exatamente o mesmo que colocar uma caixa dentro de uma caixa. Em HTML você pode colocar quantas caixas dentro de caixas quiser e a mesma regra se aplica dentro de uma caixa. Por padrão, essas caixas são empilhadas de cima para baixo. O que é incrível sobre caixas HTML é que elas se expandem para conter tudo o que você coloca dentro delas. Por padrão, não há dimensões definidas. A maioria dos tipos de caixas HTML que são colocadas dentro de outras caixas expandem sua largura para preencher o espaço disponível. Vamos cobrir algumas exceções mais tarde. O que é incrível sobre isso é que, como humanos, não temos que escrever nenhum código para gerenciar as posições X e Y de qualquer uma dessas caixas. O navegador faz tudo isso por nós. As caixas empilham ordenadamente e se expandem quando precisam. Há exceções, é claro, e então há nós fazendo nossas próprias exceções porque queremos que nosso tamanho pareça de uma certa maneira. Podemos definir todos os tipos de propriedades e ter controle super fino sobre como nossas páginas web olhar e operar. É super divertido e é gratificante e também é um pouco assustador ao mesmo tempo. Esta classe avança da maneira padrão caixas HTML trabalhar para obter caixas para fazer todos os tipos de coisas como levitar, furar e mudar profundidade. Começamos a assumir o controle do navegador onde ele nos beneficia. 3. Terminologia de HTML e CSS: Então, eu geralmente não gosto de usar terminologia oficial da web. Soa geeky, soa estranho, e muitas vezes leva as pessoas a coçar a cabeça. Mas acho que para esta aula e para seus benefícios, ficar na mesma página seria muito útil. Em HTML, você tem um monte de conjuntos de tags que compõem seus documentos. Cada conjunto de tags tem um nome, uma tag de abertura, uma tag de fechamento e talvez algum conteúdo. Uma tag também pode ter atributos que consistem em um nome e valor de propriedade de atributo. Um nome de atributo seguido por um sinal de igual com informações entre aspas simples ou duplas é o que compõe esse atributo. Os atributos fornecem ao navegador informações extras sobre o conjunto de tags como, como estilizá-lo, onde o navegador deve ir em seguida, e onde a origem de uma imagem está, etc. Alguns conjuntos de tags, eles não precisam de uma tag de fechamento, então você pode escrever apenas uma tag especial como esta. Em CSS, você pode estilizar um elemento HTML ou vários elementos HTML com um conjunto de regras. Mas como nos referimos a todas essas partes em um conjunto de regras? Em primeiro lugar, temos o nosso seletor, que diz ao conjunto de regras quais elementos de estilo. Isso pode incluir cláusulas, IDs, tags, pseudocláusulas, vários filhos selecionados e aninhados e muito mais. Em seguida, vem o bloco de declaração, tudo dentro das chaves. Aqui é onde escrevemos as regras para estilizar nossos elementos selecionados. Cada regra que escrevemos é chamada de declaração, e é composta de um nome de propriedade e um valor de propriedade. Eles são separados por dois pontos e terminam com ponto e vírgula, e tudo isso é chamado de conjunto de regras. Então, espero que isso ajude para esta classe e para futuras informações que você consome. 4. Modelo de caixas e redimensionamento de caixas: O que eu fiz muitas vezes no passado foi definir um elemento para 100% de largura, e, em seguida, dar outra borda e algum preenchimento, e então ele é estendido além dos limites dos documentos. Super frustrante. Então, entender como o modelo de caixa funciona é super importante. Você pode evitar frustração e intermináveis hacks estúpidos. Você pode adicionar margem, preenchimento e bordas à maioria dos elementos. Estas três coisas compõem o modelo de caixa e afetam a largura e a altura de um elemento. A margem é o espaço de respiração. O elemento se dá de outros elementos. É como se fosse espaço pessoal. Borda é então a camada externa, que você pode estilizar. É como a primeira camada de roupa. Depois há o preenchimento, que é o espaço de respiração o elemento dá entre sua borda e seu conteúdo. Então, por padrão, se você definir a largura de um elemento 400 pixels e, em seguida, adicionar algum preenchimento e uma borda, a largura real do elemento aumenta além 400 pixels porque a largura que você está definindo é a largura do conteúdo interno. O mesmo se aplica à altura. No entanto, se você alterar o valor de dimensionamento de caixa para border-box, a largura definida será aplicada no nível de borda e não no nível de conteúdo interno. O valor padrão para dimensionamento de caixa é caixa de conteúdo. Mas, eu raramente gosto de usar border-box para tamanho de caixa. Então, aqui está um exemplo ao vivo no CodePen. Temos esta caixa 1, tem uma largura de 400 pixels, preenchimento de 50 pixels, e tem uma borda preta sólida com 20 pixels de largura. Então, quando inspecionamos esta caixa, clique com o botão direito do mouse, inspecionar, podemos ver que à medida que passamos o mouse sobre essa caixa, ela tem uma largura de 540 pixels. Por quê? Não tem uma largura de 540 pixels? Bem, se desenharmos aqui, podemos ver que o h2, que faz parte do conteúdo, tem uma largura de 400 pixels. É o que esta linha faz aqui. Ele define a largura interna para 400 pixels e, em seguida, adiciona o preenchimento, que seria preenchimento à esquerda de 50 pixels e preenchimento à direita de 50 pixels, que adiciona 100 pixels aos 400 pixels existentes. Em seguida, ele adiciona mais uma borda esquerda de 20 pixels e borda direita de 20 pixels, o que lhe dá um total geral de 540 pixels. Então, é bom saber. Você pode trabalhar com isso e muitos têm nos últimos dois anos. Mas, nós temos essa ótima nova maneira de trabalhar com o modelo de caixa, e é chamado de box-sizing: border-box. Incrível. Se você queria saber como eu acabei de fazer isso, você pode digitar bz e pressionar tab, e com algo chamado Emmet, que está disponível em todos os tipos de editores de código. Só o expande. Você pode digitar content-box, se você preferir as coisas do jeito antigo e você quer ser explícito, mas para mim, eu só gosto de usar box-sizing: border-box a maior parte do tempo. Isto é muito fácil para mim. Eu defino a largura e então eu digo que eu quero 50 pixels preenchimento e eu quero uma borda de 20 pixels e funciona tudo para mim. Muito obrigado. 5. Margin, Padding e Border: As declarações de margem, preenchimento e borda têm quatro lados da caixa que você pode definir. Você pode definir margin-top ou padding-left ou border-bottom. Por exemplo, se você quisesse definir todos os quatro lados, você poderia fazê-lo com quatro declarações separadas. Mas, você também pode usar declarações abreviadas. Usando a margem, você pode definir todos os quatro lados de uma só vez. Você pode definir os valores horizontal e vertical, ou pode definir todos os quatro lados como valores exclusivos. A ordem para o atalho é superior, direita, inferior, esquerda. Se for apenas um valor, aplica-se a todos os lados. Se houver dois valores, ele aplicará o primeiro valor para a parte superior e inferior e um segundo valor para a direita e para a esquerda. Se houver três valores, ele aplica o primeiro valor para cima, o segundo valor dois direita e esquerda e o terceiro valor para baixo. As mesmas regras se aplicam ao preenchimento. Os tipos de valores que você pode usar para margem e preenchimento são valores típicos de comprimento CSS: pixels, porcentagens, em, rem ou em e rem, etc. A declaração abreviada fronteira é ligeiramente diferente como a declaração border-bottom ou border-top também é um atalho. Então, quando estiver usando border-bottom, por exemplo, você pode definir a largura da borda, a cor da borda e o estilo da borda ao mesmo tempo. Então, quando você usa a declaração de borda, você só pode definir para todos os quatro lados. Mas você pode definir a cor, a largura e o estilo de todos os quatro lados ao mesmo tempo. Na maioria dos elementos, a largura geralmente é 100 por cento, e a altura geralmente é alta o suficiente para que seu conteúdo se encaixe. No entanto, essa largura de 100 por cento não está definida. Ele apenas preenche a largura disponível. Então, é muito fácil definir margens, preenchimentos e bordas e deixar o elemento preencher o espaço por padrão. A complexidade é introduzida quando um elemento não faz isso por padrão. Elementos como entradas são exemplos privilegiados. É tempo de exemplo novamente. Então, temos esta caixa. Dentro da caixa, temos este H2. Agora, este H2 é muito especial. Tem uma cor de fundo. Então, se tivermos que remover isso, você verá que a cor de fundo da caixa vem através. Então agora, vamos adicionar alguns preenchimentos, algumas margens, e vamos brincar com a abreviação de margens, preenchimentos, bordas. Então, primeiro, vamos adicionar um pouco de preenchimento. Podemos adicionar 20 pixels de preenchimento. Sim, parece ótimo. Agora, podemos ver o azul chegando. Legal. Vamos adicionar margem a seguir. Vamos adicionar 40 pixels de margem. Fantástico. Agora, se começarmos a mudar o preenchimento, podemos mudar isso para 30 pixels. Vamos mudá-lo para 70 pixels. Podemos começar a ver o que está acontecendo aqui. Isso é realmente ótimo. O que acontece se mudarmos este para 50 pixels. Muito legal. Então, você pode ver como podemos usar abreviação e isso é muito melhor do que ir padding-top 20 pixels e padding-bottom de 40 pixels e padding-bottom de 100 pixels e padding-left 30 pixels. Isso levou muito tempo, mas você também pode ver que você só quer especificar um preenchimento como padding-right, você pode escrevê-lo. Às vezes, quando você está escrevendo HTML da velha escola, especialmente para boletins HTML, essa sintaxe é necessária. Então, é bom saber. Alguma margem pode fazer a mesma coisa. Agora, vamos tentar a fronteira. Então, borda, vamos para 10 pixels preto. Isso realmente não importa o jeito que você coloca. Podemos dizer sólido. Isso é muito legal. Podemos ir para Trased. Além disso, muito legal. Você verá que se eu remover o preto e colocá-lo aqui, não fará diferença. Eu posso mudar isso para vermelho, eu posso mudar para amarelo ou qualquer outra coisa que eu realmente quero mudá-los também. Então, isso é muito legal, e então nós também podemos dizer border-top, podemos mudar o border-top para, digamos, 20 pixels preto sólido. Então, você pode ver como isso está acontecendo. É muito legal e o que não podemos fazer aqui é ser mais específico. Então, fronteira é um atalho, border-top é um atalho. Mas agora podemos dizer border-top-width, e podemos dizer algo como 30 pixels. Podemos dizer border-top-color, e podemos dizer vermelho. Então, essa é a diferença entre atalhos e sintaxe realmente longa, é muito bom saber ambos. Então, o segundo exemplo aqui é como fazer margining negativo. Bem, nós temos esse H2 e ele é chamado de H2 negativo. Agora, ele não parece muito negativo, ele não tem nenhuma negatividade sobre ele. Vamos tirar isso. Então, nós apenas ir algo como margem, ou talvez nós podemos apenas pressionar tabulação quando temos m para margem. Fantástico. Em seguida, podemos definir um negativo 20 pixels. Uau, olhe isso. O que acontece se formos negativos 120 pixels? Aqui vamos nós, 0,0. Então agora, é literalmente apenas no topo que é uma quantidade negativa. Bem, nós também poderíamos fazer o fundo, mas isso realmente não ajudaria. E quanto à esquerda? Então, vamos dar 120 pixels negativos lá, e se eu tiver um preenchimento de 50 pixels. Então, se nós apenas definir isso para um negativo 50, ele deve alinhar para a direita para o lado esquerdo. Muito legal. Se formos mais um negativo 100, ele deve alinhar todo o caminho para a esquerda. Essa é uma maneira muito fácil de fazer marginais negativos. Voilá. O H2 negativo. Este é o nosso terceiro exemplo. Queria que alguém tivesse me dito isso antes na minha carreira de desenvolvimento. Isso me frustrou sem fim. A pergunta que eu queria respondida e eu tinha que trabalhar sozinho era, como faço para obter algo alinhado horizontalmente? Quero que este grande bloco azul fique no meio da página. Como faço para colocá-los no meio? Na verdade, é muito simples. Verifique isso. Você só vai m para margem, pressione Tab, e então você vai '0 auto. ' Boom. Está no meio. O que isso está dizendo é que, para as margens esquerda e direita, é auto. Então, o navegador apenas funciona para você. Fantástico. Você tem uma largura de 400 pixels, podemos mudar isso para 600 pixels. Boom. Faz a mesma coisa, mesmo se tomarmos a largura que. Ainda é muito doce. Desfazer, olhe isso. Se você quiser escrever manualmente, você pode fazê-lo assim. Então, ml para margin-esquerda, auto e mr, também auto, então podemos tirar isso. Faz a mesma coisa. Doce. Agora, deixe-me falar sobre o colapso das margens. Então, o que temos aqui é um monte de p, todos eles têm uma classe de caixa e cada caixa tem um número, e esses números correlacionam-se com uma cor de fundo. Fantástico. Agora, cada caixa também tem um preenchimento de 10 pixels e uma margem superior e inferior de 30 pixels. Mas, se você tiver que olhar essas caixas de perto, você pode pensar que não são 30 pixels na parte inferior. Então, se inspecionarmos isso, veremos que a área laranja acima da caixa dois, que é cerca de 30 pixels. Legal. Mas, certamente, deve haver mais 30 pixels da margem inferior da caixa um. Então, se passarmos o mouse sobre a caixa um, veremos que com certeza, ele tem uma margem inferior, mas está se sobrepondo. Então, o que diabos está acontecendo aqui. Bem, uma das margens está caindo e é a menor das duas margens. Ele simplesmente desaparece, o que é legal às vezes, mas se você não espera e você não sabe o que está acontecendo, é frustrante. Então, fique ciente disso. 6. Tipos de exibição, estilo padrão e sobreposição: Cada tag tem um tipo de exibição padrão. A maioria das tags tem um padrão de display: block. Outros valores comuns são inline e inline-block. Há também tipos de exibição super impressionantes como flex e grade, mas eu estou levando aqueles para fora dessas classes. Eles são um pouco mais complexos. Outros valores de tipo de exibição que você pode encontrar são tabela, list-item, run-in, table-cell. Há um monte mais também. A coisa boa é que qualquer elemento pode obter o estilo de exibição padrão substituído, assim como qualquer outra propriedade. Então, deixe-me falar sobre as diferenças entre display: bloco inline, e bloco inline-, e elementos de bloco como uma div, uma tag p, ou um que você definiu uma declaração de bloco em exibição:. Vamos começar em uma nova linha e preencher todo o espaço horizontal disponível que é dado. A altura será suficiente para encaixar seu conteúdo. É uma caixa muito mágica. Mesmo se você definir uma largura e uma altura, o elemento começará em uma nova linha. Um elemento embutido, como uma tag, uma extensão, uma tag em, ou um em que você definiu uma declaração de exibição em linha, funciona quase da mesma forma que um pedaço de texto. Eles ocuparão o mínimo de espaço que puderem e se sentarão ao lado de outros elementos inline e inline block. Elementos em linha são destinados principalmente para texto e dados. Você não deve aninhar um elemento de bloco dentro de um elementos embutidos. Além disso, elementos inline não começarão em uma nova linha. Ao definir margens e acolchoamentos em elementos embutidos, as alterações verticais não serão vistas. No entanto, os horizontais serão. Se você adicionar uma borda, você pode ver o que realmente está acontecendo. É bastante incrível. Um elemento inline-block, muito parecido com entradas, selects, ou um que você definiu uma declaração de bloco inline-display em, tem o melhor dos mundos de bloco e inline. Ele pode sentar-se ao lado de elementos inline e inline-block. Quando você define margens, preenchimentos e bordas nele, ele ocupará espaço horizontal e vertical. Este tipo de exibição geralmente deve ser usado com elementos de texto e dados também. Como um bônus extra, se você quiser simplesmente esconder algo, use display: none. O que está acontecendo aqui? Parece uma bagunça absoluta. Bem, está uma bagunça. Há um monte de elementos inline, há esses elementos de bloco, e então há essa entrada, que é um elemento de bloco inline apenas arrepiando no meio do nada. Então, qual é o sentido disso? Eu só vou mostrar a vocês como substituir os tipos de exibição padrão. Então, a primeira coisa que eu vou fazer é mostrar a vocês como mudar o tipo de exibição div. Então, vamos para d tab. Eu vou mudar é para inline-block. Assim, perde a capacidade de expandir a largura total. Não começa em uma nova linha. Se mudarmos inline-block para inline, nada muda muito lá. Então, isso é muito legal. Agora, o que acontece se formos atrás do nosso “EM”? Nós mudamos isso para exibir: bloco. Assim, ocupa toda a largura. Eles começam uma nova linha. Fantástico. É realmente fácil. Confira isso. Se mudarmos isto para mostrar: nenhum, os EMS desapareceram. Vamos apenas desfazer isso, mudá-lo de volta para bloquear, e, em seguida, a coisa final é esta entrada o tipo de texto. Vamos mudar esse cara para exibir: bloquear. Você pode ver que ele começa em uma nova linha, mas não ocupa toda a largura. O que se passa com isso? Não tenho certeza. Então, vamos com w e expandir isso. Vamos definir para 100 por cento de largura. Lá vamos nós. Mas sabemos que isso pode ser um problema ao decidir adicionar preenchimento. Então, vamos adicionar um pouco de preenchimento. Preenchimento superior e inferior, 10 pixels. Preenchimento esquerdo e direito, vamos para 40 pixels. Mas agora ele meio que sai da borda da página, que não é o que queremos fazer. Então, como mudamos isso? Nós vamos para o bz, que é o tamanho da caixa, e nós definimos nossa caixa de tamanho para border-box. Assim mesmo, são coisas consertadas. Podemos adicionar uma margem. Então, superior e inferior, vamos para 20 pixels. Esquerda e direita, vamos para zero. Lá vamos nós. Nossa entrada, que tinha um tipo de exibição de bloco inline-, agora tem uma exibição de bloco e está funcionando perfeitamente. Então, lá vamos nós. É assim que você substitui seus tipos de exibição. É realmente fácil. 7. Floating: O próximo tópico que vamos abordar é flutuar, que é bastante incrível, mas pode ficar muito complicado se você começar a usá-lo para as coisas erradas. O que é realmente bom em ser usado para obter texto para contornar um elemento. Se você tiver um elemento div pai, com um elemento p dentro, adicione outro elemento como uma div ou uma imagem para o elemento pai e dar-lhe uma largura e altura. Em seguida, dê-lhe uma declaração à esquerda flutuante. Você pode escolher entre um valor flutuante de esquerda, direita ou nenhum. Podemos adicionar outro elemento e flutuá-lo direito. Você verá como as texturas fluem em torno dele. Podemos então dar a esses elementos flutuantes alguma margem para que o texto não fique muito próximo a ele. O que significa flutuante é que um elemento sai do fluxo normal e deixa o resto como está, ou elementos embutidos irão envolvê-lo em torno dele. Eu não sugiro usar misturas de elementos inline e bloco quando se trata de flutuar. Um elemento flutuante irá flutuar para a esquerda ou para a direita se houver espaço para fazê-lo. Caso contrário, ele irá para uma nova linha. Às vezes, você deseja que um elemento seja um elemento flutuante, mas você deseja que ele comece depois de outros elementos flutuantes, ou você deseja que um elemento regular seja exibido após um elemento flutuante que o precede. A melhor maneira de fazer isso é usar uma declaração clara. Você pode definir qual lado ele deve limpar, esquerda, direita, ambos ou nenhum, e ele será exibido após o último elemento que teve uma declaração clara esquerda ou direita, ou ele virá depois de todos os elementos flutuantes anteriores. Mas cuidado. Como um elemento flutuante sai do fluxo normal, se um elemento pai contém apenas elementos flutuantes, ele não pode calcular sua altura corretamente. Então, muitas vezes aparecerá como se não houvesse elementos pai. Existem alguns hacks e correções para isso, mas cuidado. É o momento do exemplo. Ok. Então, o que temos aqui? Bem, nós temos essa tag div e dentro dessa tag div, temos outra tag div com a classe de imagem um, e então temos uma tag de imagem com a classe de imagem dois, e tem uma fonte, que aponta para isso Aqui é um rapazinho. Então temos uma tag p com um monte de texto dentro dela. O que queremos que ele faça é que nós queremos que ele flutue esses dois caracteres dentro do texto. Então, vamos para o nosso CSS. Vamos para a imagem um primeiro, que é a div e vamos fl para float, pressione Tab para expandir isso, padrão para flutuar à esquerda, o que é fantástico. Nós também poderíamos flutuar direito, o que seria ótimo. Então, talvez vamos tentar isso. Então imagem dois, vamos para carros alegóricos, sobre os quais podemos falar se você quiser, e podemos dizer flutuar para a esquerda, e você verá que todos os textos apenas envolvem em torno dele e parece realmente legal. Se fizermos isso um pouco menor, você verá que, porque não há espaço suficiente, ele vai começar depois de outra coisa que estava flutuando antes. Então, isso é realmente fácil, isso é ótimo. Você também pode colocar algumas margens nesse cara. Então, queremos margem esquerda, margem inferior. Então, zero, zero, 20 pixels e 20 pixels. Isso é ótimo. Então nossa imagem dois, praticamente inversa disso. Basta lembrar de colocar um ponto-e-vírgula após flutuar à esquerda, e nós vamos zero, e então nós queremos 20 pixels à direita, 20 pixels na parte inferior, e zero à esquerda. Então, isso parece ótimo. O que é realmente importante perceber aqui é que isso funciona porque essas duas imagens estão no topo desta div, elas vêm antes da tag p. Então, se eu tiver que cortá-los e colocá-los abaixo da tag p dentro desta div, bem, realmente não funcionaria porque eles não estão flutuando em qualquer lugar ainda. Eles estão flutuando após este p. Então, se nós copiarmos esta etiqueta p aqui, lá vamos nós. Vai começar a flutuar exatamente onde está a etiqueta p. Então, muito importante saber se você quer que as coisas flutuem, coloque-as acima das coisas que você quer que elas flutuem dentro e entre elas. Ok. Então, sabemos como flutuar as coisas, mas como vamos contra o grão agora? Como fazemos as coisas não flutuarem? Como fazemos as coisas flutuarem atrás de outros elementos que flutuam? Bem, veja isso. Vamos copiar estes dois para o topo outra vez. Então, agora, eu tenho algumas imagens no topo, algumas imagens na parte inferior. Agora, vamos para o nosso CSS. Agora lembrem-se, imagem dois, essa é a que ficou em segundo lugar, na verdade. Então, há a imagem um, há a imagem dois. O que acontece se quisermos virar os dois para a esquerda? Não queremos que eles fiquem perto um do outro, isso só parece estranho. Então, o que podemos fazer aqui é dizer, flutuar para a direita, como fizemos, ou poderíamos dizer algo como esquerda clara. Desta forma, vai para a próxima linha. Agora, estamos tipo, o que está acontecendo aqui? Temos coisas acontecendo por todo o show. Bem, novamente, na imagem um, podemos dizer, limpar a esquerda, e agora, ele vai para as novas linhas. Então, você nunca vai ter duas imagens ou duas coisas flutuando ao lado do outro no lado esquerdo. Então, isso é realmente útil. Agora, podemos ter um monte de texto e vai envolver todas essas imagens. Podemos colocar a mesma quantidade de marginal em ambos, e lá vamos nós. Parece muito bom. Envolve essas imagens muito, muito bem. A outra coisa que podemos fazer é simplesmente definir flutuação para nenhum. Algo assim. Mas se você quer texto para contornar isso, bem, vamos deixar isso de fora. Agora, novamente, se as coisas estão flutuando direito, você também pode fazer coisas como limpar ambos, o que, neste caso, terá o mesmo efeito. Mas talvez, nós temos direitos e esquerda e, agora nós só queremos dizer realmente apenas limpar ambos os lados destes. Só por precaução, mudamos a flutuação para o lado direito. Então, se não tivéssemos nenhuma autorização aqui, isso é o que aconteceria. Então, leve isso aqui de novo. Se mudarmos esta imagem dois para limpar a direita, ou limpar ambos, ela começará em uma nova linha, e então, esta está flutuando para a direita. Então, queremos dizer claramente certo, ou limpar ambos. Ok. Vai para uma nova linha. Então isso é fantástico. É assim que fazemos a limpeza. Às vezes, ajuda muito. Então, novamente, esta tag p, se não queremos que ele se envolva com esses elementos claros, vamos verificar isso. Nós apenas vamos limpar ambos, e, voilá, ele vai para o fundo. Não quer ter nada a ver com estes elementos claros. Bastante fácil, certo? Então, nós temos essas três imagens, esse cara, e dois desses caras azuis, e nós queremos flutuá-las ao lado do outro. Às vezes isso é bastante útil, e você verá no próximo exemplo por que isso pode ser especialmente útil. Então, o que acontece aqui? Vamos flutuar para a esquerda, o que é ótimo, e então, vamos flutuar para a esquerda, o que é ótimo. Mas então, para onde vai o nosso passado? Para onde vai a div dos nossos pais? Simplesmente desaparece. Onde é que está? Bem, porque está flutuando, o pai vai. Bem, eu realmente não sei quão alto deve ser. Isto é um problema. Então, mencionei algumas correções que você pode fazer. O primeiro que podemos fazer para ir para os nossos pais e vamos transbordar e nos escondemos, o que é ótimo. Exceto, se você mudar sua imagem um, se você começar a traduzi-los. Então, transforme e traduza Y, digamos, e você vai para algo como 50 pixels. Ele corta-o fora, e quando vamos para algo como talvez 100 pixels. Cara, isso não vai dar certo. Então, se você vir aqui, vamos remover isso de novo. Você pode ver as pernas dele, e se colocarmos isso de volta, você não pode ver as pernas dele. Então, o que fazemos aqui é ir pontos pais, agora vamos colocar uma pseudo-classe depois. Vamos então definir o seu conteúdo para nada. Vamos então definir seu tipo de exibição para tabela e vamos dizer, limpar ambos. Agora, isso deve fazer o truque, e isso realmente chamado de Clearfix. Podemos remover nosso transbordamento escondido, e assim, as coisas estão funcionando novamente. Bastante doce. Agora, se você quiser fazer isso funcionar em todos os navegadores, há muitas maneiras diferentes de fazer essa coisa chamada Clearfix, mas para navegadores modernos, isso é tudo o que você vai fazer. Apenas na div pai, ou o elemento pai, você acabou de definir uma pseudo-classe de depois, definir seu conteúdo para nada, exibir tabela tipo, apenas muito estranho, e então você vai limpar ambos. Fantástico. Então, sobre o que é esse exemplo? Bem, na verdade eu vou fazer algumas colunas dentro de uma div pai ou uma div linha. Então, a primeira coisa que eu vou fazer é, eu vou colocar essas 1, 2, 3 colunas dentro de uma linha div. Vamos cortar isso, vamos apenas recuar nosso código. Nós vamos criar uma classe de linha assim, e então meu col, eu vou flutuar para a esquerda assim, e isso é realmente muito parecido com uma estrutura de menu ou uma estrutura de barra de navegação. Tenha isso em mente. Então, o que eu quero fazer é, eu quero colocar um pouco de margem no meio daqui. Então, margem esquerda, quero dizer 20 pixels. Legal. Isso parece muito bom. Então, vamos para a minha fila. Quero definir uma cor de fundo. Isso é legal. Só vou dizer vermelho por enquanto. O que está acontecendo? Bem, porque eles estão flutuando, agora precisamos de um Clearfix. Então, vamos Dot Row e vamos atrás da pseudo-classe. Ok. Então vamos dizer que o conteúdo não é nada. Vamos definir a tabela tipo de exibição dois, e então vamos dizer-lhe para limpar ambos. Ok. Então, lá vamos nós. Agora temos um fundo, agora temos algumas alturas, e nossa linha. Mas, o que eu quero fazer agora é, eu quero remover esta margem à esquerda do col 1. Então, o que eu posso fazer é dizer ponto col primeiro filho, esta é outra pseudo-classe, e eu posso dizer margin-esquerda, nada. Lá vamos nós. Então, eu só tenho uma margem esquerda entre Col 2 e Col 1 e entre Col 3 e Col 2. Agora, o que posso fazer é definir a largura destes dois. Digamos 100 pixels. Fantástico. Mas lembre-se que ainda não definimos o tamanho da caixa. Então, caixa de tamanho de border-box. Vamos apenas torná-los um pouco menores, ou vamos apenas torná-los 100 pixels de largura. Então, agora podemos definir nossa largura de linha. Então, seriam 100 pixels, 100 pixels, 100 pixels, mais 20, mais 20, mais 20, o que nos dará 340. Então, largura de 340 pixels. Perfeito. Então, podemos dizer margem, podemos dizer zero e auto. A central alinhou para nós. Fantástico. Agora, podemos copiar nossa fileira. Lá vamos nós. Talvez, nossa linha, podemos querer apenas colocar um pouco de margem superior ou margem inferior sobre. Então, vamos para 20 pixels lá. Fantástico. Podemos remover nossa cor de fundo, e lá vamos nós. Temos essa estrutura bastante semelhante a uma mesa, exceto que não é uma mesa, é feita de divs que estão flutuando. Fantástico. 8. Transform e Translate: Você pode usar a declaração de transformação para todos os tipos de coisas: rotações, escala, material 3D e movimento simples de elementos. Não vamos cobrir muito do que a declaração de transformação pode fazer, exceto os valores TranslaTeX e Translatey. A declaração de transformação é um pouco estranho como o valor é declaração de parte e valor de parte em si. Adicionamos colchetes ao final do valor Translatey ou TranslaTeX e inserimos um valor de medição. É muito fácil de usar, e é quase como um posicionamento relativo, que cobriremos em breve. A coisa ao usar traduzir é que o elemento se move no eixo horizontal ou vertical sem afetar nenhum outro elemento. É quase como se os outros elementos ainda pensassem que está onde está, mas na verdade está se movendo. É muito sorrateiro. Já, vamos fazer este exemplo. Então, o que vamos fazer é fazer algum “tf” para transformar, expandir isso e ir para “TranslaTeX”, e então entre parênteses, podemos colocar algo como 30 pixels. Ele vai para o lado direito se formos negativos 30 pixels. Lá vamos nós. Também podemos fazer algo como 90 por cento. Todo o caminho para a direita, 100%, até mais, todo o caminho para a direita. Então, isso é muito legal. O que podemos fazer agora é que podemos, vocês podem pensar, ir “transformar” e “Translatey”, e depois colocar 40 pixels negativos. Mas, o que acontece aqui? Bem, o que acontece aqui é que esta declaração de transformação substitui esta. Então, como nós realmente escrevemos Translatey e TranslaTeX juntos? Ou podemos pegar essa linha aqui. Vou copiá-lo, colá-lo aqui, e lá vamos nós. Então, podemos mudar isso de volta para 50 pixels, talvez. Em seguida, você pode ter TranslaTeX e Translatey na mesma linha. Você também poderia fazer um pouco mais de transformação. Então, vamos para uma escala de 1,5. Lá vamos nós. Muito legal, certo? Se você quisesse fazer isso muito mais curto, poderíamos simplesmente ir “translate ()” e colocar dois valores aqui, valor X, então 30 pixels. 50 pixels. Lá vamos nós. Então, traduzir com transformação é realmente fácil de traduzir a posição X e Y e nenhum dos outros elementos são afetados. Fantástico! 9. Terminologia de posicionamento: Até agora, aprendemos algumas maneiras de definir as coisas com HTML e CSS. Bem, agora, eu vou estar cobrindo posicionamento, o que, na minha opinião, é super importante e o cerne desta classe. Então, eu gostaria de explicar uma terminologia que eu gosto de usar. Eu incluí isso em um download de folha de cheatsheet, também, que você pode se referir como você vai. Para um elemento que tem uma declaração composta de uma propriedade position e um valor estático, eu chamaria de um elemento posicionado estaticamente ou um elemento estático. Para um elemento que tem um valor de posição de relativo, eu chamaria de um elemento relativamente posicionado ou um elemento relativo. Eu chamaria um elemento que tem um valor de posição de absoluto, um elemento absolutamente posicionado ou um elemento absoluto. Para um elemento que tem um valor de posição de fixo, eu chamaria apenas um elemento fixo. Finalmente, eu chamaria então um elemento com um valor de posição de pegajoso, um elemento pegajoso. 10. Posicionamento estático: Por padrão, a posição de um elemento é estática. Portanto, não há necessidade de configurá-lo você mesmo, a menos que você queira substituir um valor previamente definido. Elementos estáticos que aparecem primeiro em HTML devem aparecer primeiro no navegador. Muito parecido com uma pilha de caixas visualmente. Especialmente, se todos os elementos também são estáticos. O navegador posiciona dinamicamente elementos estáticos após o elemento estático ou relativo anterior. Ele também calcula a largura e a altura. A largura é geralmente 100 por cento e a altura geralmente é alta o suficiente para que seu conteúdo se encaixe. Você também pode definir a largura e a altura manualmente se quiser. Elementos estáticos são super úteis e removem a maior parte do trabalho duro que estamos acostumados na maioria dos aplicativos de design que usamos. Com elementos estáticos, as declarações superior, inferior, esquerda e direita, bem como as declarações z-index ou z-index, não funcionam. Você ainda pode deslocar essa posição usando margens e uma transformação e uma declaração de tradução, se desejar. Se você usar margin-left e margin-right, ele irá calcular a nova largura para você. Considerando que o uso de transformar e traduzir não mudará a largura. Elementos estáticos são ótimos para pedaços de texto, imagens, aspas, listas e tabelas. Basicamente, qualquer coisa que possa ter um comprimento variável. 11. Posicionamento relativo: Relativo de elementos são quase exatamente os mesmos que elementos estáticos, exceto por alguns benefícios adicionais. Quando você posiciona elementos relativamente, você está basicamente dizendo: “Se posicionarmos você, será relativo a onde você está”, o que não faz absolutamente nenhum sentido, mas me escute. Assim, com um elemento relativo, as declarações superior, inferior, esquerda e direita estão agora disponíveis. Você também vê no Chrome que esses valores de posição estão visíveis no diagrama de modelo de caixa. O que isso significa, é que podemos mover em elementos ao redor de cima, baixo, esquerda e direita se quisermos. É quase como transformar e traduzir. Se você quiser que ele tenha 10 pixels da parte inferior, selecione-o. Se você quiser 10 pixels da direita, selecione-o. Quando você posiciona um elemento relativo com uma dessas declarações, ele não ajusta automaticamente a largura ou a altura. Os tipos de valores que você pode usar para declaração superior, inferior, esquerda e direita são valores típicos de tamanho CSS, pixels, porcentagens, EM, REM, etc. Ok. É tempo de exemplo novamente. Então, o que vamos fazer aqui, é entrar em algum posicionamento relativo. Então, na caixa três, podemos pausar R. Se apenas fizermos pausar e pressionar Tab, seu relativo, mas poderíamos pausar R para posição relativa. Fantástico, então podemos definir um valor à esquerda, talvez você possa ir para 20 pixels e ele movê-lo para cima em 20 pixels. Você verá que a largura não muda. Podemos mudar isso para um valor negativo dois. Também podemos alterar os valores certos, onde você pode dizer 20 pixels. Mas isso é meio estranho porque isso é o que a esquerda está realmente fazendo. Então, vamos para 50 pixels. Ele ainda não faz nada e isso é porque você tem um valor esquerdo e um direito. Então, vamos tirar isso. Lá vamos nós, certo. Vamos trabalhar agora. Então, vá para a esquerda ou para a direita, você também pode ir negativo 50 pixels para a direita, que é o mesmo que fazer uma esquerda de 50 pixels. Podemos então ver o topo de 30 pixels e você pode ver que isso é muito parecido com transformar e traduzir. Também podemos definir um fundo de pixels ou 30 pixels negativos. Bastante fácil. É muito, muito útil. Você também verá que ele não afeta nenhum dos outros elementos também. Fantástico. 12. Posicionamento absoluto: Elementos absolutos são onde as coisas ficam super interessantes. A maneira como ele funciona é semelhante à maioria dos aplicativos de design e dá aos seres humanos um monte de controle e poder muito parecido com o Homem-Aranha. Quando posicionamos um elemento absolutamente estamos basicamente pedindo que você saia do fluxo normal do documento, qualquer outro conteúdo em torno dele será posicionado como se o elemento absoluto não estivesse lá. Você verá que sua largura e altura irá encolher para que ele contenha seu conteúdo. Agora temos controle sobre sua largura, altura e onde este elemento está posicionado no documento. Tudo depende de nós. Se tivéssemos que fazer isso com todos os elementos, talvez ficássemos aqui por dias. É por isso que o posicionamento estático e relativo é tão incrível na maioria das vezes. Um elemento absoluto é posicionado em relação aos seus primeiros elementos não estáticos e irmãos. Estes podem não ser seus pais diretos. Ele vai viajar até a árvore de documentos até encontrar um elemento que não está posicionado estaticamente. Assim, o primeiro elemento que tem um valor de posição de absoluto, relativo, fixo ou pegajoso se tornará sua posição pais. Se não houver elementos não estáticos na ancestralidade de elementos, ele selecionará a janela do navegador como sua posição pai. Isso significa que o elemento absoluto vai para onde o pai vai e pode ser afetado pelos valores de largura e altura do pai. Agora podemos usar as declarações superior, inferior, esquerda e direita para posicionar um elemento absoluto em relação à sua posição pai. Então, se definirmos o valor superior para 20 pixels, ele se posicionará 20 pixels do topo do pai. Se não houver um conjunto de largura e altura ou se eles são definidos como auto, podemos usar as declarações superior, inferior, esquerda e direita para definir dinamicamente a largura e altura. Como sempre ser 10 pixels a partir do topo e sempre ser 10 pixels a partir da parte inferior. Ok, então, o primeiro exemplo é essa criança 12, esse cara que vai absoluto que tem um pouco de texto branco. Então, a primeira coisa que fazemos é ir pos A, posição absoluta, pressione tab para expandir e você verá automaticamente ele sai do fluxo documentado. É quase como se fossem irmãos apenas dizer, “Agora, você não faz mais parte da família. Nós nem sequer te vemos.” E você verá que parece que está pairando acima de seus irmãos. Ok, então agora é apenas arrepiante porque nós não definimos um valor superior, uma esquerda, uma direita, um valor inferior. Então vamos começar com o valor superior. Vamos zero pixels por enquanto e você verá que ele vai para o topo da caixa pai, e a caixa pai tem uma posição de relativo. Agora, ele escolhe este elemento e nós podemos ver aqui esta criança 12 está agora escolhendo esta caixa pai para ser sua posição pai. Não é escolher esta criança cinco porque esta criança tem uma posição estática. Então. Se tivermos que mudar a posição de cinco do nosso filho para relativo, você verá que agora a criança 12 está indo para o topo ou grudando no topo da criança cinco. Bastante impressionante. Então, se tivermos que tirar isso de novo, você verá que ele aparece todo o caminho até a caixa dos pais. E se nós temos que assumir a posição da caixa pai, ele vai todo o caminho para o topo do documento que é muito legal. E agora se colocarmos uma posição à esquerda aqui, assim. Ele está literalmente no topo do documento e é assim que ele escolhe sua posição pai. Ok, então o que eu quero fazer aqui é que eu quero fazer da criança cinco um elemento absoluto, também. Então pos A, torna-se um elemento absoluto e agora pode parecer que alguma coisa maluca está acontecendo. Vamos rapidamente dar uma olhada no HTML e você verá que a criança 12, que está aqui, está dentro deste elemento criança cinco, que é por aqui, e nós apenas definimos essa criança cinco elementos para posicionar absoluto. Então, se mudarmos o valor superior cinco filho para zero, ele tipo de nos mostrar onde a posição pai é que parece ser a janela do documento. Então, se nós rolar para cima aqui e definir a caixa pai para posição relativa, ok lá vamos nós. Então, a criança cinco agora está se posicionando de acordo com a caixa pai e então a criança 12 está se posicionando de acordo com a criança cinco. Bem, pode ficar um pouco complicado, eu sei. Tenha paciência comigo. Então, em nosso filho cinco, agora vamos definir a largura temporariamente para 100 por cento. Certo, isso nos dá um pouco mais de espaço para respirar. Não parece tão complicado agora. Ok. Então, o que eu vou fazer aqui é, eu vou definir o fundo para zero, também, e o que isso faz é que ele diz que eu vou ser posicionado a zero pixels do fundo. Então, se tivéssemos que tirar essa posição relativa na caixa dos pais, isso é muito legal. Agora ele está se posicionando em relação à janela do documento, e em vez de largura 100 por cento, podemos mudar isso para direita, zero e esquerda, zero. E vamos apenas tirar a largura e assim não deve haver espaço em torno dela. Fantástico. Nós também podemos definir estes para 30 pixels e isso não parece tão certo, 30 pixels, e este tipo de age como um margining. Então de cima, direita, inferior, esquerda isso é muito legal. Então, podemos definir largura e altura sem realmente usar declarações de largura e altura. Estamos usando superior, inferior, direita, esquerda e eu acabei de mostrar como posicionar um elemento dentro de um elemento absoluto. Então, agora, quando vamos ao nosso filho absoluto e dizemos zero pixels abaixo, fantástico. A próxima coisa que vou fazer é mostrar a vocês como posicionar negativamente um elemento absoluto. Isso é bastante útil para fechar botões e coisas assim. Então nós temos esta criança 12, esta criança gloriosa 12, você tem sido um exemplo fantástico, muito obrigado. Então, vamos mudar isso de baixo para cima novamente e podemos definir isso para 30 pixels negativos, talvez vamos negativo 50 pixels e esquerda 50 pixels negativos, lá vamos nós. E se tivéssemos que definir essa largura para algo como 30 pixels, lá vamos nós e as alturas de 30 pixels, também, isso seria ótimo e estouro de oculto. Lá você tipo de obter o. “ Ei, este é um tipo de botão de fechamento de exemplo.” Então lá vamos nós. É realmente muito útil. Uma coisa que você deve estar ciente, porém, é que se você tem um transbordamento escondido na posição de pais, ele se foi. Você não pode ver mais. Portanto, apenas esteja ciente disso. Então, agora vamos a algumas coisas mais avançadas. Nós temos um exemplo mais simples, porém, nós temos apenas esta caixa, é caixa um com um par de caixas duas crianças dentro e agora o que eu vou fazer é eu vou mostrar a vocês como usar uma pseudo-classe em conjunto com posicionamento absoluto. Então, você vai .box-1 e uma pseudoclasse de depois, e então dentro disso nós normalmente podemos apenas ir conteúdo e para mostrar o que isso faz você pode dizer, “Olá!” E assim, há algum conteúdo no HTML, mas não podemos selecioná-lo e isso é o que é realmente legal sobre esta declaração de conteúdo dentro do depois ou dentro da pseudo classe antes. É muito fixe. Então vamos voltar ao depois e agora o que podemos fazer aqui é dizer pos A para posições absolutas, ok. E talvez possamos dar-lhe uma cor de fundo, então cor de fundo, vamos escolher um destes, vamos para esta cor azul, e então talvez possamos dizer esquerda, zero; direita, zero e o que está acontecendo aqui, Bem, a posição que os pais não são na verdade a nossa caixa 1. Então, digamos posição relativa e lá vamos nós. Podemos dizer que é o fundo, zero. Fantástico. Agora, onde isso é bastante útil é, você pode começar a definir bordas como esta. Então, se tivéssemos que tirar nosso conteúdo, basicamente trouxemos uma fronteira aqui. Ok, não há nenhum agora, mas vamos para uma altura de quatro pixels e lá está a nossa fronteira. E se tivermos que definir nossa parte inferior para menos quatro pixels e que tal nossa direita, menos quatro pixels, esquerda menos 4 pixels. Agora temos esta fronteira azul. Também podemos definir sua opacidade 2.5 e agora temos esse tipo de borda verde. Realmente interessante agora está misturando com a nossa cor de fundo. Muito legal. Então lá você pode ver que estamos usando posicionamento absoluto com uma pseudo-classe depois. Muito, muito fixe. 13. Profundidade e Z-Index: Agora, que cobrimos elementos absolutos. Podemos começar a cobrir a profundidade que pode ficar um pouco confuso. Então, ouçam! Qualquer elemento não estático é atribuído uma profundidade pelo navegador automaticamente. Se você não fizer nada sobre isso, mais baixo na árvore de documentos e elementos, maior será seu valor de profundidade. Basicamente, terá uma altitude maior. Lembre-se de que HTML é o oposto das camadas de aplicativos de design. É um mundo de caixas de cabeça para baixo. Então, como nosso elemento absoluto não está levitando, você pode pensar que ele deve levitar acima de tudo, mas não necessariamente. Se houver elementos não estáticos abaixo dele na árvore HTML, esses elementos terão um valor de profundidade maior do os elementos absolutos e podem aparecer acima do elemento absoluto. Se você tiver dois ou mais elementos absolutos levitando em torno da mesma posição em uma página, você verá que aquele que está mais baixo na árvore HTML tem uma altitude maior e parece estar no topo. Mas podemos alterar manualmente qualquer profundidade de elementos não estáticos. Fazemos isso dando ao elemento um valor de índice zed ou um valor de índice Z. índice Z é o valor de profundidade atribuído pelo homem de um elemento. Assim que demos um valor de um ou superior, ele estará em uma altitude maior em comparação com os outros elementos em sua caixa. Se todos os elementos não estáticos em uma caixa receberem o mesmo índice zed ou índice Z, a profundidade será novamente determinada pela posição na árvore HTML. A indexação Z não é apenas para elementos absolutos. Qualquer elemento não estático pode ter um valor de índice Z. Definir um índice Z é bem mágico. Mas, você tem que assumir a responsabilidade do gerenciamento de profundidade que o navegador normalmente faz muito bem. Quando você usa a indexação Z, você usa valores inteiros apenas 1, 2, 5, 10 etc. Você não usa pixels ou quaisquer outros valores de medição. Uma coisa muito importante a lembrar é que se você estiver usando o índice Z, maioria das vezes uma altitude de elementos será limitada pela altitude de seu pai. Então, se houver dois elementos absolutos e eles se sobrepõem e houve um elemento absoluto filho na parte inferior desses dois elementos, a altitude máxima será a de seus pais posição, mesmo que você tenha dito um alto valor de índice Z louco . O valor do índice Z determina sua profundidade no reino da caixa pai da posição, não em todo o documento, a menos que seu pai seja a janela do documento. Isso ainda se aplica para elementos fixos que vamos chegar em seguida. 14. Posicionamento fixo: Um elemento fixo é exatamente o mesmo que um elemento absoluto. Exceto que nós posicioná-lo, ele sempre será relativo à janela do navegador. Isso é muito poderoso, e muitas vezes é usado com coisas como barras de navegação fixas, menus e pop-ups. Ok. Então temos nossas caixas de novo. Fantástico. O que vou mostrar agora é como trabalhar com posicionamento fixo e posicionamento absoluto. Há toneladas de exemplos que poderíamos passar. Mas eu acho que um que funciona muito bem é mostrar-lhe como criar um pop-up. Então vamos fazer o nosso html. Vamos para uma div para a classe de popup, e dentro do pop-up, nós vamos ter uma div para a classe de cobertor, e nosso cobertor vai ser este retângulo que abrange toda a largura e altura da janela. Vai ser preto e semi transparente. Nós então temos nosso conteúdo div, e dentro deste conteúdo div, talvez possamos ter algum conteúdo e então nós também queremos um botão fechado. Então vamos para uma classe de roupas de botão. Vou colocar um texto fechado lá dentro. Fantástico. Agora, vamos fazer o nosso CSS. A primeira coisa que quero fazer é ir para o meu popup. Eu quero mudar isso para a posição de fixo e , em seguida, vamos definir o nosso topo para zero e vamos definir o nosso fundo para zero. Esquerda, ei Elizabeth, para zero também, e nossa direita para zero. Fantástico. É tudo o que precisamos fazer para o popup. Então temos nosso cobertor dentro do pop-up. Tudo bem. Isso vai ser exatamente o mesmo que o nosso popup, exceto que vai ser absoluto. Vamos lá. Na verdade, vou soletrar isso tudo. Absoluto. Fantástico. Para este, eu vou definir uma cor de fundo e vamos usar RGBA, que é vermelho, verde, azul, canal alfa e dizer 0, 0, 0 e 0,7. Então isso é preto com uma opacidade de 0,7 que é fantástico. Em seguida, vamos dizery.popup.content. Agora, o conteúdo vai ter uma posição de absolutos. Então poderíamos copiar isso ou escrever um pouco nós mesmos. Desde que temos pos absoluto, e vamos definir a cor de fundo para branco. Isso é ótimo. Então, vamos definir uma largura de 400 pixels e uma altura de 300 pixels. Fantástico. Agora, eu quero colocar isso no meio da janela do meu navegador. Como faço isso? Bem, poderíamos fazer isso com o Flex, mas esta aula não é sobre o Flex. Então vamos descartar isso como uma possibilidade. Confira isso. Eu vou dizer top, eu vou dar-lhe um valor de 50%. Agora isso faria com que começasse a meio caminho. Não está no meio, na verdade. Mas se definirmos margem superior e lhe demos um valor negativo, e porque sabemos a altura, podemos dizer negativo 150 pixels que é metade da altura. Significa que está sempre no centro. Agora podemos fazer o mesmo pela nossa esquerda. Vamos definir isso para 50%, e então dizemos margem esquerda menos 200 pixels porque sabemos a largura. O que é realmente legal sobre isso é que se nós temos que mudar nosso pop-up que não é fixo, nós podemos definir topo, digamos 100 pixels. Você verá que nosso conteúdo pop-up permanece no meio. Mesmo que mudemos para 200, será sempre no meio, o que é correto e incrível. Então lá vamos nós. Temos algum conteúdo. Temos o nosso cobertor. Agora, vamos estilizar o botão fechado. Então cobertor. Feche. Ok. A primeira coisa que eu quero fazer é tirar esse estilo padrão. Então eu vou dizer fronteira nenhuma, e então, eu vou dizer cor de fundo e nós podemos roubar uma cor daqui de cima. Lá vamos nós. Em vez de dizer cobertor, vou dizer popup. Lá vamos nós. Muito melhor. Vou definir sua cor para branco e dar-lhe um pouco de preenchimento. Digamos 10 pixels. Dê a ele um tamanho de fonte de 30 pixels. Ok. Font-peso- Vamos para negrito. Vamos alterar o tamanho da fonte para 20 pixels. Fantástico. Então, podemos dizer posição absoluta, e podemos dizer top. Vamos para menos 20 pixels. Então ele vai definir um pouco fora do conteúdo de, e então podemos dizer, certo. É suposto ir menos 30 pixels ou mais, e lá vamos nós. Temos um botão de fechar. Talvez possamos dizer cursor, ponteiro. Lá vamos nós. Fantástico. Talvez também possamos mudar nosso conteúdo para um tamanho de caixa. Coloque uma caixa e podemos colocar um pouco de enchimento dentro dela. Digamos 20 pixels. Voilá, temos um popup perfeito. Agora, você provavelmente não teria um pedaço de texto próximo em seu botão de fechar. Você provavelmente teria um X ou algo assim. Mas, por exemplo, isso funciona perfeitamente. 15. A função Calc: Depois que um aluno fez uma pergunta muito boa, eu pensei que seria uma boa idéia adicionar este vídeo na função calc para a classe. Podemos usar a função de cálculo CSS para obter o navegador para calcular números para nós humanos preguiçosos. Por exemplo, podemos calcular os valores de medição muito, muito facilmente. O que é super legal sobre a função calc é que podemos combinar diferentes tipos de valores como pixels e porcentagens na mesma soma. Podemos usar os operadores adicionar, subtrair, dividir e multiplicar, bem como ser capaz de usar colchetes para dizer ao navegador quais partes da soma calcular primeiro. É a melhor prática para cercar cada parte da soma com algum ritmo branco. Então, antes e depois de cada operador, adicione um espaço. Agora já vimos essa foto antes. É tudo popup. Fantástico. Mas agora vou mostrar um pouco sobre a função calc. Então, por exemplo, temos essa largura, os 400 pixels, vamos usar a função de cálculo para fazer alguns cálculos. Então, podemos dizer 200 pixels mais 200 pixels o que equivaleria a 400 pixels, certo? Podemos dizer algo como 600 pixels menos 200 pixels nos daria 400 pixels novamente. Podemos mudar isso em todo o show e o navegador apenas calcula para nós. Fantástico. Agora, nós também podemos fazer coisas como porcentagem baseada, então mais vamos dizer 20 por cento, vamos para 300. Fantástico. Então, se tivéssemos que fazer isso pequeno ou maior, você pode ver que a largura realmente muda, muito legal, certo? Nós também poderíamos adicionar um par mais aqui, então talvez como menos digamos 150 pixels. Ok, vamos adicionar algo como 50 por cento, muito legal. Também podemos fazer algo como 100 pixels multiplicados por quatro, que seriam 400 pixels ou dois, que seriam 200 pixels. Você pode ver onde eu estou indo aqui. Nós também podemos fazer colchetes, então podemos dizer colchetes lá, colchetes lá para que ele está multiplicando por dois, mas se vamos para mais cinco, ele vai para 700 pixels. Se não tivéssemos esses colchetes lá, ele iria 100 pixels multiplicado por dois mais cinco, nessa ordem. Então, quando colocamos os colchetes, então ele faz os colchetes primeiro, então ele faz estes primeiro e, em seguida calcula 100 pixels multiplicados por esse valor, que seria sete. Ok, então nós brincamos um pouco o que é ótimo, mas agora como isso é realmente útil? Bem, então queremos ir para uma largura de um valor percentual. Então, diga algo como 80 por cento e então você quer ir para uma margem esquerda, vamos para menos 40 por cento. Isso faz sentido, vamos tentar o topo agora. Então, vamos para um valor de 80 por cento novamente e, em seguida, margin- top, vamos para menos 40 por cento. Isso não funciona, por que não funciona? Bem, não funciona porque o valor percentual da margem superior não funciona na altura do pai, funciona na largura do pai, meio louco. Então, como consertamos isso? Bem, eu só vou comentar isso assim e então eu vou usar a função calc de aqui. Então, calc e eu vamos dizer 50 por cento menos 40 por cento, assim e você vê que isso não funciona bem e isso é porque nós não temos um espaço extra entre o menos e os 40 por cento. Lá vamos nós, isso deve resolver todos os problemas e agora usamos calc e estamos usando valores baseados em porcentagem dentro do nosso popup. Isso significa que quando crescemos isso, nosso popup também cresce. Fantástico. 16. Posicionamento adesivo: O que o posicionamento fedorento faz é permitir que um elemento fique em algum lugar quando atinge uma determinada posição. Ele alterna automaticamente entre o posicionamento relativo e fixo para você, bem como adicionar espaço extra para compensar onde ele foi posicionado nos documentos. Mas a coisa é que o posicionamento pegajoso está abanando você e ele não funciona em todos os navegadores, ele pode precisar de um prefixo de navegador ou alguma ajuda Javascript. Para obter mais informações sobre qual navegador suporta e quais não, confira caniuse.com. Usar posicionamento pegajoso é uma técnica muito agradável para melhorar sutilmente e progressivamente seus sites. Ou seja, se não for suportado, não é tão perceptível, mas se for suportado, isso aumenta a experiência. Para obter um posicionamento pegajoso para funcionar, você precisará definir uma posição em que varas. Experimente um valor superior ou inferior e lembre-se, você ainda terá que gerenciar a profundidade. Certo, vamos fazer um posicionamento pegajoso. Temos todas as nossas caixas aqui de novo. Há muitos deles. O que vamos fazer é replicar como um endereço de Brickfield. Enquanto você rolar para cima, então algo gruda no topo. Vou trabalhar com a caixa dois, principalmente. Então, o que precisamos fazer é dar a ele uma posição de pegajosa. Pegajoso, fantástico e, em seguida, precisamos de uma posição de configuração em que ele deve ficar. Então, vamos dizer, top. Vamos para zero. À medida que rolamos, você verá que, hey, ele gruda quando chegar a zero pixels do topo. O que acontece aqui? Você verá que este tem uma profundidade maior e então ele atravessa o topo e depois cobre. Quando este vai por cima, ele cobre, muito legal. Então, o que realmente está acontecendo aqui. Vamos definir isso em 60 pixels no topo. Role para o topo novamente e vamos rolar. Agora está a 60 pixels, ótimo e depois... Veja o que acontece lá, é como se ele pegasse. Muito fixe, certo? O que acontece se tivermos que definir a opacidade para 0,5 e então podemos ver o que está acontecendo. Então, a caixa 2a, vai aqui, mas fica lá, você vê que não volta porque está no topo, não está se movendo. É que a caixa 2b está agora em cima dela. Muito legal, certo? Então, vamos tirar a opacidade. Então, você verá que, hey, funciona que deve haver essa grande lacuna sobrando sobre eles, navegador é bastante inteligência. Antes daqueles posição pegajosa saiu, você teria que fazer isso com JavaScripts, era um pouco complicado. Agora, você ainda pode ter que fazer isso se você quiser segmentar navegadores mais antigos. Então, isso é muito fácil de fazer, certo? Vamos ver o fundo. 60 pixels inferiores, o que está acontecendo aqui? Bem, a melhor maneira de verificar o que está acontecendo aqui é se temos que ir até o fundo e rolar para cima. À medida que chega a 60 pixels do fundo, ele fica preso. Como 2e recebe 60 pixels da parte inferior, ele adere. Mas a coisa é que a caixa 2f tem uma profundidade maior do que a caixa 2e e é por isso que não funciona muito bem. Então, nós poderíamos realmente fazer algum gerenciamento manual de profundidade aqui. Então, vamos rolar para baixo aqui, caixa 2e. Vamos definir um estilo aqui. Poderíamos fazer algo como, índice z; 2. Que tal isso? Não gostou muito disso, pois não? Certo, role todo o caminho para baixo. Está bem. Por conseguinte, a caixa 2e está acima da caixa 2f. Então, às vezes é muito bom fazer algum gerenciamento manual de profundidade e isso é um posicionamento pegajoso. Há muitos outros usos para isso, mas esse é um exemplo muito útil. 17. Como juntar tudo: Nos próximos vídeos, vou levá-lo através da criação de um site usando os vários tipos de técnicas de layout que aprendemos nos vídeos anteriores. Você pode acompanhar e, em seguida, criar sua própria página web usando o que você aprendeu na classe. 18. Projeto: a configuração: Para reunir tudo o que aprendemos nos últimos dois vídeos, vou guiá-lo através da construção de um exemplo de sites. É simples, ousado, grande e colorido. Ele também tem esses personagens muito legais e vai ser um ótimo exemplo de como implementar algumas dessas técnicas de layout da Web que aprendemos sobre. Então, por onde você começa? Bem, para mim eu vou começar do esboço, às vezes você pode começar do Photoshop ou Illustrator, algum outro aplicativo de design, às vezes tudo o que você poderia ter é um rabiscado em um guardanapo, às vezes você tem alguns Mockups, às vezes você tem alguns Wireframes, às vezes você apenas começa diretamente no navegador. Cabe a você e se você é mais um designer, um desenvolvedor ou um unicórnio, como eu. Então eu posso ir do design ao desenvolvimento realmente facilmente, e eu posso muitas vezes terminar muitos dos meus projetos no navegador e eu uso o navegador como uma ferramenta de design. Então, o que temos aqui? Bem, eu tenho este banner e dentro deste banner eu tenho algumas informações, eu tenho um botão de chamada à ação, eu tenho um par desses personagens que podem ser absolutamente posicionados. Eu então tenho essa barra NAV que é um NAV pegajoso e você realmente vê o quão grande isso é se eu apenas zoom em 100%, é muito grande. Bem, sim. Ok. Então eu tenho um pouco mais de informação. Eu tenho um botão para me inscrever. Depois vou a uma história e coisas que a gangue acha muito importantes. Ok. Então tem uma bela foto de gangue na parte inferior com um rodapé muito, muito simples. Isso é ótimo. Se alguém clicar em me inscrever ou me inscrever aqui à direita, vai abrir este pequeno pop-up. Então isso é muito simples. O que eu fiz nesse meio tempo é que eu exportei todos os ativos que eu preciso dentro de uma pasta de imagens. Tenho o carácter um, o carácter dois, carácter três e cito este botão de fechar. Todo esse extra no botão de fechar, eu também tenho a foto da gangue, eu tenho essa imagem de mão, eu tenho esse arquivo estranho, não sei o que é isso e então o logotipo da gangue. Estes podem ser APs porque seu vetor dentro do esboço, mas para o bem desta classe há apenas imagens, eu os exportei em um nível de exibição de retina, então isso significa que eles são duas vezes o tamanho que eles estão dentro do esboço. Agora, vamos abrir nossa pasta WWW. Podemos abrir isso em sublime. Eu vou usar sublime, você poderia usar caneta de código, você pode usar qualquer editor de código ou IDE que você gosta. Então a primeira coisa que eu vou fazer é, eu vou criar um novo arquivo e eu vou salvar isso. Então Command S como index.html, e isso significa apenas que o navegador procura esse arquivo index.html, quando ele o encontra, ele o abre primeiro. Fantástico. E com Emmetts, tenho uma aula inteira sobre isso. Você pode expandir este ponto de exclamação pressionando tabulação ou controle E e ele coloca todo esse código adorável em para você. Então eu vou dizer a gangue. A próxima coisa que eu vou fazer é colocar em algum CSS e eu vou dizer style.CSS. Fantástico. Eu vou salvar isso. Eu vou então criar um novo arquivo, indo para um salvar este como style.CSS. Legal. Em seguida, apenas para verificar se tudo está funcionando, eu quero definir uma cor de fundo no meu corpo para guia BGC. Este é Emmett de novo. Eu vou dizer, Yellow. Guarde isso. Vamos voltar para um localizador tentar um índice para html para Chrome e é amarelo. Ok. Então isso é uma boa notícia. Vamos voltar ao Sublime Text. Vamos fechar nosso arquivo style.CSS. A última coisa que precisamos fazer para ter tudo configurado e pronto para codificar é, precisamos comprometer nosso projeto e nossa base de código em um repositório. Eu realmente gosto de usar git e git hub e eu realmente gosto de usar git hub desktop. Isso significa que eu não tenho que saber nada sobre git realmente, isso significa que eu posso usar um aplicativo para fazer as coisas em vez do terminal e vamos abrir isso. É legal, github desktop. Ok. Fantástico. Agora, se formos ao nosso localizador, temos como WWW. Mas nós apenas arrastamos para a área de trabalho Github. Diz: “Este diretório não parece ser um bom repositório, você gostaria de criar um repositório aqui?” “Sim, por favor.” E podemos chamá-lo, a gangue. E a descrição, podemos dizer os sites da gangue e então podemos dizer inicializar este repositório com o verdadeiro eu. E você pode dizer criar repositório. Agora temos este repositório em nosso computador local. O que vem a seguir é publicarmos o repositório no GitHub.com. E isso é muito legal porque significa que se nosso computador falhar, algo ruim acontece, temos nosso código on-line na Nuvem, na internet, no GitHub.com. Isso também significa que com páginas do Github podemos publicar nossos sites sob uma URL do Github gratuitamente. É muito legal. Eu estou tentando usar o mesmo nome aqui, eu não vou manter meu código privado e então eu vou dizer, publicar repositório. E isso literalmente envia para a Internet. Fantástico. Posso então ir para o Google Chrome, posso ir para GitHub.com/MRRA, é meu nome de usuário. Pode ir para repositórios e gangue está lá. Agora index.html está aqui e nosso style.css está aqui. Fantástico. 19. Projeto: o HTML: O que vamos fazer neste vídeo é, vamos construir a estrutura geral do nosso site. Eu vou estar me referindo ao esboço muitas vezes apenas para ver todos os diferentes elementos que eu preciso colocar no meu HTML. E então eu vou codificá-lo dentro de um texto sublime. Então, o que temos? Bem, nós temos esse grande tipo de bandeira de herói. Temos uma barra de navegação. Temos mais informações, pequena seção aqui. Temos estes pequenos separadores e depois temos a secção da história. Agora o separador, uma imagem e um rodapé. Então vamos começar a entrar em HTML. Ok, então dentro do nosso corpo, talvez aqui possamos dizer. Herobanner, algo assim. Isso é ótimo. Vamos ao esboço e podemos ver que temos uma barra de navegação. Então podemos dizer nav, ok. Então temos mais seções de informações, so.moreinfo. Certo, o que vem a seguir? Nós temos um separador então talvez você possa dizer, .sep para separador. Está bem. E então nós temos nossa seção de história so.story. Lá vamos nós. E por baixo da nossa história temos outro separador, por isso, sep. E por baixo disso temos uma imagem, então vamos IMG. E aqui podemos dizer imagem e então podemos dizer gang.PNG. Certo, e para isso, veja isso. É 1426 por 796, mas sabemos que não é realmente o caso. Então, se voltarmos ao esboço e olharmos para esta imagem em 735 por 399. Então eu vou copiar isso e lembrar 399. Ok, então com o 735 e um Alt podemos dizer “a gangue”. E depois temos o rodapé. Fantástico. E então nós também temos o nosso pop up. Então vamos fazer um.popup e aqui dentro podemos dizer, cobertores. E nós já fizemos isso nesta aula, então isso não deve ser nada novo demais. Nós então temos conteúdo, e dentro do nosso conteúdo, você pode ter um botão.close. Tudo bem. Agora podemos começar a preencher todas as partes intermediárias. Vamos voltar aqui. Ok, então dentro da nossa bandeira de herói, nós temos um, dois, três, quatro tipos de elementos e nós temos um par desses personagens. Então o que está acontecendo aqui é que este elemento tem cerca de 960 pixels de largura que é uma espécie de tamanho padrão. Quero alguns marginais à esquerda e alguns marginais à direita. Eu sempre quis estar no centro, mas quero que o texto fique alinhado à esquerda. Então 960 largura é a largura, mas eu quero que isso seja tudo dentro de um recipiente. E você vai ver mais abaixo, embora isso também é 960 largura e assim é isso. Então nós podemos realmente fazer uma classe desta largura 960. Então dentro do nosso banner herói podemos dizer algo como .wrapper e então podemos fazer o que seria isso. Este é um tamanho divertido de 20 pixels, então podemos talvez dizer um H3 ou um H4 e apenas copiar isso, colá-lo. Toque em tap kabum é uma tag A, então eu vou para Control W para embrulhá-lo com Emmett e, em seguida, digite meu URL. Está bem. E depois do H4 temos o H1 que podemos copiar. Então H1, espaço que. E aqui podemos mudar isso para um amplificador. Está bem. Agora podemos fazer uma quebra de linha ali. Coloque uma quebra de linha aqui. Pode realmente colocar barras lá, se você quiser. A gangue mais boba do mundo. Isso é um H1. Então temos isso que pode ser um H2 talvez ou pode ser apenas um P. Quem sabe? Então talvez possamos até fazer um H3. Coloque uma quebra de linha e aí, converta isso em um e comercial real. Então você tem H1, H3. Então precisamos desse CTA então vamos pegar um botão e chamá-lo de CTA. Mas também há outro CTA aqui em baixo, qual deles vai ser a alternativa? Bem, também há outro CTA no nosso pop-up, eu quero entrar. Então talvez esta possa ser a alternativa. Então eu vou dizer, CTA e apenas dizer, Alt para alternativa. E podemos dizer, leia mais. Está bem. Então isso parece muito bom, eu acho. E então dentro deste banner de herói, podemos colocar esses personagens. Então, na parte inferior aqui, dentro do banner herói podemos dizer. Caracteres1, expanda isso, nós apenas copiamos e colamos isso duas vezes. Caráter 2, caractere 3. E estas não precisam ser imagens, podem ser apenas divs. Podemos definir seus antecedentes só torna as coisas um pouco mais fáceis. Eu usei um método diferente aqui com esta imagem só porque podemos ser diferentes. Vou pressionar Salvar, vamos apenas ir para o cromo aqui e atualizar. Ok, começando a tomar forma. Sim, parece bom. Então, se voltarmos ao texto sublime dentro do nosso nav temos - então temos o logotipo e temos um par desses links à direita. Então vamos para um logo e talvez possamos colocar um haxixe lá por enquanto. Isso pode nos levar de volta ao topo da página. Aqui podemos dizer, a gangue. E, em seguida, com CSS, podemos realmente configurar imagem de fundo sobre isso. E então uma vez que temos o logotipo resolvido, agora precisamos criar esses links que poderíamos realmente fazer facilmente apenas usando alguns flutuantes. Então nós realmente não temos que usar uma lista, mas eu gosto de usar uma lista quando se trata de itens de navegação. Então, em uma lista não ordenada e dentro pode haver itens de lista e, em seguida, dentro pode haver links. Temos três deles. Então, com Emmett, só fazemos isso. Eu só vou colocar hashes aqui por enquanto e depois temos que inscrever a história e mais informações. Vamos nos inscrever e vamos flutuar isso direito, talvez. Cadastre-se, o ponto da história logo ali vamos nós, e mais informações, e assim local certo. Então essa é a navegação, nós temos a gangue, nós temos uma URL lá dentro. Fantástico. Depois, mais informações, vou guardar isto voltar ao esboço. Temos um título de tamanho de 50 pixels que é praticamente o mesmo que apenas H1. Então nós transformamos realmente um dois H1s na página, eu vou fazer isso um H2 e dizer, junte-se ao nosso fã clube. Então eu vou apenas copiar e colar isso. Está bem. E então eu vou copiar e colar tudo isso e colocar isso em uma etiqueta P. Está bem. Vou apenas remover o espaço extra lá e dar uma festa. Queremos fazer algo diferente com isso. Então, sim, inclui a parada completa real ou o período. Então vamos embrulhar isso com uma classe de destaque. É assim que se soletra “destaque “? Eu acho que sim. E vai ser o espaço de uma classe de destaque. Ok, então nós temos o nosso H2, nós temos um P, e então abaixo do P nós vamos ter este botão CTA. Então button.cta eo conteúdo do botão vai ser inscrever-me. Vamos expandir isso. Ok, isso está bom. Vamos ao cromo. Refrescante. Ok, inscreva a história mais informações. Por que tudo isso não está em seus itens separados? Vamos voltar e verificar. Está bem. Então nós realmente temos três como dentro de um item da lista. Não é bom. Então aqui podemos apenas colar um, colar o outro. Ok, vamos salvar isso e voltar para o cromo, atualizar. Lá vamos nós. E isso é realmente importante porque é quase assim seu navegador vê isso sem o CSS. E se você pode realmente fazer sentido de sua página web, se não há CSS, geralmente é uma boa página da web. Então, aqui está. Parece muito bom, só não vemos nossos rostos amigáveis por aqui. Mas está tudo bem. Junte-se ao nosso clube. Inscreva-me. Nada está acontecendo com isso. Isso é ótimo. Vamos voltar ao esboço para ver o que podemos fazer a seguir. Está bem. Então temos o separador, que você já fez. E depois temos esta secção. Vamos dar uma olhada nisso. Este é o tamanho 40. Então talvez seja um H2 ou um H3. Fizemos deste um H3, eu acho. Então fizemos um H4 e que era tamanho 20. Este é o tamanho 40, ok e este é o tamanho 50. Muitos tamanhos divertidos para lembrar. Está bem. Então, dentro da história, digamos que temos um H3 aqui e podemos copiar e colar isso e colocar outra quebra de linha aqui. Está bem. Depois disso, podemos ter uma tag P que é ótimo. Vamos copiar tudo isto e colá-lo e eu vou fechar esta etiqueta P e depois abrir outra aqui. Está bem. Em seguida, o último, basta escrever manualmente. Essas formas eram, lá vamos nós, muito tristes, então vamos fazer isso e apenas fechar aquele P novamente. Então, lá vamos nós. Então, se temos que voltar para o Chrome e atualizar, isso parece muito bom. Temos então essa lista de coisas que achamos importantes. Como é que isto vai parecer? Bem, isso pode flutuar para a esquerda. Então, talvez possamos colocar isso aqui e dizer, div.list de nb ou talvez você possa apenas dizer nb-list. Fantástico. Talvez possamos mudá-lo de um div para um ul. Sim, vamos fazer isso. Então aqui dentro temos um par de itens da lista. Então, nós temos Rock and Roll, então eu estou indo para o Rock 'n Roll. Talvez haja um apóstrofo lá. Eu não tenho certeza. Então temos o riso. Então temos Square Offs. Eu não vou ser capaz de soletrar isso, Rotas Circuitas, Trigonometria, Chapéus Rad, quero dizer, Ser Bobo. Lá vamos nós. Então, com sublime eu apenas seleciono isso. Eu vou para a seleção, então eu vou dividir em linhas ou deslocamento de comando L, e então eu pressionar comando e esquerda O, digite Alt LI e, em seguida, termino com um LI. Escape de imprensa. Lá vamos nós. No esboço, temos esse riso, que é muito especial. Então, o que vamos fazer aqui? Bem, talvez possamos tornar este elemento especial e este elemento especial. Então, aqui nós podemos ir LI, e não vai haver nada aqui, então eu vou dizer, e espaço não-quebrando e não nbsp, espaço não-separável. Então, isso é basicamente termos HTML para o espaço que não deve ser recolhido. Então, temos esse riso, que talvez possamos dizer, “Classe de especial por agora” ou talvez arrastando. Que tal isso? Ok, isso parece muito bom. Como é que vamos dizer-lhes que cores são estas? Então, vamos para uma classe de azul, e vamos apenas copiar e colar isso. Rock 'n Roll, este aqui. O espaço não quebrando será cinza. Risos, acho que foi amarelo. Quadrados são vermelhos. Rotas Circuitas são cor-de-rosa. Trigonometria é, o que é isso? Salmão. Então azul e depois amarelo novamente. Fantástico. Então, vamos guardar isso. Vamos voltar ao esboço, em seguida, ir para o separador, em seguida, dentro do nosso rodapé, temos Made by Rich de Tap Tap Kaboom novamente. Eu só vou para o topo aqui e copiar esta etiqueta A, eu sou preguiçoso. Muito bom, muito doce. Acho que é tudo o que precisamos do ponto de vista HTML. Vamos voltar ao crime. Vamos refrescar-nos aqui. Sim, isso parece ótimo. O que é essa coisa? Não sei o que é essa coisa. Então, vamos clicar com o botão direito, inspecioná-lo. Tem um botão, tudo bem. É um botão de fechar. Legal, isso é ótimo. Talvez, por enquanto, possamos nos aproximar para sabermos o que é. Então dentro do nosso pop-up, podemos realmente colocar algum conteúdo. Então, isso é 50 pixels. É praticamente o mesmo que este. Para se juntar ao nosso clube foi um h2. Então, vamos colocar o nosso H2 aqui. Preencha os seus dados e aí temos um formulário. Então, vamos para a forma, ação por enquanto, vamos deixar isso de fora. Podemos ter um rótulo. O rótulo pode ser o seu primeiro nome. Em seguida, abaixo do rótulo, podemos ter uma entrada, o tipo de texto, e um espaço reservado com, qual deve ser um nome de espaço reservado? Talvez possamos dizer, cara incrível. Sim, isso é bom. Podemos dar um valor à Shirley. Isto é apenas para que possamos estilizá-lo realmente facilmente. Em seguida, copie e cole tudo isso. Mas antes disso talvez possamos simplesmente embrulhar o rótulo e a entrada em uma div assim. Então, é na verdade um item de formulário. Então podemos flutuar um ao lado do outro. Copie isto e cole isto. Então, seu primeiro nome, seu sobrenome, e é cara de círculo. Podemos apenas remover os valores dessas entradas. Sua cor favorita. Você pode colar lá. Sua comida favorita. Pode colar lá. Torta de maçã, essa é a minha comida favorita. Além disso, tem torta de maçã. Este é rosa em vez de um rosto incrível. Sua cor favorita, rosa. Sua comida favorita, torta de maçã. Isso tudo parece muito bom. Então temos outro botão. Então, podemos dizer, button.cta e o conteúdo pode ser: Eu quero entrar, e expandir isso. Fantástico. Agora, eu vou para o Google Chrome e atualizar. Lá vamos nós. É isso. Então nós podemos realmente apenas remover estes fors. Eles não são realmente necessários neste exemplo. Certo, salve. A última coisa que eu quero fazer é quando eu pressionar um determinado botão, como se eu for ler mais, eu quero que ele salte para diferentes lugares na página. Posso fazer isso com um botão? Não tenho certeza, então vamos dar uma olhada. Se formos até mais informações aqui e darmos a isso um id de mais informações, e mudamos isso para href. Não tenho certeza se você pode colocar isso em um botão. Mais informações, refresher, nah. Então, vamos mudar isso de um botão para uma atualização A. Clique em Ler mais. Whoah! Onde é que isso nos levou? Eu deveria ter colocado uma hashtag lá. Refresque, leia mais. Lá vamos nós. Então, ele salta para a parte Mais informações. Isso é fantástico. Então, eu só vou procurar o botão. Está tudo bem, a parte do Sign Me Up, isso é ótimo. A história, podemos dizer, história, e então aqui podemos dizer ID da história. Inscreva-se, tudo bem, e mostrar-lhes o mesmo, Mais informações. Então, se atualizarmos aqui e este é o nosso menu, Cadastre-se nos levará ao topo. Vai abrir o pop-up. A história vai levar-nos à história, que é esta parte aqui. Em seguida, Mais Informações nos levará para Juntar ao Nosso Fã Clube. Fantástico. Então a última coisa que precisamos fazer é enviar nosso código. Então, vamos para, ir para a área de trabalho, falhou em buscar, ok. Em seguida, alteramos este arquivo index.html. Então, podemos apenas dizer, escreveu corretamente, escreveu html para o site. Comprometer-se com o mestre. Fantástico. Vamos dizer Empurre para a origem, para enviá-lo para github.com, o que é sempre uma ótima ideia. Lá vamos nós. Então, nós configuramos nosso html. Agora, nós só precisamos estilizar nosso site, que vai ser divertido, vai ser quando as coisas ficarem um pouco complicadas. Então, feito o html, isso é super legal. 20. Projeto: o banner The Hero em CSS: Agora, nós temos que fazer alguns CSS. Então, vamos começar pelo topo com a nossa bandeira de herói. A primeira coisa que preciso fazer é pegar essa fonte. Então, que tipo de letra é esta? É “Open Sans”. Então, no Google, vamos para fontes Open Sans Google. Vamos clicar nesse, e então ele carrega um pouco. Uma família selecionada. Vamos personalizá-lo. Há um pouco aqui, alguns regulares que eu quero e extra ousado e ousado. Isso é ótimo, vamos incorporar. Mas eu quero importá-lo, então vamos para uma importação como essa. Copie isso. Eu vou para Sublime Text e, em seguida, abrir o meu estilo que é CSS, e eu vou apenas colá-lo lá. Para a cor de fundo do meu corpo de amarelo, eu posso remover isso. Vamos guardar isso. Volte para a atualização do Chrome. Então o que precisamos fazer aqui? Entendido, cole. Fantástico, estamos no negócio. Agora, algumas coisas que preciso fazer primeiro. Este corpo e HTML, eu só vou definir um preenchimento de zero margem de zero. Guarde isso, refresque, legal. Isso funciona muito bem, e então vamos voltar ao esboço. Eu até tenho esse fundo grande, azul, e o que eu pretendia aqui é torná-lo 100% de altura do navegador. Então, o que eu gosto de fazer é, dentro do meu HTML, eu gosto de copiar o banner do herói e depois inserir alguns comentários, eu gosto de colar isso em vez de ter que me referir a ele o tempo todo. Então, você pode ir. hero-banner, e então obter um.wrapper que eu posso me referir um pouco mais tarde, então eu tenho um h4 que é bastante padrão, então eu tenho um h1. Então eu tenho um 10 com CTA. Então, eu posso ir, um.cta, e um.cta.alt. Também podemos ter alguns botões que são como este. Então, você pode dizer, button.cta, e podemos dizer button.cta.alt. Então temos os personagens um, dois e três, o que é ótimo. Caractere1, caractere2, caractere3, e que está fora bandeira herói praticamente em poucas palavras. Agora precisamos estilizá-lo. Então, banner herói, vamos para a cor de fundo, que cor de fundo é? É este, então vamos copiar isso. Então vamos dizer, altura de 100vh, que é a altura viewport e vamos salvar isso. Vamos ver como isto se parece. Isso parece muito bom. Então, o que vem a seguir agora? Vamos fazer o nosso invólucro. Então, isso tinha uma largura de 960 pixels e nós podemos definir uma margem de zero e auto, e então para o nosso banner herói podemos definir um preenchimento para o momento de zero em cima e baixo, talvez como 20 pixels na esquerda e direita. Fantástico. Isso está parecendo bom. Agora, vamos para o nosso H4. O que é este H4? Negrito e tamanho de 20 e é branco. Então, vamos pesos de fonte. Provavelmente já está em negrito e o tamanho da fonte é de 20 pixels. Então, porque está na bandeira do herói, eu vou dizer, .hero-banner.h4 e eu vou torná-lo branco. Vamos verificar isso. Não é um.H4, é só um H4. Lá vamos nós. Então vamos dizer esta mesma coisa.hero-banner h4 a, também pode ter uma cor de branco. Isso parece muito bom e, em seguida, vamos para o nosso h1 agora. Pesos de fonte podem ser super ousados, então talvez vamos para 800 e esboçar o tamanho que era este, 50. Então, tamanho da fonte 50 pixels. Vamos guardar isso. Vamos dar uma olhada. Boom. Isso parece bom. Então podemos fazer o mesmo por isso, exceto que é um H1. Então, vamos mudar para h1, cor branca, atualizar. Sim, isso parece bom. Então, qual é a margem deste texto para este texto? Diz 14 pixels e 20 pixels abaixo. Então, o que podemos fazer aqui é dizer, o herói h4, e h4 a, podemos definir isso para margem, zero. Em seguida, o h1, podemos definir sua margem superior dois 14 pixels esquerda e direita, zero, em seguida, 20 pixels na parte inferior. Lá vamos nós. Então, vamos voltar ao esboço. O que é isto agora? São 30 pixels, e este é o h3. É o H3? É o h3, não fizemos nenhum h3s aqui, então vamos para h3. Diga font-weight; negrito, font-size; 30 pixels. Então a mesma coisa aqui. Vamos colorir de branco. Agora podemos definir a margem para zero também. Legal, fantástico. Então, este é o h1, não o h3. Ei, isso parece muito bom. Agora, vou ler mais botão. É um CTA. Vamos dar uma olhada nesse cara. Então, é um tamanho de fonte de 30 pixels. É negrito, então tamanho da fonte 30 pixels, peso da fonte é negrito. O normal tem uma cor de branco e um fundo daquele lindo azul. Então, vamos colocar lá dentro. Eu vou dizer display e eu vou dizer, bloco, ou talvez eu possa dizer inline-block na verdade, inline-block. Eu também vou dar-lhe uma fronteira. Este tem uma borda de 10 pixels. Tem 15% de opacidade. Então, vamos dizer fronteira; 10 pixels sólido rgba, 0, 0, 0 e 0,15, o que é bastante sutil. Vamos dar uma olhada no que isso parece. Legal, isso parece ótimo. Este aqui, vamos ver quanto espaço tem. Cerca de 20 pixels na parte superior e inferior, e 30 pixels à esquerda e à direita. Então, vamos dar algum preenchimento, então 20 pixels e 30 pixels. Vamos ver como isso se parece. Ei, isso está bom, e então podemos dar alguns cantos arredondados. Então, raio de fronteira, que não é limítro-direita. O raio da fronteira, o que é esse esboço? Aqui estão 10 pixels. Vamos ver como isso se parece. Sim, isso é muito bom. Podemos dizer text-decoração; nenhum. Então, ele se livra do sublinhado. Sim, isso parece bom. O que mais há para fazer com esse cara? Precisamos fazer a alternativa agora. Então, vamos para a alternativa, e agora vamos apenas substituir alguns dos estilos padrão que já escrevemos. Então, cor de fundo, vamos para este amarelo. Vamos copiar isso, vamos colocar isso aí. Em seguida, a cor da borda. Qual é a cor da borda? Acho que é o mesmo, na verdade este pode ser preto, e este pode ser azul. Sim, esse é o caso. Então, esta fronteira, vamos mudar isto para aqui. Vamos definir esta cor para ficar aqui. Vamos lá se RGB. RGB zero, 127, 255. Então, zero e 255, vou me lembrar. Zero e 255. Está bem. Então, ele voltou aqui. Refresque. Interessante. Agora, a borda do lado de fora e esboço não está realmente funcionando com a borda no interior do navegador. Como vamos consertar isso? Então, talvez você tenha entendido errado. Talvez não seja uma fronteira, talvez seja um contorno. Então, eu vou fazer uma rápida pesquisa CSS esboço, já que eu não uso esboço muito. Vamos para o esboço sobre indiano e isso é o que eu faço quando estou preso. Eu só pesquisei coisas. Contorno sólido, contorno tracejado. Parece bastante semelhante à fronteira. Legal, vamos usá-lo. Então, em vez de borda, vamos para contorno e contorno de cor. Ok, vamos salvar isso. Vamos voltar ao Chrome. - Sim. Isso parece muito bom. Ele simplesmente não tem nenhum canto arredondado agradável. Para o raio, agora eu quero ir contorno, raio, como faço isso? Está bem. Existe alguma maneira de obter cantos arredondados? Que tal caixa-sombra? Lá vamos nós. Vamos tentar isso. Sombra da caixa. Então, box-shadow x y e azul vamos para dois pixels, vamos para rgba, Vamos copiar este colar isso aqui, basta substituir isso para o nosso botão alternativo, atualizar. Isso parece muito bom e verifique esse botão, muito bom também. Então, lá vamos nós. É assim que você faz um pouco de Google, um pouco de perseguição transbordando. Você não precisa saber de tudo. Não sem botão alternativo, também precisamos apenas mudar a cor. Tenho certeza que é preto. Mas, vamos apenas ter certeza, ok, um, um, um, legal. Podemos deixar isso assim, mas vamos colocar todos lá, para estar duplamente seguros. Sim, está começando a ficar muito bom aqui. Eu preciso de algumas margens entre o botão ler mais, apenas não preto e apenas atualizar e este cabeçalho. Então, no esboço, o que é? 47, é provavelmente cerca de 37, então, podemos fazer como 35 ou algo assim. Então, vamos para o nosso herói estandarte, H3 foi? Podemos definir a margem inferior para 35 pixels. Vamos refrescar aqui. Está bem. Parece muito bom. Fantástico. Agora dentro do meu herói vou colocar um pouco de estofamento superior. Então, vamos ao Hero-Banner. Eu vou para, digamos 50 pixels em cima e em baixo. Eu também vou mudar isso para caixa de tamanho, border-box. Muito obrigado, sublime ou que, Eu só quero um por agora, tamanho, border-box, refrescar. - Sim. Isso parece muito bom. Sim, isso funciona. Fantástico, vamos voltar. Leia mais. Lá vamos nós. Ok, então, está indo bem. Agora, precisamos adicionar alguns caracteres. Vamos fazer isto. Então, no personagem do esboço, esse cara. Bem, quem era ele? Bem, vamos ver as imagens e o personagem dele um. Então, o personagem um é o cara rosa e ele tem uma largura de 363 e 344 é sua altura. Então, caractere um, largura e altura, eu esqueci, 344, 344 pixels. personagem dois é o cara do chapéu. Então, vamos para o cara do chapéu e 309 por 371. Eram 371 pixels, certo? Eu acho que sim. Então o personagem três é 297 por 286, que tal isso? Fantástico. Então podemos apenas dizer “posição absoluta”, e podemos dizer, algo como topo e damos um valor 10 pixels e direita, um valor de 10 pixels e podemos simplesmente copiar e colar isso por enquanto. Então, do lado direito, este tem uma rotação. Então, vamos apenas tirar a rotação por enquanto e você verá que são 89 pixels do lado direito. Então, vamos para 89 personagem 309 e esse cara é 277. Nós provavelmente podemos mudar esses valores. Então, de cima, esse cara tem 117, esse cara tem 213 e então o personagem 3, esse cara de baixo tem 74. Vamos ver o que isso parece, então atualize. Não há nada aqui. O que está acontecendo? Então, eu não sei o que está acontecendo então, eu vou inspecionar. Vamos ver se há algum personagem sentado por aqui. Estão aqui, mas não têm imagens de fundo. Muito erro de novato. Então, bg vamos para url e aqui, podemos ir para imagem e caractere um. Podemos definir a repetição como, no-repeat e dizer que vai começar em zero pixels x e zero pixel y. Podemos dizer tamanho de fundo, fazemos isso novamente, eu só quero tamanho de fundo, porque eles são 100% ou nós poderia dizer algo como cobrir ou conter. Mas, eu estou indo apenas para ir para 100 por cento. Podemos copiar isso, ir para o caractere dois, mudar isso para o caractere dois, e depois mudar isso para o caractere três. Salve isso, volte para o cromo e atualize, e lá estão nossos personagens. Você verá isso quando eu inspecionar e mover meu navegador. Porque esse cara é do fundo, ele vai mudar um pouco, o que é perfeitamente legal. O que eu não quero é que não quero que esse cara saia da borda da página. Então, para voltar ao texto sublime e vamos para nosso hero-banner e podemos dizer posição relativa, que todos esses elementos absolutos escolhem um hero-banner como seus pais posição. Então podemos dizer “transbordamento: escondido”. Refresque aqui. Parece muito bom. Ou podemos fazer aqui, só para garantir que o botão ler mais não seja cortado, é que podemos colocar um min-height. Minha bandeira de herói. Então, vamos refrescar aqui. Lá vamos nós. Isso parece muito legal. Se tivermos que redimensionar isso, verá que todos esses caras se movem conosco. Podemos usar porcentagens assim, talvez possamos usar um valor percentual para este caractere um. Então, do lado direito, talvez nós vamos 10 por cento. Vamos salvar e atualizar. Agora você vê que ele se move a uma velocidade ligeiramente diferente se começarmos a redimensionar nosso navegador. Isso é totalmente legal. Então, esses são nossos personagens, e agora precisamos girar esse cara. Então, vamos dar uma olhada nele. Ele tinha uma rotação de 15 graus, eu acho. Então, vamos colocar isso. Então, é transformar e gira. Então, vamos girar 15 graus. Refresque. Lá vamos nós. Eu quero mudar este valor superior um pouco, talvez vamos mudar este valor superior para 10 por cento também. Refresque. Lá vamos nós. Não é bem como o design, mas olha, parece muito bom. Então, este é o nosso herói banner que é sobre o que este vídeo era. O próximo vídeo vamos começar a fazer a seção de mais informações, para se juntar a nossa seção de fãs clube, Tem sido muito bom. Vimos como muito disso funcionou. No próximo vídeo estará entrando na barra de navegação e na seção ler mais. Parece muito bom até agora. Então a última coisa que precisamos fazer é nos comprometer com isso. Então, vamos para obter uma área de trabalho, estilo o CSS mudou e vamos estilo de banner herói e nos comprometemos a dominar, e depois empurrar para a origem. Segurem-se, e lá vamos nós. Está online. Podemos, felizmente, deixar o nosso computador falhar. Então, agora estilo e ler mais estilo no próximo vídeo. 21. Projeto: barra de navegação adesiva e a seção saiba mais: Então, a próxima é a barra de navegação e a juntar-se ao nosso fã clube ou mais informações seção aqui. Então, vamos fazer a barra de navegação primeiro. A primeira coisa que eu quero fazer, é eu quero verificar o meu logotipo. Sei que são 600 por 80, sim. Isso provavelmente significa que é 300 por 40. É cerca de 300 por 40. Está bem. Vamos para Sublime Text e myindex.html. Tenho a minha barra de navegação aqui, podemos copiar isso e colocar em alguns comentários aqui. Podemos tirar este HTML hero-banner, e vamos colocar nav e quão grande é o nosso nav? Vamos voltar ao esboço. É 100 de altura. Então, altura de 100 pixels, fantástico, e tem uma cor de fundo de branco, e também tem uma sombra de gota ou uma sombra de caixa e lembre-se de seu x, então nada e y. o que é isso? Então, 5y. Então, cinco pixels e oito pixels desfocam, e então qual é a cor? É preto e tem 20 por cento de opacidade. Então, podemos ir para o nosso RGBA, zero, zero, zero, zero e uma opacidade 0.2. Fantástico. Vamos ver como isso se parece. Basta ir para o Google Chrome. Refresque. Sim, isso parecia muito bom. Parece que há uma pequena sombra por cima. Tudo bem por enquanto, e depois vamos fazer um logo. Então, nós temos nav.logo, você pode colocar um um lá, mas se nós alguma vez mudamos de um a, apenas uma classe de logotipo seria ótimo, e nós podemos dizer, exibir e eu vou dizer bloco de exibição, e eu vou definir a largura para, eu Não consigo me lembrar agora. Nenhum. Está bem. Isto foi 300. Então, 300 e uma altura de 40 pixels. Fantástico. Digamos que a posição absoluta. Lá vamos nós, e então ele tem um valor superior de, e o que nós poderíamos fazer, é que nós poderíamos apenas definir o valor superior para 30, ou nós poderíamos apenas fazê-lo no meio de um tempo inteiro. Então, porque sabemos que as alturas são 40, podemos dizer 50%, e então dizemos margem superior. Podemos dar a isso um valor negativo de 20 pixels. Certo, isso é perfeito. Então podemos definir uma esquerda de digamos 30 pixels também. Nós também poderíamos definir isso como zero pixels e, em seguida, definir a margem esquerda de 30 pixels. quer que você queira fazer realmente, então salve isso e então vamos adicionar nossa imagem. Então, bg é para o url, ele está dentro da imagem, e é um logotipo. Poom, vamos fazer a mesma coisa aqui. Então, não repita zero, zero. Então dizemos que o tamanho do fundo é 100%. É muito bom colocar prefixos de seu navegador como Webkit ou Mozilla, seja qual for se você estiver indo para ser segmentado por navegadores mais antigos. Mas para isso, não é mais necessário. Então, temos um tamanho de fundo que parece fantástico. Vamos ver como isso se parece. Não há nada. Ele se foi. Por que é isso? É porque o nosso equipamento de navegação, verifique onde está. É porque o nosso equipamento de navegação não tem uma posição, um parente ou absoluto. Então, vamos realmente torná-lo pegajoso. Então, vamos torná-lo pegajoso, e então vamos ver o que acontece aqui. A gangue. Sim, isso parece muito bom. Vamos inspecionar isso. Não parece bem no meio, não é? Parece que é um pouco de estofamento ou algo acontecendo aqui, mas parece que por agora. Está bem. A próxima coisa que eu quero fazer, é eu quero ir para a minha lista não ordenada navs, e aqui, nós podemos apenas definir o preenchimento para 0, a margem para zero. Nós também podemos ir para o nav uli, e nós podemos definir aqui a margem para zero, o preenchimento para zero. Vamos ver o que isso faz. Está bem. Muito melhor, e então podemos dizer, ok, o li neste display u como um bloco, e deixa flutuar u direita. - Sim. Isso é ótimo. Fantástico. Então, temos a gangue no topo da gangue. O que vamos fazer sobre isso? Bem, nós podemos apenas definir um estouro de oculto, e eles podem fazer um recuo de texto de menos 999 pixels, ou algo assim, e ele se foi. Então, precisamos resolver esses caras, que tamanho de fonte é esse? Trinta pixels, e é maiúscula. Está bem. Vamos para o nav ul. Eu tenho um, então o a dentro do item da lista, dentro da lista não ordenada, dentro dos elementos de navegação, e podemos dizer, bloco de exibição. Sim, isso deve ser bom. Então, podemos dizer que altura está indo para 100 por cento, e dizemos que o tamanho da caixa é caixa de borda, então podemos dizer tamanho da fonte, 30 pixels, e texto - transformar maiúsculas, peso da fonte negrito, fantástico. Vamos refrescar. Está bem. Então também podemos dizer, cor #111111. Ok, e decoração de texto e salvar. Refresque. Pegamos esses caras no meio, eles têm um tamanho de fonte de 30 pixels, o navegador tem 100 pixels de altura. Isso significa que 70 dividido por dois, 35 pixels superior e inferior preenchimento ou margining, Estou aqui para preenchimento. Então, vamos para preenchimento, e 35 pixels. Legal, e então talvez apenas 10 pixels à esquerda e à direita. Salve. Então, atualizamos aqui. Não parece muito certo. Alguém inspeciona esse cara, não fala, inspeciona. Ele não está indo muito bem lá. Então, eu estou dizendo que a altura é 100% com um estofamento de 35 e 10. Então, o que acontece se começarmos a diminuir isso. Mais uma vez. Então, 30 mais 30 mais 30. Não se preocupe com o que é isso. Mas, hey você tem aquela aparência de 30 pixels agora. Fantástico, refresque-se. Talvez seja por causa da pequena altura da linha. Então, para alterar isso na altura da linha, altura da linha para 30 pixels e, em seguida, alteramos isso. Então nós provavelmente podemos mudar isso de volta para 35 pixels. - Sim. Então, vamos fazer isso. Só tenho uma linha alturas. Trinta pixels e mude para 35 pixels. Refresque, feito. Isso parece muito bom e, em seguida, na ul, podemos colocar algumas margens no lado direito, talvez. Então, vamos zero, vamos 20 pixels, zero zero, atualizar. Mais informações. A história. Cadastre-se. Cara, isso não é bom. Agora, vamos buscar a minha barra de navegação para fazer alguma aderência, por isso, nav, nav, aqui vamos nós. Vamos definir o topo para zero. Guarde isso. Vamos refrescar e ele gruda. Sim, olha para isso. A gangue tem uma barra de navegação que é pegajosa. Isso é muito legal. Eu gosto disso. Então, a próxima é a nossa seção de mais informações. Isso é um pequeno problema, só vou escondê-lo. Então, o que fazemos aqui? Bem, vamos copiar nossa seção de mais informações. Vamos ao nosso estilo aqui. Podemos substituir isto e vamos para.moreinfo. Acho que não coloquei um invólucro aqui. Vou te mostrar por que o invólucro é tão legal. Então, temos mais informações, temos um H2. Não sei se temos que fazer alguma coisa pelo H2. Temos um “P”. Na verdade, posso estilizar a etiqueta P. Então temos um botão. O que é um CTA, então parece que não temos que fazer muito. Certo, vamos tentar isso. Então, quando você estilo nossos Ps e nossos Ps são 30. Eles têm 30? - Sim. Então P, vamos para um peso de fonte de negrito, vamos para um tamanho divertido de 30 pixels e então vamos descer aqui e ver qual é a altura da linha, 41? Eu quero ver, eu estou imaginando entre cada tag P é, então por agora eu vou apenas definir isso como 30 pixels zero. Podemos mudá-lo um pouco mais tarde, se precisarmos. Então eu vou movê-lo um pouco mais alto para onde toda a outra tipografia padrão está. Certo, então podemos salvar isso. Vamos verificar isso. Vamos ver o que parece. Sim, isso parece muito bom. Junte-se ao nosso fã clube. Isso parece muito pequeno. Parece muito grande, não sei se é assim tão grande. Então, nosso P é divertido tamanho 30 pixels e, em seguida, definimos isso como um h2. Nós realmente não temos qualquer estilo h2 ainda assim, vamos fazer algum estilo h2 e o estilo h2 é extra negrito 50 então, é praticamente o mesmo que o nosso h1. Só não é um H1. Certo, vamos voltar ao Chrome, atualizar. Sim, isso parece muito bom. Então podemos escrever algumas substituições agora. Então, vamos para o fundo novamente. Mais info.more-info h2. Ou talvez possamos até ir e dizer, mais info text-align: center. Vamos guardar isso, atualizar. Quase fiz o truque, é apenas todo o caminho até a borda da tela, quase. Então, eu quero embrulhá-lo com um invólucro que já temos aqui em cima. Então, você tem essa classe de wrapper que envolve o conteúdo e o banner de herói. Então, eu vou fazer a mesma coisa dentro do nosso mais info div.wrapper, legal, legal. Então apenas recue o nosso código. Vamos guardar isso. Assim, tudo arrumado, muito bom. Então, eu posso ver, mais informações, uau, ele esconde mais informações. Como é que contornamos isto? É uma boa pergunta, na verdade. Vou te mostrar como em um segundo. Mas, por enquanto, isso está parecendo, sim, está parecendo muito, muito bom. Só para explicar o invólucro um pouco mais, vou procurar o invólucro. Se temos que colocar uma cor de fundo de amarelo nisso você pode ver isso, é no meio. O mesmo que este. Também está no meio. Legal. Então, nós só tiramos isso. Agora, o problema de clicar em mais informações e saltar até aqui é problemático. Como é que vamos resolver isto? Bem, uma coisa que podemos tentar é mudar a identificação de mais informações de juntar-se ao nosso fã-clube para outra coisa. Então, vamos dar uma chance. Então, nós temos essa idéia de mais informações, talvez o que podemos fazer é colocá-lo no navegador. Vamos tentar isso. Então, vamos atualizar aqui, mais informações. Lá vamos nós. Isso foi muito bom. Agora, se eu for para a história, ou se eu for para mais informações, isso não funciona muito bem. Então, em vez de mudá-lo lá, talvez possamos colocar uma coisinha sorrateira aqui. Talvez como um br com um id de mais informações, vamos ver se isso funciona. Está bem. O que acontece se for apenas um div, assim. Vamos atualizar, mais informações. Lá vamos nós, isso funciona. A história, mais informações, inscreva-se. Legal, vai ler mais. Lá vamos nós, resolvidos. Então, fizemos nossa barra de navegação, fizemos nossa seção de ler mais e fizemos nossa parte de herói. O que resta a fazer para este vídeo é apenas comprometer-se. Então, vamos para obter GitHub desktop e mudamos index.html e style.css. Então, podemos dizer que fizemos “Nav styling e ler mais.” Então, na descrição, também podemos dizer, “Também fiz algumas mudanças de HTML. Boom. Comprometer-se a dominar, Empurrar para a origem, enviá-lo para a internet, fantástico. Mas não fizemos uma coisa. O que nos esquecemos é que, quando você vai esboçar isso, uma festa tem uma grande coisa de borda rosa em torno dela. Como é que fazemos isso? Ok, então basta ir para texto sublime, lembre-se com estilo que temos este pouco de HTML aqui, eu tenho o destaque da classe span, o que é ótimo. Então, vamos para o destaque, vamos dizer, cor de fundo, vamos para o esboço para ver que cor é essa. Ok, é aquele. Vamos colocá-lo lá, e então vamos dizer, cor e é algum tipo de cor vermelha. Está bem. Fantástico. Então podemos dizer um preenchimento de, talvez seja como 10 pixels. Vamos ver como isso vai correr. Em seguida, uma exibição de bloco inline-. Vamos refrescar-nos aqui. Isso parece muito bom. Bem perto, na verdade. Vamos desfazer, talvez não tão alto, então podemos ir algo como cinco pixels, 10 pixels. Está bem. Sim, isso parece muito bom. Então não podemos nem fazer uma altura de linha de, qual era a altura da linha aqui? 50. Então, eu vou fazer 50 pixels. Sim, isso parece muito bom. Acho que sim. Ainda há um espaçamento estranho aqui. Então, talvez mudemos isso para inline. Vamos ver o que acontece. Sim, em linha funciona muito melhor do que o bloco inline. Fantástico. Então vamos checar nossas margens 18 e 40. Isso não parece certo. Então vamos fazer mais informações h2 margem inferior, vamos para 18 pixels. Então nós também podemos fazer, não, talvez nós apenas fazer o P, e dizer, margem superior, e então margem inferior pode ser 40 pixels ou 35 pixels. Vamos verificar isso. Refresque. Legal, isso parece muito bom. Então junte-se ao nosso fã-clube no topo, 50 pixels? Não sei se é esse o caso, então vamos checar isso. Está bem. Mais informações, nem tanto que eu não acho. Nav está aqui, e depois é para mais informações. Então, o que podemos fazer aqui é, esse cara, provavelmente podemos dizer, margem e podemos dizer, 50 pixels, zero. Ok, isso parece bom. Então, vamos para mais informações p, mudar isso para mais informações h2 margem superior 50 pixels e, em seguida, o resto pode ser zero. Está bem. Vamos dar uma olhada. Está bem. Então, o destaque só precisa ser bastante ousado e podemos fazer isso aqui e podemos dizer, fonte pesa 800. Refresque, feito. Certo, agora podemos nos comprometer de novo. Então, vamos dizer: “Apertou a seção de ler mais.” Confirmar e, em seguida, empurrá-lo para origem novamente. Feito. De verdade, desta vez. 22. Projeto: seção A história: Então, em seguida, na nossa lista de coisas a fazer, é a seção de histórias. Então vamos entrar nisso. O que eu vou fazer primeiro é esta seção de lista. Tem 470 pixels de largura, o que é ótimo, e cada um deles tem 70 pixels de altura e eles têm 20 pixels entre cada um. A fonte, negrito e 40 pixels, 20 pixels para a esquerda e para a direita, eu imagino. Ok, então apenas verificando que 70 pixels de altura e então eu copiei os 470 pixels de largura. Ok. Então, eu só vou colar isso ali e eu vou pegar o separador em todas essas coisas, eu vou colá-lo aqui. Fantástico. Podemos fazer o separador primeiro, eu acho. Vamos deixá-lo lá por enquanto. Então vamos dizer a nossa lista NB, ok, que tem uma largura de 470 pixels. Ok, então a lista NB li. O que é isto? Então, ele tem uma altura de 70 pixels. Legal. Acho que tem um raio de fronteira de 10 ou 4. Raio da borda de 10 pixels. Vamos ver. Sim, 10 pixels e lembre-se, tem um tamanho de fonte de 40. Então, tamanho da fonte de 40 pixels. Na maioria das vezes, é de cor branca. Então, cor branca. E então o que podemos fazer aqui é definir nossos pesos de fonte de negrito. Ok. Nós também pode definir o seu tipo de exibição, assim bloco de exibição. Fantástico. E então, para cada cor, haverá diferentes cores de fundo. Então eu acho que há vermelho então, bgc. Estou procurando minha cor vermelha e depois há azul, cinza, amarelo, rosa e salmão. Ok, então vamos para azul, vamos para cinza, vamos para amarelo, rosa e salmão. Muito bem, tão vermelho, vamos pegar este, copiar a cor. Fantástico, vamos azul, copie a cor. Ok, o cinzento, é meio estranho. Então, tem uma opacidade de 10%. Então, o que podemos fazer aqui é ir RGBA. Estou tentando usar 0,0,0 e ajustá-lo para 0,1. Isso deve estar tudo bem. Então o amarelo, de que cor é essa? Cole isso, rosa. Tudo bem. E então eu uso salmão. Ok. Agora, qualquer um destes ficou preto, apenas amarelo. Ok. Então, tem uma cor de fundo de amarelo, então também tem uma cor de texto de uns. Ok. Fantástico. Vamos dar uma olhada rápida no que isso parece, atualizar. Ei, isso parece muito bom, devo dizer. Também temos aqui um preenchimento de 20 pixels. Então, vamos colocar um preenchimento aqui de 20 pixels e vamos definir o tamanho da caixa para caixa de borda. Muito obrigado. Ok. E atualizar, nada mudou muito porque não temos uma cor de fundo sobre isso. Vamos copiar esta cor de fundo, bgc. Fantástico. Refresque, isso parece bom. E então o que podemos fazer é que podemos definir nossa margem inferior aqui, margem inferior para 20 pixels. Fantástico e, em seguida, talvez na lista, o preenchimento pode ter 20 pixels ao redor, exceto para a parte inferior e vamos contar com o último bloco para dar essa ilusão do preenchimento adicionado na parte inferior. Sim, isso parece bom. E então o que podemos fazer aqui é colocar um pouco de preenchimento, então preenchimento de 20 pixels à esquerda. Talvez possamos fazer como cinco pixels na parte superior e inferior. Vamos ver como isso se parece. Ele mudou para caixa de tamanho, caixa de tamanho, border-box. Ok. Vamos inspecionar isso e ver o que está acontecendo. Ok. Então, vamos mudar isso. Então, isso foi realmente destinado a ser cinco pixels e talvez isso é 20 pixels. Sim, isso parece bom. Seis pixels e 20 pixels. Fantástico, sim. Dentro do html agora, nós também podemos fazer um pouco mais wrapping. Então, vamos colocar isso em um invólucro de pontos e isso vai centralizar tudo. Ok. Boom! E então o que queremos fazer com a nossa lista NB é que queremos flutuá-la. Então, flutuar para a esquerda, salvar isso, atualizar. Parece muito bom, certo? E então queremos dar uma margem, digamos, zero no topo, 20 pixels nos direitos e 20 pixels abaixo, nada à esquerda, atualizar. Isso parece ótimo. Agora, que tal esta esquerda e abaixo? O que é isso deixado e abaixo? É um H3. Qual é o nosso estilo padrão para um h3? No topo, 30 pixels. Bem, são 30 pixels? , 40 pixels. E o outro H3? Acho que este não era H3, pois não? , Ok. Então, o que podemos fazer aqui é simplesmente sobrescrever alguns estilos, vamos definir o tamanho da fonte para 40 pixels apenas para a nossa lista NB. Bem, só para a nossa história. Então, dentro da história de ponto, colocamos um h3 e queremos dizer que o tamanho da fonte é 30 pixels, não, o tamanho da fonte é 40 pixels. Sim, lá vamos nós. Isso parece muito bom. Vamos fechar isto. Isso parece fantástico. Fantástico. Agora, tudo o que podemos fazer é fazer os separadores. Então, vamos ver o que são estes, 10 altura, 470 largura. Parece que cerca de 60 ou 70 margin-top, margin-bottom. Então, 470 largura e uma altura de 10 pixels, cor de fundo, vamos para uns. Ok, e então coloque uma margem de, o que era, 60 pixels ou 70 pixels e então carros que podemos enviar para Lynette. Ok. Olhe para isso. E o outro no fundo também deveria ter funcionado. Fantástico. Ok. Agora, nós temos essa imagem, então, vamos dar uma cláusula, digamos, imagem de gangue, IMG. Isso é ótimo. Guarde isso. Ok. Imagem de gangue, podemos dizer exibir como bloco e vamos definir a margem para zero e auto. Guarde isso, atualize, agora está no meio. Certo, isso está indo bem. E então talvez nós vamos dizer, rodapé. O que vamos fazer com o rodapé? Nós dizemos, centro de alinhamento de texto. Ok, talvez no rodapé também possamos adicionar um invólucro. Então, ponto wrapper e isso só significa que ele vai ser alinhado no centro. O que está acontecendo lá? Vamos verificar isso. Então, o invólucro não está alinhado no centro. Isso está tudo bem. Então, se salvarmos isso, alinhe o centro de texto. Vamos ver se isso muda alguma coisa. Sim, ele faz. Dentro do nosso rodapé, qual é o tamanho da fonte aqui? O tamanho da fonte é de 20 pixels, todos em negrito, mas parece que há uma opacidade de 40%. Então, vamos dizer cor, rgba. Vamos para preto, e vamos para 0,4, para 40 por cento. Em seguida, tamanho da fonte, vamos para 20 pixels, e então, um pouco de espaço. Então, talvez 80 pixels para cima, 45 para baixo. Então, vamos dizer margem, 85 pixels, 0 e 45 pixels para a parte inferior. Guarde isso. Vamos refrescar. Sim, mas não é ousado, então o peso da fonte, vamos para um negrito. Sim, isso parece ótimo. Então, talvez possamos também dizer, rodapé a, e vamos torná-lo da mesma cor. Bastante doce. É quase a nossa página terminada. Agora precisamos trabalhar com esse riso. Então, como vamos fazer isso? Bem, eu acho que poderia funcionar como uma posição absoluta um. Também poderia funcionar como uma transformação. Embora transformados e relativos, eles não saem do fluxo de documentos. Então, eu vou mudar minha lista NB para posição relativa. Então o que podemos fazer é, se chama este? Arrastando. Então, nós temos um li.dragging especial.nb-list, e nós podemos definir isso para posição absoluta, e nós dizemos top, podemos dizer 30 pixels por enquanto. Digamos, vamos para a esquerda de 30 pixels também. Vamos ver o que acontece aqui. Lá vamos nós, e talvez possamos apenas, por enquanto, dizer zero, zero, e dar-lhe uma largura de 100 por cento. Quase. Então, digamos 20 pixels, 20 pixels e, em seguida, direita 20 pixels também. Sim, vamos ver o que isso faz. Quase certo. Então nossa largura, podemos tirar isso, eu acho. Fantástico. Agora, com a nossa transformação, podemos girá-la um pouco. Então, gire, quanto isso é girado? Essa é uma boa pergunta. Vamos dar uma olhada, e ele rodou seis graus. Então, seis graus, e tem uma sombra, então sombra de caixa, e o que temos aqui? Bem, nós temos 2 e 14, e está em 50% de opacidade. Então, 0, 2, 14 pixels e RGBA, 0, 0, 0, 0.3. Vamos ver como isso se parece. Parece muito bom. Então, agora do início, podemos dizer, sei lá, 70 pixels? Sim, isso parece muito bom. Agora, podemos usar o navegador para fazer o resto aqui. Então, da esquerda um, dois, três, quatro, cinco, da direita, menos um, dois, três, quatro, cinco. Sim, isso parece bom. Então, esquerda de 70, direita de menos 30. Então, temos que ir. Agora, só precisamos colocar essa mão lá dentro. Como é que vamos fazer isto? Bem, podemos colocar um elemento extra lá ou podemos tentar usar o off para pseudo-classe. Vamos tentar isso. Então, vamos colocar isso assim, e vamos atrás. Vamos definir o conteúdo para nada, e então vamos dizer, exibir; bloco, e então vamos dizer posição; absoluto, e então talvez nós dar-lhe uma largura, e nós dar-lhe uma altura, e vamos esboçar para descobrir o que são esses; 54 por 50. Vamos tentar isso. Cinquenta e quatro pixels, 60 pixels. Fantástico, e, em seguida, fundo vamos para url, dentro da imagem e mão. Onde está a mão? Lá vamos nós, então podemos ir para 'no-repita 0 0' e, em seguida, no tamanho de fundo , novamente, vai ser 100%. Vamos salvar isso, e vamos dar-lhe um valor máximo de zero, apenas por enquanto. Bem, talvez possamos definir o valor inferior. Ok, e então podemos dizer esquerda, vamos para 60 por cento, e bem perto, bem perto. Então, vamos dar uma olhada nesse cara depois da pseudo-classe. Aqui está. Vamos mudar a parte inferior para menos 30 pixels. Sim, isso parece muito bom. Sim. Fundo de menos 30 pixels. Okey-dokey. Então, temos coisas que achamos importantes à esquerda e abaixo da nossa história. Isso parece certo? É extra ousado. Então, vamos para a NB-list, história. Aqui vamos nós. Então, o peso da fonte 800. Guarde isso. Então, o riso é obviamente mais importante do que qualquer outra coisa para esses caras especialmente. Temos um pouco de embrulho flutuante e texto acontecendo, mas o que está acontecendo aqui? Nosso navegador deve estar no topo. Então, vamos voltar para o nosso equipamento de navegação. Vamos dar-lhe um índice z de 1. Vamos refrescá-la, e isso resolveu tudo. Fantástico. A outra coisa que notei foi que quando cliquei no botão de inscrição, tem uma borda azul estranha nele. Isso é estranho, eu não quero isso. Eu acho que é algo a ver com acessibilidade, mas agora, eu não gosto disso, e também não há cursor neste botão. Então, vamos mudar isso. Então, nos cta, podemos apenas ir, fronteira; nenhum, e vamos dizer cursor, e nós mudamos isso para ponteiro. Então, atualize isso. Há agora, ainda há uma fronteira. Talvez não seja uma fronteira, talvez seja um contorno. Que tal um esboço, nenhum? Refresque. Sim. Lá vamos nós, mas eu também quero dizer uma fronteira de nenhum. Parece que há uma pequena fronteira lá também. Refresque. Lá vamos nós. Fantástico. Eu também posso colocar uma classe hover sobre ele ou uma classe ativa. Então, vamos fazer isso. Ativo. Vamos mudar a opacidade, é muito fácil, para algo como 0,7. Sim, isso parece bom. Fantástico. Este é o nosso site que está parecendo realmente bom no momento. Nós temos literalmente apenas o popup para fazer. Então, o que eu vou fazer agora é, eu vou apenas esconder o pop-up por enquanto. Então, como se chama o nosso popup? Aqui está, e nós podemos apenas dizer algo como, que popup, e dizer display; nenhum. Fantástico. Salve isso. Refresque. Aqui vamos nós. Este é o nosso site que é visível. No próximo vídeo, eu vou clicar em se inscrever, e ele vai me mostrar meu pop-up, ou eu clicar em se inscrever aqui, e ele vai me mostrar meu pop-up. Antes de fazermos isso, vamos confirmar o nosso código. Então, o que fizemos aqui, fizemos o estilo do rodapé da seção da história. Também adicionou alguns HTML, e mudou alguns outros bits de CSS. Então, nos comprometemos a dominar, e enviamos para a origem, enviamos para github.com. Fantástico. Lá vamos nós. Vejo você no próximo vídeo. 23. Projeto: Popup: Então, a única coisa que nos resta fazer é o nosso popup. Muito excitante, certo? Então, vamos entrar nisso. Dentro do Sublime Text, a primeira coisa que eu quero fazer é apenas comentar isso, porque eu não quero exibir nenhum agora, mas eu quero exibir nenhum em pouco tempo. Então, o que é isso e como vamos fazer isso? Então, a primeira coisa que eu gostaria de fazer é colocar um cobertor e este cobertor, vamos ver, ele tem uma opacidade de 70% e é preto. Então, nós estamos indo para ir. Popup.cobertor. Ortografia correta sempre ajuda e vamos definir uma cor de fundo de rgba (0,0,0, .7). Isso é ótimo. Vamos definir suas posições para absoluto e vamos dizer zero superior, zero inferior, zero direito, e zero esquerdo. Isso deve fazer o truque. Popup em si pode ser consertado, então vamos posf e sim, praticamente a mesma coisa aqui. Fantástico. Temos o conteúdo, por isso, se copiarmos isto, e é colado aqui. Lá temos o conteúdo, então.popup.content. Certo, o que vamos fazer com esse cara? Bem, vamos checá-lo. Então, ele tem 961 pixels de largura. Deve ser 960. Então, vamos para largura de 960 pixels. Eu vou definir uma caixa de tamanho de caixa de border-box, fantástico. Então, parece que ele tem cerca de 40 pixels e 30 pixels no topo para ver com preenchimento, então vamos para preenchimento de 30 pixels e 40 pixels. Vamos ver como isso funciona. Temos então esse cara que também é um H3, eu acho, um H2. H2, o mesmo que Junte-se ao nosso Fanclub. Então, nós temos isso. Queremos definir nossa cor de fundo para branco. Vou dizer centro de alinhamento de texto. Vamos ver como isso se parece. Então, atualize. Ok, está parecendo bastante bom. O índice z está abaixo da barra de navegação. Quero que seja por cima. Então, vamos mudar o índice z do popup para dois. Muito fácil, refresque-se, lá vamos nós. Ainda meio estranho, certo? Então, o conteúdo, ele não tem uma posição de absoluta. Então, vamos mudar essa posição de absoluto. Sabemos que sua largura é 960. O que é metade de 960? Não faço ideia, 480. Então, vamos para um módulo à esquerda de 480 pixels ou 480 pixels negativos. Vamos então definir este valor à esquerda para 50 por cento. Vamos guardar isso e verificar. Sim, fantástico. Então, quão alto deve ser? Bem, acho que podemos resolver isso aqui. Podemos ver que esta coisa toda tem cerca de 540 pixels. Então, vamos alterá-lo para a altura de 540 pixels. Novamente, vamos defini-lo para o valor superior para 50 por cento, e 540 dividir por dois é 270. Então, vamos margem superior negativa 270 pixels. Vamos ver isso, fantástico. Parece bastante bom por enquanto. Vamos ajustar o botão de fechar. Isso é excitante. Popup.Fechar. Tem uma cláusula próxima? Eu acho que ele faz. Sim, está bem. Então, vamos dar uma olhada e esboçar o quão grande isso é, 80 por 80. Então, vamos definir uma largura de 80 pixels, uma altura de 80 pixels. Eu quero ter uma cor de fundo de, lá vamos nós. Então queremos um plano de fundo ou queremos que isto seja uma URL e imagem e feche. Podemos colocar essa cor aqui. Podemos dizer, sem repetições. Posso dizer “centro “, fantástico. Então nós provavelmente podemos definir seu tamanho de fundo para algo como 100 por cento, mas poderia ser 80 por cento ou 70 por cento, não muito certo agora. Vamos verificar e, em seguida, topo, vamos definir em menos 40 pixels e direita, vamos definir em menos 40 pixels. Vamos guardar isso. Aí está, diz “Fechar”. Queremos um raio de fronteira. Oh, cara. Nunca acerto neste. Raio de fronteira de, digamos apenas 50 por cento. Sim, isso parece muito bom. Digamos, fronteira de nenhum e delinear nenhum. Sim, isso parece ótimo. Talvez o nosso tamanho de fundo possa ser de 50 por cento. Vamos ver o que acontece então. Sim, 50% parece ótimo. Podemos definir um estouro de capacidade de oculto. Então, vamos dizer recuo de texto menos 999 pixels, e isso irá recuar nosso texto próximo para lugar nenhum. Lá vamos nós. Nós não estabelecemos uma posição de absolutos, e é por isso que o valor superior não está funcionando. Então, vamos posicionar absoluto, atualizar, incrível. Para agora, o nosso cursor, vamos para o ponteiro do cursor, e lá vamos nós. Agora, o que precisamos fazer é trabalhar nesses elementos aqui. Então, nós temos apenas esses itens, para que possamos ter popup o item e dentro do item, talvez possamos flutuá-los. Então, podemos apenas flutuá-los para a esquerda. Sim, vamos tentar isso, então flutua para a esquerda. Certo, qual será a largura? Boa pergunta. Largura vai ser, digamos 415 pixels. Sim, vamos tentar isso, então na margem esquerda, bem, vamos ver, qual é a margem esquerda, 40 pixels. Certo, vamos ver como isso vai correr. O que acontece? Uau, o que está acontecendo aqui? Não é bem o que eu quero. Então, o item pop-up talvez, bem, isso é realmente uma div, o rótulo, e entrada talvez não. Então, vamos alterar este item.label e entrada com um tipo de texto. Eu vou dizer bloco de exibição em ambos. Vamos ver se isso muda alguma coisa. Não, isso não muda nada. Então, vamos ver o que está acontecendo aqui. Ok, então eles não estão flutuando para bem, o botão também não está realmente gostando disso, parece que ele está em elementos de linha. Então temos que dizer bloco de exibição. Ei, ele ainda está arrepiando. Acho que todos eles estarão flutuando à esquerda. Problemático. Então, o que podemos fazer aqui? Vamos ver se mudar, o que, lá vamos nós, isso ajuda muito. Então, com os 400 pixels, funciona muito bem, por enquanto. Talvez possamos definir a cor de fundo para amarelo para descobrir o que está acontecendo. Ok, então parece que há muito espaço no lado esquerdo aqui. Então o que podemos fazer é inserir nosso arquivo de índice, podemos colocar essas duas linhas, bem aqui. E então vamos apenas recuar aqui. Ok, então nós podemos realmente flutuar os itens nas linhas e, em seguida, as linhas vão apenas começar um após o outro. Certo, então o que temos aqui, temos um pop-up. aparecer em uma linha e isso vai ser um bloco de exibição e é altura, ele vai ser 111. Então, altura de talvez vamos apenas um 110 pixels. Certo, ou talvez nem precisemos de uma altura. Talvez possa ser apenas como uma correção clara, então talvez o que podemos fazer aqui é apenas ir, aparecer em uma linha e depois podemos dizer que o conteúdo não é nada. Podemos então dizer, exibir tabela e, em seguida, podemos dizer caminho claro. Lá vamos nós. Ok, então agora temos esses itens flutuando nas fileiras. Podemos mudar isso de volta para 415 pixels e então podemos dizer que qualquer item que é também um primeiro filho não tem tal coisa como um módulo restante. Aqui vamos nós, e vamos ver isso. Lá vamos nós, funciona um pouco melhor. Então eu tenho meu rótulo exibindo como um bloco, mas eu tenho um pequeno nome de classe lá em vez de um nome de tag real. Então vamos salvar isso, atualizar. Muito melhor. E, em seguida, dentro de cada item eu posso dizer, leva a linha para a esquerda, ou ele apenas leva a linha por último, leva a linha para a esquerda. Lá vamos nós. Refresque. Incrível. As coisas estão muito melhores. E qual é o tamanho da fonte aqui? 20 pixels e 30 pixels. Então, vamos para o tamanho da fonte, 20 pixels e foi negrito? Sim, ousado e ousado. Doce. Ok, então o tamanho da fonte é 20 pixels e o peso da fonte é negrito. E o mesmo para o texto, 30 pixels e peso da fonte em negrito. Sim, isso parece muito bom. Foi um pouco de uma margem lá então talvez algo como 10 pixels, margem inferior 10 pixels. Sim, super ótimo. Nós provavelmente podemos tirar este amarelo agora, então sim. Obrigado. Parece um pouco melhor agora. Certo, agora se tivermos que voltar ao esboço, essas coisas são grandes fronteiras. Então 111 é a cor e a espessura de 4. Então, vamos para o tipo de texto. Vamos para uma borda, e é um sólido de 4 pixels e é 111. Ok, isso parece muito bom, mas agora qual é a altura? A altura é de 70 pixels. Então, vamos para uma altura de 70 pixels, vamos para uma caixa dimensionando para uma caixa e, em seguida, atualizar. Parece muito bom. Algo não parece muito certo. Talvez sejam as linhas, o conteúdo, há um preenchimento de 30 no topo e 40 na esquerda. Estes parecem um pouco curtos. Então, talvez o que podemos fazer é definir essas entradas sua largura deve ser 100%, e então você está preenchendo ou seu preenchimento marginal 15 na parte superior e 20 na esquerda e direita. Então, vamos para o preenchimento. Então, 15 e 20 pixels e vamos ver como isso se parece. Ei, isso parece muito melhor. Fantástico. E eu realmente não posso rolar em lugar nenhum agora. É uma coisa de orçamento, mas se eu fechar isso. Lá vamos nós. Eu posso ver o que está acontecendo. Então, talvez eu queira diminuir um pouco a altura neste pop-up. Então, vamos para o conteúdo pop-up aqui, mudar isso para 500. Então eu vou mudar minha margem para 250, então apenas atualize isso. Sim, isso parece muito bom. E então meu pop-up, eu vou mudar meu H para dizer que a margem é 0 0 e talvez se pudermos ir 20 pixels na parte inferior, vamos ver como isso se parece. Talvez possamos fazer 10 pixels no topo. Sim, isso parece muito bom. E depois também quero o meu pai. CTA. Eu quero dar um pouco de margem superior, vamos para 50 pixels. Talvez menos, 40 pixels. Super! Preencha os seus dados, eu quero em Boom! Está bem. Isso muda um monte de coisas. Então, agora o que podemos fazer é realmente começar a fazer um pouco de JavaScript. Agora, lembre-se que esta não é uma classe JavaScript, então eu vou fazer algum JavaScript rápido e sujo, mas suportar comigo. Tudo o que preciso fazer aqui é no nosso índice, tudo o que abre ou fecha o pop-up precisa ter algum tipo de função nele. Certo, então vamos procurar por tudo que tenha haxixe. Lá vamos nós, logo, tudo bem, inscreva-se. Lá vamos nós. Então aqui o que podemos fazer é talvez dizer algo como JavaScript. Logotipo. Sim, está tudo bem. Cadastre-se. Aqui vamos nós. Então, aqui o que podemos fazer é, talvez possamos dizer algo como JavaScript, e podemos simplesmente colocar em nada. Acho que funciona. Ei, talvez seja apenas JavaScript assim. Como isso? Eu não sei. Então podemos dizer, onclick, e aqui dizemos, ShowPopup. Lá vamos nós. Vamos copiar tudo isso de novo. Vamos procurar por inscrição. Está bem. Lá vamos nós. Onclick, ShowPopup. Está bem. Acho que precisa de algumas vírgulas invertidas. Está bem. Então, há apenas dois botões de inscrição. Está bem. Agora o que vamos fazer é criar um novo arquivo JavaScript. Então, Novo arquivo, vamos salvá-lo como script.js. Está bem. Dentro do nosso index.html, o que vamos fazer é adicionar o script na parte inferior. Então, script e fonte é script.js, e dizer tipo. Acho que é um texto JavaScript. Lá vamos nós. Script, vamos apenas dizer console.log, hey lá. Agora, vamos apenas fazer isso para que saibamos que o JavaScript está funcionando. Vamos refrescar. Vou apenas partilhar a minha consola. Ei aí! Então, está funcionando. Fantástico. Agora o que podemos fazer é voltar ao estilo. Nós vamos para popup, e nós vamos comentar isso de volta. Vamos então adicionar uma classe ao nosso popup para dizer popup.show, e vamos dizer, bloco de exibição. Está bem. Então, isso é muito legal. Então, quando atualizarmos aqui, sem popup. Então, agora o que podemos fazer é, dentro de nosso index.html, nosso popup, basta dar-lhe um ID de popup, e é assim que vamos fazer referência a ele em JavaScript com um ID. Então, dentro de nossos scripts, nós podemos realmente escrever algum código, mas eu vou fazê-lo no navegador primeiro. Então, eu vou dizer, document.getElementByID, e então eu vou dizer, obtê-lo por popup. Pressione Enter. Não há nada lá. Então, vamos apenas refrescar. Vou pressionar a seta para cima, fazer de novo, e teremos o nosso popup. Então, vou escrever um código. Eu vou dizer var. Talvez eu possa fazer isso um pouco maior para você. Var popup é igual, e se eu pudesse apenas copiar isso, ok. Então, isso é o que o popup é igual. Eu vou então dizer Popup.ClassList.Add, e então eu vou dizer show. Assim mesmo, os nossos papeis chegaram. Então, o que eu posso dizer novamente é, Eu posso dizer remover show, e isso irá remover meu popup. Bastante fácil, certo? Então, vamos copiar isto. Vamos ao nosso guião. Agora podemos escrever um script que diz algo como mostrar popup. Lá vamos nós. Então, podemos dizer função ShowPopup, e podemos escrever isso. Antes disso, podemos dizer var popup é igual a, e vamos voltar ao Chrome, e vamos pressionar a seta para cima aqui apenas para ver o que escrevemos na primeira vez. Lá vamos nós. Vamos copiar isso e colá-lo. Então, vamos remover isso. Neste caso, vamos adicioná-lo. Então podemos copiar isso, e você pode dizer HidePopup. Está bem. Vamos salvar isso e, em seguida, onclick, podemos realmente copiar tudo isso. Em seguida, procure o nosso botão Fechar e faça exatamente a mesma coisa aqui. Onclick, ShowPopup. Está bem. Então, vamos fechar isto. Vamos refrescar. Leia mais. Inscreva-me! Lá vamos nós. Nosso popup está funcionando. Vamos fechar isto. Isso não funciona. Por que isso não funciona? Boa pergunta. Então, vamos voltar ao nosso roteiro. Ainda diz “adicionar”. Então, digamos remover. O que isso está fazendo é basicamente, ele está adicionando e removendo apenas isso como pedaço de código e CSS. Está tirando o show. Então, portanto, ele padrão para exibir nenhum. Quando ele adiciona uma classe de show, ele então vai e diz, “Ei, exibir este elemento para a exibição do bloco.” Está bem. Refresque. Inscreva-me! Fechar. Ainda nada. Então, há algum erro? O que está acontecendo aqui? Bem, vamos inspecionar esse elemento. Vamos ver. Isso é, na verdade, a coisa certa. Ainda diz ShowPopup. Então, vamos voltar para aqui, e digamos HidePopup. HidePopup. ShowPopup. Está bem. Refresque. Fechar. Inscreva-me! Eu quero entrar! Fantástico. Fechar. Inscreva-me! Fechar. Huh! Cadastre-se. Fechar. Muito fixe, certo? Agora temos um elemento fixo. Temos um elemento pegajoso. Temos todos os tipos de coisas barulhentas acontecendo nesta página web. Nós praticamente completamos nosso exemplo. Vamos apenas fazer um último compromisso. Podemos dizer: “É o dono! Feito! Principalmente feito.” Então, ainda há um monte de coisas que vão para tornar um site incrível. Há provavelmente algumas coisas que você está tipo, “Por que você não fez isso?” Bem, nós poderíamos ficar aqui por dias fazendo o site perfeito, mas eu espero que você tenha aprendido muito no processo. Uma coisa que eu quero fazer, é tirar esse registro do console. Está bem. Comprometer-se com o monstro. Empurre para o GitHub. Boom! Feito. 24. Compartilhe com outras pessoas: Então, agora que você criou uma página web ou site usando o que aprendemos na aula, por que não compartilhá-lo? Faça o upload para o seu próprio site, use páginas Surge ou Github. Usar o controle de versão com Github ou Bitbucket também é uma ótima idéia. Você não só consegue manter versões do seu projeto em diferentes estágios, mas também é uma ótima ferramenta de backup. Então, agora que você criou seu site, é uma obra-prima, você quer compartilhá-lo. Se você não quer pagar por seu próprio site e hospedagem, se você só quer tirá-lo para a natureza, para o mundo, e você tem usado Github e talvez Github desktop, há uma boa notícia, você pode simplesmente publicá-lo gratuitamente on-line com páginas do Github. Então, o que você faz é tocar nesta ramificação mestre e você diz gh-pages, criar uma nova ramificação, criar essa ramificação com gh-pages e então você pode alternar entre sua ramificação mestre e sua ramificação gh-pages e então você vai, boom , publicar filial, e ele vai empurrar para Origin , fantástico, e você vai para o Google Chrome e em uma nova guia, você pode usar seu nome de usuário, seu nome de usuário Github, então mrra.github.io/the-gang e lá está ele. Está online para todo o mundo ver. Bastante assassino, muito doce e, haha, nosso pop-up funciona. Yay, yay para páginas Github. Uma das maneiras mais fáceis de colocar seus sites on-line, especialmente, se você não usou o Github, é usar algo chamado Surge. Eu não vou te contar tudo sobre isso. É bastante incrível. Então, o que eu gostaria de fazer é, eu gostaria de criar um novo arquivo. Eu vou salvá-lo como algo como http e então eu vou dizer o gang.surge.sh. Vou salvar isso como CNAME e você verá o porquê em um segundo. Eu vou voltar para o Finder, arrastar minha pasta www para o terminal e então eu vou apenas ir Pesquisar e apenas assim, eu pressionar, Ok. Se você ainda não fez login, ele irá levá-lo através de um monte de etapas, confira search.sh e, em seguida, vai, baam. O projeto é publicado e executado no gang.surge.sh e nós podemos ir até aqui e boom, está online. O gang.Surge.sh, super, super simples. Então, sim. Confira surge.sh. 25. Fim: Está bem. Eu me diverti ensinando esta classe de layout HTML e CSS. Espero que tenha aprendido muito e se tenha divertido. Agora você deve ser mais capaz de dominar o mundo e construir sites incríveis. Você pode ver mais de minhas aulas e participar do fã-clube em tapkaboom.com. Então, tchau por agora, e te vejo em breve com mais aulas. Se você gostou da aula, dê um polegar para cima e escreva um bom comentário. Significa muito para mim.