Bordas decoradas - @Curso em Vídeo HTML5 e CSS3

já tiramos a mais um vídeo aqui do 16º Capítulo do seu material e agora nós vamos falar sobre bordas decoradas lamento não gosto muito não ela não fala nada [Aplausos] E aí [Aplausos] [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do curso de html CSS como acabei de falar de abertura falei no vídeo anterior eu não gosto muito desse recurso mas vai que seja necessário para você vai que seja útil eu não gosto dele porque eu não gosto eu não vou ensinar eu vou ensinar mas já dizendo que eu não gosto ruim e não usa se recusaram que vai lá falou que não gosta então não vou nem aprender para que você precisa no projeto e depois não sabe utilizar não fala sobre bordas decoradas bordas personalizadas mas antes de mais nada Vamos criar essa borda utilizando o link que a gente já fez aqui o nosso editor gratuito demais e o recado dessa vez é mais uma vez do estudo alta que está patrocinando o nosso curso esse curso por sinal que tá te ensinando um monte de coisa legal para você aprender a criar sites para criar sites não é a única coisa que você pode criar na sua vida digital e o estudo na alta tem um curso especial que já tá com quatro módulos e vai te ajudar na criação de aplicativos para celular utilizando a plataforma Android e a ferramenta Android Studio que é distribuído pelo próprio bom então se além da criação de site você sempre quis aprender a criar aplicativos de celular de uma maneira simples e descomplicada explicada passo a passo e com projetos físicos Considere a possibilidade de você ser um aluno do estudo em alta e por uma assinatura mensal você tem acesso a esses módulos de Android Studio e muitos outros cursos que a gente vem falando aqui durante o andamento desse curso de HTML e CSS inclusive os módulos do curso de html CSS também estão sendo disponibilizados no estudo anal e aí é mais uma maneira mais uma oportunidade de você ter um certificado de uma plataforma diferente fazendo o curso com uma pessoa que você já conhece Obrigado estudonalta pelo Patrocínio e voltamos agora a nossa aula normal Então é só vou abrir o seguinte se você não instalou é porque você tá dando mole é alguma coisa aconteceu que você pulou Resolveu a não ninguém senão a não preciso do gripe não a gente já usou bastante inclusive nas aulas sobre imagem né no capítulo sobre fotos e imagens eu basicamente assim ó um arquivo novo aí você vai colocar aqui a largura EA altura da imagem Mas vamos colocar o seguinte 80 pixels de largura e 80 pixels de altura bem pequenininha mesmo vai pegar aqui em opções avançadas a um colocar uma resolução de 70 a resolução XY de 70 e nós vamos preencher com cor de fundo Vamos mudar para transparência ela tem que ser uma imagem transparente também ficou Ok então necessariamente tem que ser não tá a gente vai usar que o exemplo de transparente se você quiser aplicar uma cor aí também vamos fazer o seguinte vamos dar um zoom aqui hoje vez de 100 porcento vou dar um de 800 por cento para ele ficar bem grandão e aqui eu vou traçar três retas imaginárias Eu Não Vou traçar imaginar eu vou puxar a régua Houve aqui da régua vou puxar eu cliquei arrastei e ele já deixa eu criar aqui meio que um terço né eu vou fazer não vou fazer exato exato não mas você consegue ir para fazer aqui em cima também puxei para fazer um terço o que que eu vou precisar dessas imagens Então vamos lá primeira coisa que eu vou fazer eu vou desenhar bordas circulares que você vai ter que desenhar sua borda aqui ó aqui eu canto superior esquerdo do canto superior direito canto inferior direito inferior de que as bolinhas né para complementar aqui eu vou começar fazer uma bolinha Como que eu faço você vem aqui ó nessa segunda opção e geralmente é um retângulo você clica segura e seleção elíptica ou aperto a letra e deles aqui você vai querer aula nessa área marquei aqui ó adicionar a seleção atual shift desliguei ontem esse regulamento serrilhamento se você quiser desligar aqui também vale a pena e nós vamos fazer uma bota perto você consegue configurar aqui eu quero ele bem circular mesmo agora eu vou pintar vou ver aqui Qual a ferramenta de pintar o baldinho lá xtb também pode ficar aqui no meio e quinta agora que eu vou fazer mover aqui tá no lugar certinho que que eu vou fazer eu vou ver aqui ó duplicar a camada nesse botão aqui duplicator que caiu uma cópia Vou ver aqui com essa setinha e vou arrastar vou fazer isso para todos eles vou duplicar de novo e borracha vou trocar de novo basta tentando deixar o máximo Centralizado possível é basicamente você vai ter que personalizar a sua borda aqui não tá lá que vou duplicar o meio não vai precisar tá o meio Zinho aqui não bota nada não também duplicar e tá feio Beleza então vou fazer aqui é pintar essas aqui de fora de vermelho eu vou colocar aqui vou escolher vermelho só para ficar diferente então você vai vir aqui na borda você vai essa daqui vou pintar de vermelho então baldinho e clica exatamente na bolinha que Você clicou tá no inferior direita cliquei a superior direita e superior esquerdo beleza fiz essa imagem aqui você pode desenhar bota que você quiser basicamente é esse saquinhos vermelhos são os vértices e esses rostinhos vão ser as linhas tá as linhas horizontais e verticais você vai desenhar bota que você quiser pode desenhar um do lado para desenhar tracejado tá assim enfim você desenha a borda que você achar interessante lembrando esse tamanho aqui 80 por 80 ouvir aqui ó em arquivo exportar ele vai sugerir já ou png e eu vou salvar dentro de estudos HTML e CSS exercícios e vou salvar na pasta do exercício 21 eu vou chamar de borda ponto. png Morgan. Feliz não tira o ponto feminina a cortar ele vai sugerir aqui né salvar ele como transparente tudo mais vou exportar assim mesmo ou minimizar o meu Inter e vou abre ou Editora que vamos abrir a pasta de exercícios não existe 21 tá diretamente aqui o borda.

png Tá salvo aqui dentro eu ficar duas vezes é uma imagem pequenininha mas tá lá a minha borda personalizada beleza vamos voltar uma pasta clicar com o botão direito e mandar abrir para o visual Studio code para gente poder criar o nosso código e já abriu o caixa dois eu não vou usar caixa de hoje eu vou usar a caixa 03 amor botão aqui caixa 013. HTML ou criar um código base aqui pt-br borda personalizada eu vou criar um pagar um teste de borda Vamos abrir o arquivo 03 aqui acha 03 navegador lá o teste de bordo vamos agora formatar essa borda aqui do nosso código tão vou criar um estilo aqui um seletor pagar um e vão fazer uma borda eu vou fazer o seguinte vou fazer uma borda de 20 pixels sólidos Black inicialmente vou fazer mais e essa vai ser a borda que eu vou preencher com bolinhas certo vou dar um pezinho aqui para lhe 10 pixels ele dá um espaçamento Tá vendo só para ele ficar separado sinal a bolinha vai ficar muito confuso aqui tão beleza fiz a minha borda aqui com a cor que eu desejo depois a gente pode tirar essa cor Na verdade ele vai tirar essa o que eu vou fazer aqui é o seguinte ó eu vou botar border-image-source E aí eu vou botar aqui ó URL e vou colocar entre aspas simples o nome do arquivo que é borda ponto. png borda ontem png o contra o espaço não funciona aqui infelizmente mas é só digitar certinho você atualiza ele já fez ó ele botou a imagem aqui outra imagem aqui aqui aqui ela acha que isso é o primeiro passo teve que o preto já sumiu agora eu quero é fatiar essa imagem Então vou botar aqui ó border-image-slice fica é fatiar e eu vou colocar um número qualquer aqui eu vou botar 20 Não precisa ser medida somente quando você coloca ele já fez uma bagunça aqui que que você vai fazer agora eu recomendo botão direito aqui na área em e a Deixa eu fazer um outra coisa que rapidinho gente pressionar não colocar um border em mente gripes e vamos colocar Rebite tá alto esse daqui Então beleza vamos organizar a primeira Nossa borda porque ela ficou meio bagunçada né que a gente tem que bater a medida certinha botão direito em inspecionar E aí eu vim aqui diretamente para o nosso o débito vamos no bari no H1 cliquei e agora eu tenho aqui as configurações o que eu vou fazer eu vou aumentar e diminuir o suficiente para ficar arrumadinha Nossa borda para ele ele perde a cor porque ele ele bota a borda amarela vai ficar lá vendo Então assim basicamente você pode aumentar e diminuir a largura da borda aqui também aqui no nosso outra borda mais fina Bora um pouco mais grossa e você consegue configurar aqui ó o fatiamento eles fatiamento depende do tamanho da imagem do tipo de imagem que você consegue até botar aqui juntinho aqui ó e fazer consulta uma linha no meio então assim vai do seu gosto e vai da sua necessidade no projeto tem particularmente eu não gosto muito volto a dizer conta e conseguiu fazer uma borda personalizada aqui eu já sei que é 27 não que funcionou foi 27 só atualizar não vai funcionar porque o que funciona é o 27 então eu volto aqui bota o 27 E você tá gostando desse curso tá achando que ele é útil para você e também para uma comunidade inteira então não pensa duas vezes antes de compartilhar esse curso com as pessoas se você participa de qualquer comunidade qualquer grupo no Facebook e você tem aquele grupo Pão de estudo do seu colégio ou faculdade no WhatsApp ou no telegram Não esquece de divulgar os nossos links você ajuda muito divulgando o link da playlist completa e como esse curso vai ter cinco módulos vão ser cinco playlists eu te agradeço bastante se você ajudar Compartilhar esse o compartilhamento foi pelo Instagram não esquece de marcar a gente né gente sociais existem alguns métodos para criar essa borda isso aqui do meio eu posso usar o Stitch ou eu posso usar o estresse O que é o strass o Sport vai pegar essa linha aqui e vai puxando Ó grande dá uma esticada mais uma eu gosto muito mas enfim existe essa possibilidade também o repetiu outro Tranquilo então você consegue configurar espessuras aqui eu vou botar sei lá quem exigir 12 nem mesmo quanto é que tava lá então assim ele não fica perfeito Depende muito do tamanho tá vendo ó é dependendo do tamanho da sua borda ele vai ficar meio cortada enfim não é um método que eu curto muito para poder fazer bordas mas vai que em algum determinado projeto você precisa dessa dica Então tá lá eu nem coloquei numa cliente.