🇺🇸 Social media icons with 3D effect for use on websites.
🇧🇷 Ícones de redes sociais com efeito 3D para utilização em sites.
- HTML
- CSS
- Font Awesome (for icons use / para utilização de ícones)
- US Brand Colors (for colors search / para pesquisa de cores)
🇺🇸 I was inspired by @smthari 's frontend project called "3d-social-media-icons" to learn how to make 3D effects using pure CSS. I went beyond the original project adding more icons from other social networks (with their respective access links) that were not present before. My intention in this project is, over time, to add in an organized way more and more icons with links to social media in a more interesting and fun way to use in different types of websites.
🇧🇷 Inspirei-me no projeto frontend de @smthari chamado "3d-social-media-icons" para aprender como realizar efeitos 3D utilizando CSS puro. Fui além adicionado mais ícones de outras redes sociais (com seus respectivos links de acesso) que não estavam presentes no projeto original. Minha inteção neste projeto é, com o tempo, adicionar de forma organizada cada vez mais ícones com links para mídias sociais de maneira mais interessante e divertida para utilização em diferentes tipos de sites.
🇺🇸 The first challenge was to understand how the CSS properties were used to create the 3D effect on the icons. After that, I could see that the way the colors were distributed accentuated the 3D effect. Replicating in other icons of different colors ensuring that their distribution did not harm the 3D effect was the biggest challenge.
🇧🇷 O primeiro desafio foi entender como eram utilizadas as propriedades do CSS para realizar o efeito 3D nos ícones. Após isso, pude notar que a maneira como as cores estavam distribuídas acentuavam o efeito. Replicar em outros ícones de cores diferentes garantindo que a distribuição delas não prejudicasse o efeito 3D foi o maior desafio.