Sombra nas Caixas - @CursoemVideo de HTML5 e CSS3

há 8 anos aqui os nossos estudos sobre o Capítulo 16 e agora nós vamos começar a falar sobre sombras então [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS a gente tá falando sobre o modelo de caixas um capítulo bem grande é um capítulo com muitas configurações com muitas declarações CSS e agora a gente vai começar a falar sobre sombras mas é importante dizer que você precisa ter toda a base do modelo de caixas para você poderá procedimento aqui até porque a gente vai utilizar o exercício da aula anterior quando a gente organizou lá as nossas tags semânticas os nossos grupo tags semânticos e criamos um modelo de um site muito simples agora a gente vai dar um aprimoramento colocando algumas sombras em algumas arestas aí interrompemos a sua aula para mais um recadinho aqui da Record e a quem tá trazendo aqui para o nosso curso em vídeo uma série de cursos que vão te preparar para o mercado de trabalho e hoje eu vim falar aqui de um consumo muito especial que é um curso de criação de aplicações para dispositivos móveis utilizando o appinventor o evento para quem não sabe foi uma aplicação criada pelo próprio Google e é mantido pelo Instituto de Tecnologia de Massachusetts o em mente e nesse curso que a recortar oferecendo o completamente gratuitamente para todos os nossos alunos do curso em vídeo você vai aprender os primeiros passos da programação de uma maneira bem prática e objetiva utilizando o evento você vai ser capaz de criar o seu primeiro aplicativo para celular então não perca tempo aponte a câmera do seu celular o aplicativo de câmera para esse código QR que tá aparecendo aqui embaixo e você vai ser desviado para nossa página especial onde a Record Vai disponibilizar todas as instruções para você poder fazer esse e muitos outros cursos que estão disponíveis na plataforma Obrigado pelo Patrocínio he could e a gente volta pra nossa aula então é só esse aqui o exercício que a gente criou aqui um nosso primeiro site que meu site do mais a estrutura bonitinha isso daqui é meio que um modelo que parece um monte de papel em cima da mesa É como se eu pegar seu papel colocar em cima da mesa essa folha branca ela vai fazer sombra embaixo então é interessante você colocar é mas eu vou te dar te dar uma dica preciosa cuidado com as sombras tu não precisa exagerar você não precisa mostrar para o seu usuário que seu visitante a olha só aqui tem uma sombra o cérebro é aquele negócio lá que a gente falou sobre cores que a gente falou sobre sobre Fontes o cérebro vai perceber você não precisa exagerar deixou Então vamos começar colocando o sombras aqui no nosso modem e interessante que é o seguinte as sombras elas funcionam já com as ofenda e geralmente recebe para simplificar um monte de declarações tá aqui a gente já vai direto para short fazer para você poder entender mais fácil funcionamento das sombras e também nós vamos utilizar o débitos e vai nos ajudar muito na criação de sombras Então vamos lá Olha só eu vou aplicar uma sombra diretamente nesse modelo aqui a no nave havendo essa área aqui dois links vou botar uma sombrinha aqui de leve Então vamos lá vou procurar declaração do nada ele tá aqui a antes deixa eu te mostrar um negócio que ficou me incomodando aqui o desenvolvido pelo curso em vídeo eu fiz aqui ó dei E você só para a gente poder resolver isso aqui aqui no futuro eu botei um pé de um de um pixel Cara isso aqui não é um pixel nem aqui nem na China né E quando eu boto 10 pixels ele vem aqui ó e Cola faz quatro chá mas não tem que colocar só como é que o navegador tá se comportando quando eu coloco um pezinho ó assim que eu coloco um pede um pixel da aqui em cima é bem pequenininho o grande problema é o navegador compreendeu quando eu uso pede isso daqui é um parágrafo ele está considerando a margem do parágrafo e mais o pede do footer Deixa eu te mostrar como o seu tá funcionando vou abrir aqui o inspecionar para gente abrir o débitos a gente resolver logo esse negócio do rodapé ficou meio esquisito vou abrir o Bari vou abrir o futuro o futuro aqui ó quando eu volto pedem ó dá uma olhada não sei nem se vai dar para ver é porque é um pixel só ele tá fazendo Ela é bem fininha essa lá caramba que é o resto dessa coisa é isso parágrafo maldito aqui ó ele pegou e considerou uma margem de 16 tá vendo Então nós podemos fazer o seguinte no parágrafo que está dentro do footer eu posso tirar a margem E aí como é que eu faço isso eu vou voltar aqui no meu editor e vou vir aqui ó vou botar no ter a declaração nova que um novo seletor footer e o Filipe ele vai ter margem de zero pixels ó automaticamente ele já colou agora ele tem um pixel aqui e eu posso aumentar sei lá para 4pixels falar agora ficou mais bonitinho Então se você for aqui no no nosso débitos você vai ver que o futuro agora tem um pezinho de quatro ao pé de mim lá agenda o verdinho e o meu parágrafo não tem margem tá vendo era uma rede dizer se estão aqui agora ele tá zerado Então esse tipo de coisa a gente consegue detectar fácil aqui usando o texto vamos vamos voltar aqui então voltando aqui no navio que a gente tinha feito no nave eu vou usar uma sombra é uma sombra de caixa então vou usar Box Sharon no box Shadow eu tenho que informar alguns parâmetros os principais são o Vou botar aqui ó um Pixel Gun Pixel Gun Pixel Black acabar cara que que é isso isso daqui é o deslocamento horizontal deslocamento vertical espalhar A sombra tá essa a Puxa mas como é que eu mandei para isso não precisa você sempre coloca assim um Pixel Gun Pixel Gun Pixel Black faz isso tá sempre que você for trabalhar com sombras depois a gente vai configurar melhor quando você fizer isso ele já criou uma mini sombrinha aqui ó embaixo do link não sei se tá dando para ver mas se você não tá vendo não tem problema vai ver agora porque nós vamos vida que no débito nós vamos selecionar dentro do cabeçalho o nosso navio que é algo que a gente tá configurando tá vendo aqui ó de um prédio eles embora né enfim aqui ó eu tenho box-shadow tá aqui ó a minha propriedade box-shadow você vai entender agora porque você vai clicar nesse primeiro um pixel perto tô aqui no box Shadow cliquei fiquei de novo troquei 3 vezes já para ele selecionar agora você pode rodar rodinha do mouse e ver o resultado Olha isso então esse aqui ó é o nosso deslocamento horizontal julgamento de uma ação negativa A sombra tá chegando para a esquerda isso você vai entender facinho quando você fizer em casa tá positivo chega pra direita então Sobra para a esquerda samba para a direita Então esse aqui é o primeiro deslocamento Vou colocar aqui dois pixels cliquem no a rodinha do mouse é o deslocamento vertical A sombra tá andando para cima e para baixo para cima e para baixo Vou colocar aqui também cerca de 2 pixels muita gente aparece por aqui perguntando sobre os nossos certificados são válidos e até mesmo se esse curso de html CSS e vai ter um certificado a primeira resposta é sim os nossos certificados são 100 porcento válidos em território nacional EA segunda resposta também assim mas não vai ser um certificado só não esse curso vai ter cinco módulos então isso significa que serão cinco certificados Mas é óbvio que a gente só vai conseguir emitir esse certificado a partir do momento em que os módulos estejam completos cada um vai ter aproximadamente quarenta aulas e a gente sempre encerra um módulo com o vídeo fim do módulo Então já fica ligado fica ligada para você poder conseguir os cinco módulos desse curso que tá bem legal outra coisa que você pode fazer esse daqui ó é a terceira medida vai que é o espalhamento da assombração da tá ficando é mais dura mais preparada mais dura mais parada mais eu vou te mostrar agora cara um negócio muito maneiro quer você poder criar a sua própria sombra de chover diga aconteceu é porque ele botou negativo aqui negativa de não aceita Beleza você vai aprender a criar sua própria sombra como que você vai fazer isso você vai vir aqui ó nós vamos voltar lá no editor e apagar o Boxeador só para gente você entender um mas é tão aqui apaguei o Boxeador ele vai tirar sombra certo mas ainda tô com nada e selecionado lá no débito urso tá eu tô com raiva aqui selecionado O que você vai fazer você vai vir aqui nessa área aqui na Você vai clicar nesses. . .

Eu nem clicar pode passar o mouse nesses. . .

Estão aqui embaixo do meu mal passeio Mouse e você tem aqui ó Xbox Shadow olha só a facilidade da nossa vida quando eu clicar é box-shadow ele vai abrir essa telinha E aí o que que você vai fazer você vai pegar esse ponto azulzinho e vai arrastar Olha só isso e você vai mover escolher o ponto da sombra então vou botar aqui um ponto da sombra existe o exemplo de sombra do lado de fora e a sombra do lado de dentro tá vendo a sombra externa como interna também dá para fazer sobre interna a gente tá aqui fazendo o Outlet aqui se você mexer aqui nesse nessa configuração você mexe no. Também tá mas não precisa porque aqui é só você arrastar ele e deixar do jeito que você quiser aqui eu tenho duas medidas ou embaçamento e o espalhamento o embasamento aqui deixa eu fazer o seguinte vou colocar sombra aqui em cima bota sombra bem cima você poder entender esse aqui ó é o Blur e esse aqui ó os prédios não é um alcance maior tá vendo Então você vai colocar aqui ó tá configurar tua sombra a roupa tá sombra aqui mais bonitinho aqui ela tá exagerada porque ela tá pretona pretona mesmo já já a gente vai resolver isso então Botei uma sombra cômoda Você viu eu não precisei programar nada não precisa escrever nada eu simplesmente estou configurando aqui as minhas propriedades e aí ele me gerou o seguinte ó boxe 15 pixels lx773 pixels que é o y7i US at freddy's urso 7pixel Blues prédio é um pixel e a cor Black se você botar em sete né A Sombra do lado de dentro tá grande ele deu um efeito como se fosse afundado dá para fazer também é só você colocar a palavra em sete Antes aqui no nosso short raízes Então porque aqui é o 71 tá lá o boxe é dou todas essas configurações lá pô mas como é que eu vou decorar isso não precisa é só você vir aqui nessa janelinha configurar tá configurado você pega essa linha selecionei contra você vou aqui no meu editor dentro do navio encontrou Beleza então essa dica cara eu não dei uma TV PDF e é assim ela é valiosíssima para você criar box-shadow text-shadow que a gente vai vir depois então tá lá a forma de você criar sombra de maneira bem simples na hora com atualiza a sombra da outra dica que eu te dou essa sombra tá muito forte como você faz muda a cor caramelo é só mudar a cor de sombra Olha como ficar feio não existe vou ter que vermelho Olha que fez isso porque no Bom dia você parar para analisar não existe sombra colorida toda sombra ela é uma coisa preta ela vem do Preto né porque a ausência da luz e elas vem com uma fraqueza nha vá não mas eu tô olhando na Minha estante tem uma sombra marrom não é ela é uma sombra preta só que ela tá bem transparente ela existe uma transparência Porque existe uma parte que é sombra existe uma parte que é luz então existe uma transparência aí nessa cor então normalmente o que a gente faz para fazer uma cor a gente bota black black tá vai ficar Fortuna e o que você faz você passa o mouse em cima de black e vem aqui ó Nessa penúltima Barrinha e arrasta para baixo mais ou menos metade metade para baixo tá nunca metade para cima metade aqui ó na hora que você atualiza existe uma sombra ali Eu ainda acho que ela é bem forte a gente pode dar uma diminuída em algumas configurações aqui mas o que importa é a sombra ela não pode ser uma cor sólida ela tem que ser uma cor meio que transparente para poder dar efetivamente o a beleza e você pode botar sombra em qualquer bloco Se você quiser a vou botar no H1 não é recomendado mas eu vou botar no olhar um aqui só para ir eu nem tenho aqui para configuração da mas enfim eu posso botar aqui todo H1 vai ter uma sombra tá como que eu faço ou Escreva aqui o Boxeador ou eu venho aqui ó atualizo vou no meu 10 toolstack o h um vazio e eu vou adicionar aqui ó pera aí apertar tem que passar o mouse aqui box-shadow aí vocês olha lá ele tá fazendo a sombra lá feia mas tá fazendo bota lá quero uma sombra interna umbler.