Caixas com vértices arredondados - @Curso em Vídeo HTML5 e CSS3

e continuando nossos estudos sobre o Capítulo 16 do nosso material nós vamos começar agora falar sobre vértices arredondados e [Música] E aí o Olá tudo bem com você seja muito bem vindo muito bem-vinda a mais um vídeo aqui no seu curso de HTML e CSS e a gente vai começar a falar agora que sobre vértice arredondado a gente já falou sobre toda a teoria de modelo de caixas a gente falou sobre anatomia das Caixas a gente já começou a configurar caixas com o seu pedem com seu margem com sombras no último vídeo que agora a

gente vai dar mais uma refinada arredondando alguns vértices para dar um efeito mais bonitinho aí nas nossas páginas Então vamos diretamente para o exercício que a gente vem criando já algumas aulas e eu vou te mostrar sobre que eu tô falando o recado de hoje dessa aula aqui é da hostnet que é uma das patrocinadoras do nosso curso e o que eu vim trazer hoje aqui não é um serviço pago da Rosinete é algo que a empresa está oferecendo gratuitamente para você não sei se você sabe mas aqui no canal do consegui vídeo existem playlists

específicas que são 100 porcento patrocinadas pela empresa ela tá trazendo para vocês cursos com amor princípios básicos de marketing digital o site com WordPress otimização de sites WordPress para deixares mais rápidos mais infecções criação de loja online e automação de marketing utilizando o balde tudo isso sem por cento gratuito e utilizando ferramentas gratuitas que você não vai precisar ser um assinante da Rosinete para fazer esses cursos tudo ensinado para qualquer tipo de pessoa e é claro que quando você fosse profissionalizar Você vai precisar de um local para hospedar o seu site utilizando WordPress utilizando o

começo utilizando malte e a partir daí opção mais sábia você já sabe outlet um grande abraço aqui pela Rosinete Obrigada pelo Patrocínio constante e agora vamos dar continuidade à nossa aulas Então olha só já estou aqui no mesmo exercício da aula passada para essa eu dei uma mexidinha nessa sombra para ficar mais agradável eu fiz umas configurações aqui ó você pode olhar nessa linha as configurações que eu fiz fechei a sombra mais transparente deixei ela mais perto do objeto com - espalhamento Enfim acho que ficou melhorzinho assim outra coisa que a gente pode fazer ó

o box aqui debaixo aqui no box Man essa parte branca aqui é o meu box Man Então vamos configurar aqui no meio no que eu tenho configurações do MEC beleza aqui no meio eu posso criar o seguinte existe uma coisa chamada border-radius a configuração é ação raio da borda se eu botar o raio da borda de Aço da borda não é isso é raio raio mesmo né E arredondamento só botar 20 pixels vai ficar exagerar dão Mas você vai conseguir Enxergar como funciona a vela que o meu bem agora está com um arredondamento E aí

olha só deixa eu te mostrar as configurações extras que existem aqui no navegador botão direito vamos inspecionar e vamos abrir a nossa tag Man aqui é o Bari né Beleza foi essa que eu usei para arredondar aqui o border-radius você consegue aumentar diminuir a raio tá verdade diminuir aumentei você não pode botar valores negativos e botar valores negativos ele risca tá vendo negativo não aceito não posso botar pouquinho vocês tem que ser só eu posso vir aqui e aumentar muito eu consigo fazer até uma base uma bola nessa se a minha de Infor se eu

consigo fazer inclusive uma bola aqui com essa configuração aqui então eu te dar uma diminuída aqui ó consegue fazer o arredondamento de bordas e interessante que é o seguinte eu vou deixar bem arredondar Dinho aqui se você quiser você pode clicar aqui fora ver as configurações individuais aqui ó top left top right Bottom right e bora lá em cima na esquerda que essa daqui depois vem direita em cima dessa daqui depois direita embaixo e depois esquerda embaixo nessa ordem tá vendo a gente consegue pensar até que existe né como certamente existe um simplificador um short

mas você pode vir aqui ó por exemplo botar no lado o valor menor né você consegue configurar aqui diretamente no nosso código ele pode vir aqui no código e colocar quatro medidas diferentes 10 pixels 20 pixels 30 pixels e 40 fixos olha como é que vai ficar ele vai fazer essa é dez Essa é 20 Essa é trinta e S40 tá vendo Então eu consigo criar configurações que o nosso the Tools e vou fazer aqui ó você consegue configurar agora cada uma delas a primeira que eu tô fazendo aqui há poder formando ela individualmente a

segunda também de forma individualmente consigo botar aqui no esse que eu quiser aqui também ó a terceira e também consigo a quarta né você consegue configurar cada uma das quatro portas para ficar do jeito que você quiser três coisas que todo produtor de conteúdo sempre pede e comigo não vai ser diferente se você está gostando desse curso ou de qualquer outro curso ou um vídeo do canal do curso em vídeo não se esquece sempre de deixar o seu like deixa também um comentário de incentivo ou até mesmo comentário de dúvida Isso facilita muito o algoritmo

do YouTube saber que você tá gostando e te oferecer mais e mais conteúdos nossos e não se esquece também de se inscrever no canal e agora até o sistema de inscrição mudou um pouquinho na hora que você abrir o Sininho você tem que dizer que quer receber todas as notificações ajuda aí o canal do curso em vídeo A continuar relevante pra galera de tecnologia e a gente e produzindo vídeos de qualidade importante dizer o seguinte existe também a configuração que é a configuração dupla pode colocar dois parâmetros no border regions so botar só 10 20

vou botar 1040 tá para ficar bem bem diferente você poder entender 1040 é o seguinte lembra da margem que eu posso botar dois ele faz cima baixo esquerda direita é a mesma coisa eu boto Duas Medidas só ele já trava essa e essa iguais superior esquerdo inferior direita iguais superior direita e inferior esquerda e guache também não posso vir aqui no débitos e modificar os dois ó eu consigo quando eu mexo aqui eu mexo nas duas só naquelas duas ali acima da esquerda debaixo da direita quando eu mexo na segunda medida eu mexo na de

cima da direita ainda debaixo da esquerda você consegue fazer bordas do tipo assim eu gosto dessas bordas assim ó 20 0 20 0 de ficar uma bola assim ou 100 né Para que está correto e o Outro fator tinha Talvez seja uma possibilidade e o mais interessante é o seguinte elas se você quiser você pode acrescentar uma sombra também eu vou vir aqui eu vou acrescentar samba daquele jeito que a gente aprendeu da outra vez que vem aqui ó puxa ele já vai adicionando aí se você perceber a sombra fica arredondado igualzinho falar uma redondada

vou fazer aqui uma sombra com o espalhamento embasamento e pagamento eu não vou espalhar nenhuma vão embaçar aqui um pouquinho e vou também não posso fazer lá dentro ou fora você escolhe vou deixar do lado de fora vou pegar essas duas configurações aqui nada border-radius box-shadow e vou colocar aqui no meu código não visual Studio code apagar esse poder rádios para ficar aquele border regions organizar que a indentação E tá lá eu não vou deixar Black vou dar uma diminuída aqui aí eu tenho uma sombra é bem diz que é só vou levar não dá

para ver direito você não precisa exagerar nas sombras elas existem elas dão aquela sensação do cérebro de a Olha que legal parece um papelzinho em cima da mesa você não precisa exagerar então eu configurei aqui ó achei 20 muita coisa 2001 muita coisa vou colocar 10 é dez é tipo ela ama o rio fazer uma borda discretamente configurada tá vendo aqui ó arredondar Dinho aqui arredondado vim aqui quadradinho aqui quadradinho aqui e ficou discreto galera olha só o design ele prima pela descrição você não precisa Ah não vou arredondar Então vou arredondar com vontade mas

não precisa disso uma coisa que eu não fiz eu cheguei a falar e não fiz vou fazer o seguinte aqui ó embaixo do footer eu vou criar uma div pa uma div normal com o ID bola tá não tem uma div com e de bola vou fazer uma bola aqui no final do CSS aqui no final dos estilos vou colocar dividir com Líder bola vou fazer a seguinte ó altura é de 100 pixels a largura é sem fixos e o background-color Vai ser branco fica um quadradinho branco aqui vou botar uma margem tá vendo ele

ficou colado no box de cima para resolver a gente faz uma margem dando como a gente quando entende Anatomia da parada fica muito mais fácil a gente 10 pixels agora ele deu uma afastada eu vou transformar essa aqui uma bola sempre olha isso pode crê em Deus 25 pixels em si e eu vou botar o seguinte só dá para fazer assim cinquenta por cento ó tem como a bola certinho até muitos exercícios aí de CSS que a galera faz isso né você consegue utilizar um border radius de cinquenta por cento só que ele fique redondinho

então você pode utilizar isso aí em outros recursos é só lembrar que você também pode usar porcentagem isso também não falei eu escrevi no material em PDF mas tá aí registrado no vídeo pra você que eu lembrei durante a gravação dessa aula a verdade eu vou tirar isso daqui depois não vai fazer parte do nosso exercício mas tá lá exemplificado como funciona Fechou então é isso aprendemos como criar bordas decoradas utilizar sombras e no próximo vídeo eu vou adicionar uma configuração que eu não botei no pdf também particularmente eu não gosto mas pode ser que

em determinado projeto coisa. Alto isso seja útil para você quer utilizar bordas de imagens eu não botei no pdf porque eu não gosto mas eu vou gravar um vídeo especialmente para isso só para você ter registrado aí já prepara o seu caderno para anotar o que provavelmente você não vai usar e mais vai que no projeto você precisa e talvez seja hoje para você fechou e daí a gente se vê no próximo vídeo Um grande abraço não esquece de se praticar e a gente se vê na próxima a