Criando os botões para redes sociais - @Curso em Vídeo HTML5 e CSS3

[@MatheusPrandato]

Adicionem o seguinte código no CSS para dar um efeito de clique (os botões "afundam") quando clicarem nos botões: section#redes-sociais img:active { transform: scale(95%); }

[@faniopangapanga8175]

Muito legal mano, tava me perguntando mesmo como fazer isso.

[@aninha22ist61]

Adorei, obrigada!

[@flavianafernandes8069]

Adorei, obrigada😊

[@andreplacet]

a mais de três anos, esse é o canal que eu mais indico pra quem ta iniciando na carreira e busca uma boa opção de conteudo acessivel e de qualidade, curso em video é o melhor

[@matheusdiedrichs]

real

[@renatoorosco]

09:25 - Ao invés de usar box-sizing: border-box para os botoes não se moverem, consegui resolver usando outline ao invés de border. Outline não influencia no tamanho total do elemento.

[@ChristyanBrayan]

é uma boa tbm, apesar q essa config de box-sizing é bom p outros momentos tbm onde algumas declarações css podem fazer um elemento "crescer" e acabar quebrando um pouco o design da página, não só nesse caso de border no :hover

[@lucasecs92]

No lugar dos utilizei display: block; section#redes-sociais img { display: block; width: 50px; margin: 15px; border-radius: 50%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.479); box-sizing: border-box; } E para trocar o lado no lugar de text-align: right também pode usar o float: right;

[@layanalobo6772]

Valeu, uma nova forma também de fazer. É bom saber, por que muitas vezes, a gente que não tem tantas experiências, ficamos horas tentando posicionar de uma determinada forma e não conseguimos.

[@vitorac412]

Valeuuu!

[@flavianafernandes8069]

Valeu pela dica, testei no meu e gostei, deu super certo 😊

[@albertomm9024]

Eu com 50 linhas de css: Feio pra krlh Guanabara com meia linha : Perfeição

[@risadinha2148]

o que 30 anos de exp não faz kkkk

[@jonescarlos9997]

Quem não quiser da forma "preguiçosa" é só fazer um : section#redes-socias{ display: flex; flex-direction: column; } Assim fica em coluna.

[@danielfloriano7]

vlwww, eu tinha colocado display: block no "section#redes-sociais img", mas so ficava do lado esquerdo 😅

[@jonescarlos9997]

@@danielfloriano7 é nós 🖖🏼

[@danielfloriano7]

@@jonescarlos9997 ah, vi depois que a parte de link (tag a), ficou gigante(msm escondido mas da pra clicar) mas so aparece a img normal, tipo isso. ai usei o "section#redes-sociais { display: flex; flex-direction: column; position: absolute; right: 0; }"

[@jonescarlos9997]

@@danielfloriano7 é bom ir fazendo vários "experimentos".

[@danielfloriano7]

@@jonescarlos9997 errhh vdd kkkk

[@fabioverlaine7274]

A MELHOR AREA DA ATUALIDADE !!! SER DEV!!!! O FUTURO CHEGOU... SUCESSO AOS FANÁTICOS POR TECNOLOGIA. SHOW.

[@fabiobrr]

Nova forma de fazer a transição ao passar o mouse em cima dos botões, é: #redes-sociais img:hover{ transition-duration: 0.2s; }

[@periclesperesoficial]

Valeu!!!

[@_Victor-Lourenco]

Caso adicionemos uma borda que circunda as imagens dos ícones do menu, mas que só é exibida e acionada por hover, ocorre que, quando a borda surge, os outros botões vizinhos se mexem... visto que a borda não faz parte do objeto... Eles se deslocam justamente por causa do surgimento da borda, que expande a respectiva caixa e empurra os outros ícones. *_PROPRIEDADE BOX-SIZING:_* Essa movimentação dos ícones vizinhos, esse deslocamento, não é legal porque atrapalha a experiência da maioria dos usuários e deixa o efeito da nossa animação muito brusca. Para evitar esse deslocamento dos itens vizinhos ocasionado pelo surgimento da borda, dentro do *seletor da imagem do ícone* _(objeto de recebe a borda)_ temos que utilizar a Propriedade de Estilo " *box-sizing* " com o valor " *border-box* ". Isso fará com que a borda faça parte do objeto, faça parte da caixa da imagem... Fazendo com que os itens vizinhos não se desloquem com o aparecimento da mesma. A propriedade box-sizing modifica a *maneira de exibir* o tamanho de uma caixa, por padrão o *tamanho absoluto* de uma caixa é calculado pelo *'tamanho definido' (width e height) + valor do 'padding' + valor da 'borda'.* Isso muitas vezes pode gerar certa confusão na hora de alinharmos algumas caixas no nosso layout, porque temos sempre que considerar que a determinada caixa não terá como dimensão somente o width ou o height definido, mas também o padding e a borda... Fazendo uma soma de tudo isso... Por isso a propriedade box-sizing é tão útil, pois permite que você escolha como as suas caixas serão medidas dentro do documento. Dessa forma não precisamos perder tempo fazendo cálculos para determinar o *tamanho final* dos boxes dos nossos elementos quando declaramos as propriedades padding e border. Essa propriedade aceita os seguintes valores: *content-box* - Esse é o valor padrão, gera o comportamento padrão descrito anteriormente. As propriedades de largura (width) e altura (height) são medidas incluindo só o conteúdo, mas não o padding e o border. (forma de medida absoluta = width/height + padding + border) *border-box* - O cálculo padrão que conhecemos para a medida da caixa é *alterado,* fazendo com que o navegador passe a considerar as propriedades de largura (width) e altura (height) do elemento *INCLUINDO* o 'padding' e o 'border'. (forma de medida absoluta = width/height) *padding-box* - O cálculo padrão que conhecemos para a medida da caixa é *alterado,* fazendo com que o navegador passe a considerar as propriedades de largura (width) e altura (height) do elemento *INCLUINDO* o 'padding' mas não incluindo o 'border'. (forma de medida absoluta = width/height + border) Use a declaração *box-sizing: border-box* em todos os seus projetos. Ela tornará seu trabalho mais produtivo. Permitindo usar um Box Model (Modelo de Caixas) "corrigido". Inclusive você pode inserir essa declaração no _SELETOR GLOBAL_ do seu projeto, dessa forma todas as caixas da sua página terão como medida absoluta somente o width e height (padding e border inclusos). *Obs.:* Mas esteja ciente de que ao definir o Box Model Corrigido em um *projeto existente* é quase certo que o layout quebrará a menos que você se disponha a encarar o trabalhão de recalcular as dimensões dos boxes do site No do menu desse projeto, uma outra maneira de evitar esse deslocamento dos itens vizinhos, sem utilizar o "box-sizing", seria criando a borda da imagem com um outline ao invés de border. Outline não influencia no tamanho total do elemento e portanto não iria empurrar os outros itens. Entretanto a configuração box-sizing é boa para outros momentos também, onde algumas declarações CSS podem fazer um elemento "crescer" e acabar quebrando um pouco o design da página.

[@christianfrancisco6414]

tou com problema no 4:18 os icones ficam grandes e não sobe como o dele

[@Gostosolucas]

acredito que não sou o único empolgado aqui né? kkkk eu fiz uma animação belíssima! pega o code: section#redes-sociais img{ width: 50px; margin: 10px; border-radius: 50%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.400); transition-duration: .5s; opacity: 80%; } section#redes-sociais img:hover { opacity: 100%; border: 2px solid white; transform: scale(1.1) translate(-3px, -3px); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.600); } explicação: quando o usuário passar o mouse sobre a img, vai aumentar o tamanho, a opacidade, a sombra e dar uma borda de 2px branca a imagem.

[@matheusdiedrichs]

Muito bom mano papo 10, só adicionar um: transition-timing-function: 0.3s ease-in-out; que fica mais fluido 👍👍

[@juliovitor7974]

Eai Guanabara cara assisto você desde que entrei na faculdade la em 2020 desde o curso de algoritmos, o de php e agora esse, o curso em video e um dos promissores para o futuro da minha carreira só sucesso para você. Ainda vou ser membro do canal so deixa minha situação melhorar um pouco kkkj

[@negoloso6066]

Eu usei esse projeto para botar no meu portfolio na parte SOBRE. e botei os ícones na tela do celular as pessoas conseguem mexer literalmente no celular

[@cavaleiro_olimpio3864]

Ao invés de usar o border para fazer uma borda branca nos botões , recomendo usar um box-shadow: section#redes-sociais img:hover{ box-shadow: 0px 0px 15px white; transform: translate(-3px, -3px); transition: 0.5s; }

[@pauloadriano6020]

Obrigado professor.

[@diogooliveiradelima6206]

Ao inves de usar br para separar os icones verticalmente acabei transformando as img para display: block, assim elas ficaram uma em baixo da outra.

[@na_panfletos_e_cartoes]

Lasquei um amarelo nas sombras dos botões com o hover que até doeu o olho kkk adorei kkkk

[@glaskario4836]

Valeu, professor 🥰

Eu que agradeço

[@Umgolbege]

@ poe logo o modulo 05 heimmmmmmmmmmmmmmm

[@Kenpachiw]

Caso prefiram alinhar os links com flex que eu recomendo: #redes-sociais { position: fixed; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; margin-right: 20px; }

[@dcassis]

Suas aulas são as melhores, obrigado!

[@MoacirNetoskt]

sou grato eternamente por esse cara

[@zonagamecube2259]

Ficou chique o negócio.

[@Familyhayzn]

top, mais uma ótima aula

[@Hocamy-xx5oo]

Aulas muito facies de aprender, logo estou indo pra javascript :3

[@antoniotrindade2117]

Muito Bom suas Aulas

[@gabrielgomesmabiala6707]

Aula ta muito boa foça Guanabarra!

[@encooorny1287]

Muito bom.

[@andretakayama2088]

baita aula, prof Guanabara

[@shymelx99]

quem quiser colocar do lado direito usando flexbox, é só colocar display flex no > redes-sociais img e position aboslute, right 0%; e margin top 13% no redes-sociais.

[@christianfrancisco6414]

eu tou no 4:30 toda vez q eu adiciono as logo acontece que eles não aparecem na imagem ao lado e nem ficam pequenos quando eu boto pra ficar no css, alguma ideia?

[@antoniogoncalvescampos7024]

Muito bom!!!

[@marcelolsena3993]

Ótima aula professor

[@alvinho1344]

ao invés de usar a propriedade br para fazer com que os li fiquem um abaixo do outro,podemos usar o display:flex; e dentro do container pai colocar um width:100%;para fazer com que os itens fiquem em colunas podemos usar o flex-direction:column; ,para que a largura do container pai ocupe 100% da largura do main,para alinha para direita podemos utiliza o justify-content:end;

[@flokinelson]

calma meu mano, ele tinha falado na hora da inserção dessa sintaxe que o curso não chegou na parte de alinhamento com flex e grid

[@Universidadedodigital.oficial7]

ótimo video, parabéns!

[@justinosamtopelox1743]

gostei muito!

[@ianfelipe3552]

Bom demais, véi!👏👏

[@komai-2706]

SIMBOOOOOOOOOOOORA PORRRRRRRRRRRA! Perdoem o palavreado, é o entusiasmo...

[@chsc4134]

Gostei.

[@PatsFerrer]

Orgulhosa de mim que consegui fazer com display:flex ao invés da 'forma preguiçosa' uhaushauhs

[@matheussouza01ful]

#ObrigadoGuanabara

[@felippeomarques3371]

Eu optei em fazer a section redes-sociais com flex-box. Ao meu ver, fica bem mais simples e com menos comando : section#redes-sociais { display: flex; /*modo flex*/ flex-direction: column; /*direção no modo coluna (vertical)*/ height: 90vh; /*tamanho da section*/ justify-content:space-around; /*um leve espaçamento entre os elementos img*/ } section#redes-sociais img{ width: 100px; border-radius: 50%; opacity: .5; /*a imagem ficará opaca em 50%*/ } section#redes-sociais img:hover{ opacity: 1; /*a imagem terá opacidade de 100%. Criando um efeito de foco*/ box-shadow: 0px 0px 10px white; /*uma sombra branca ao ativar o hover*/ transition: all linear .5s;/*transição de 5s para criar um efeito de brilho, como se estivesse acendendo a imagem*/ }

[@Felipe.20]

Fala Felippe, eu tenho uma duvida. Se eu quiser colocar essa coluna na direita usando display flex, como eu faço ?

[@sandwicheems]

7:13 e eu quebrando a cuca e não conseguia kkkk

[@jr_oliveira.nutricionista]

Pega o guanabara e vemm, pega o guanabara e veeeem

[@technologyfacts.]

Eu comecei o projeto sozinho, fiquei um tempão pesquisando e fazendo as imagens ficarem redondas pelo Gimp. Mudei todas para png; agora não sei se deixo assim ou mudo tudo de novo para utilizar o Css. Vivendo e aprendendo kkk

[@risadinha2148]

o que me deixa mais confuso é que ele muda as imagens no curso de javascript e não faz nem recomenda usar as css pra fazer isso kkkk

[@ianfelipe3552]

🤩🤩🤩

[@wallitoncustodio5704]

estou amando o curso pena que não tenho como entrar na área mas sempre vou praticar como hobbie

[@Umgolbege]

ue porque?

[@BI-MUNDIAL]

Para quem não tá conseguindo colocar as animações nos botões coloque: img:hover { Border: 2px; Transform: translate(-3px, -3px); Box-shadow: 5px 5px 10px rgb (0, 0, 0, 0.4); Transsition: transform .3s, border 1s; No meu funcionou assim. com o section#redes-sociais não tava funcionando.

[@miqueiastomaz2953]

Tô agoniado, pq tá criando barra de rolagem em telas pequenas. 😡 Não tô conseguindo resolver

[@MairaAraujoTech]

Eu sempre coloco rgb(0, 0, 0, 0.5) pra fazer sombra. Atende na maioria dos casos.

[@sandwicheems]

4:16 nem o Zuckzuck

[@Umgolbege]

percebi que não lembro de nada quando ele faz isso vou ver oque faço pra lembrar bem desses codigos !

[@Umgolbege]

Hoje 2 meses depois estou na Devmedia escrevendo tudo de olho fechado haha

[@viniciusmorescontini9123]

Gustavo tenho uma duvida a respeito do evento sobre os botoes, eu fiz uma aq para mudar de tamanho so que ele surgiu esse mesmo problema ai com as bordas e vc resolveu com o box-sizing: border-box mas a respeito do manho nao funcionou vc teria alguma dica para mim?

[@maricolauto]

alguém pode me ajuda? não estou conseguindo a configuração dos icones , quando clico ele abre barra de rolagem dentro do telefone.

[@shiedaotossaka4171]

cara quando eu vi no começo pensei tipo ''caralho isso vai ser mo dificil'', ai corta pros codigos basico que usou no inicio das aulas, quebrei a cara

[@zonagamecube2259]

O foda é que você faz o programa certinho, com os botões tudo bonitinho, e aí quando vai botar o link pro youtube, o html não permite.

[@robertsmith1762]

Eu pelejei pra fazer os ícones ficarem embaixo um do outro e o cara me vem com um , simples assim 🤡🐴

[@devgildair]

so comigo que o (transform: translate) não funcionou?

[@paulovinicius2680]

Comigo tbm não funcionou

[@rafudo]

Eu testei acessar o projeto pelo meu celular e a visualização ficou zoada, alguém consegue me ajudar???? Os botõeszinhos foram empurrados e estão invadindo o celular... e o celular está aparecendo cortado no topo...

[@tatianekeikokunamitsumiko9213]

amei fazer esse projeto! Podia ser responsivo, né? eu tentei mas não consegui deixar ele ajustável na tela do celular ;c

[@mariadapenha4076]

não seria melhor usar ??

[@risadinha2148]

no html5?

[@B.alexandre]

Não estou conseguindo diminuir os botões

[@nobodys3928]

Não consigo esconder o scroll do

[@CheloPpK]

O QR code da recode está dando erro 404

[@petcaixas]

Gustavo, como eu faço pra um botão aparecer depois de 5 minutos de vídeo, quero fazer isso na minha landing page, porque o Pit do meu vídeo só acontece depois de 5 minutos... as pessoas estão olhando o preço do produto antes de verem o valor do mesmo no vídeo... Queria "ocultar" o botão durante os 5 primeiros minutos de vídeo... me ajuda por favor?

[@codin2148]

Acho q só da pra fazer isso com javascript

[@andressmendess]

opa, pesquisa sobre eventos setInterval e setTimeOut em Javascript talvez vc consiga fazer isso utilizando esses eventos

[@robloker]

Por algum motivo meus botões ficam do lado do celular ;-;

[@jhonnsantos4359]

só não entendo o porquê do conteúdo sair primeiro no KZbin do que no próprio site do Curso em Vídeo >:(

[@felipejklx]

Qual a diferença?

[@jonescarlos9997]

Aqui também está assim faz tempo.

[@risadinha2148]

é pq colocar o vídeo no youtube é muito facil, é só fazer o upload no canal e prono, mais no site do curso em vídeo não foi ele fez o site, e é mó transtorno até chegar no servidor