The latest articles on DEV Community by Renato Alexandre (@rrenatodevs). https://dev.to/rrenatodevs https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4120024%2Faa3c347b-af2a-4f23-9431-ab9daee6b04c.jpg https://dev.to/rrenatodevs en Renato Alexandre Wed, 30 Sep 2026 23:30:31 +0000 https://dev.to/rrenatodevs/como-fiz-um-parallax-que-funciona-no-celular-usando-so-css-44jp https://dev.to/rrenatodevs/como-fiz-um-parallax-que-funciona-no-celular-usando-so-css-44jp <p>Terminei o meu Projeto Cordel! 📜<br> É uma página com o poema "Cordel Moderno", de Milton Duarte, feita só com HTML5 e CSS3, a partir do desafio proposto pelo professor Gustavo Guanabara, do CursoemVídeo.<br> O que eu pratiquei:<br> ✅ Efeito parallax nas imagens de fundo<br> ✅ Layout responsivo (celular, tablet e computador)<br> ✅ Tipografia com Google Fonts e clamp()<br> ✅ Caixas translúcidas com rgba para a leitura ficar confortável sobre as fotos<br> O maior aprendizado veio de um problema: o parallax com background-attachment: fixed funcionou no computador, mas não é confiável em celulares. Estudei e testei outra técnica, com pseudo-elemento fixo + clip-path, e ela passou a funcionar no meu Android.<br> Sou estudante de Análise e Desenvolvimento de Sistemas e estou construindo meu portfólio passo a passo. Feedbacks são muito bem-vindos! 🙌<br> 🔗 Site: <a href="https://rrenatodevs.github.io/Projeto-Cordel/" rel="noopener noreferrer">https://rrenatodevs.github.io/Projeto-Cordel/</a><br> 💻 Código: <a href="https://github.com/rrenatodevs/Projeto-Cordel" rel="noopener noreferrer">https://github.com/rrenatodevs/Projeto-Cordel</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu7veon7zndmkbawrbq42.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fu7veon7zndmkbawrbq42.png" alt=" " width="800" height="130"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs50uirjbwv6wiu9hnusc.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fs50uirjbwv6wiu9hnusc.png" alt=" " width="799" height="360"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fw6htl5pe5snekmm2vssq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fw6htl5pe5snekmm2vssq.png" alt=" " width="800" height="359"></a></p> <h1> HTML #CSS #FrontEnd #DesenvolvimentoWeb #Portfólio #CursoemVídeo </h1> css html webdev