Dica do Dia: CSS Gradient Generator
Autor: Micox - Náiron J. C. G. | Publicado: 2012-01-05T07:20:00-03:00

Bom dia nobres senhores e senhoras.

Hoje, venho ao presente blog, repassar um site muito interessante e prático que estava em meus Bookmarks e eu não lembrava até precisar.

Se bem que minha memória nunca lembra de nada mesmo. Aliás, meus recentes problemas de memória (não tão recentes) estavam me deixando preocupado. Eu já havia ido até em neurologista, o qual me pediu um exame de ressonância magnética, do qual eu pulei fora (espero que este meu português cheio de "o qual" e "do qual" esteja correto, afinal estudei orações subordinadas ontem haha).

(Voltando ao assunto secundário do post: ) Porém minhas preocupações passaram quando vi que todos meus amigos que "mexem" com computador o dia inteiro também estavam assim e também após ler uma reportagem na Revista Época dizendo que a internet está sacaneando nossos cérebros. Concordei e fiquei aliviado por, de certa forma, eu ainda ser "normal". Aliás, maldita Ed. Globo que fica renovando as assinaturas sem solicitação.

Qual era o assunto inicial do post mesmo? Ah, CSS Gradient Generator. Desculpem a divagação anterior mas pelo menos serviu pra deixar o post com mais de 1 parágrafo haha.

Agora, pra não tomar muito do seu tempo, serei rápido e deixarei que tire suas próprias conclusões: O Gradiente dos botões deste site foi feito em 30 segundos (e sem imagens de certa forma) graças a este site.

Pra você não precisar abrir link externo, deixo aqui o exemplo:


#xparceria {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkNTAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iNDIlIiBzdG9wLWNvbG9yPSIjYWQ1MDAwIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNhZDUwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWQ1MDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(173,80,0,0.3) 0%, rgba(173,80,0,0.7) 42%, rgba(173,80,0,1) 45%, rgba(173,80,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,80,0,0.3)), color-stop(42%,rgba(173,80,0,0.7)), color-stop(45%,rgba(173,80,0,1)), color-stop(100%,rgba(173,80,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(173,80,0,0.3) 0%,rgba(173,80,0,0.7) 42%,rgba(173,80,0,1) 45%,rgba(173,80,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(173,80,0,0.3) 0%,rgba(173,80,0,0.7) 42%,rgba(173,80,0,1) 45%,rgba(173,80,0,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(173,80,0,0.3) 0%,rgba(173,80,0,0.7) 42%,rgba(173,80,0,1) 45%,rgba(173,80,0,0.8) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(173,80,0,0.3) 0%,rgba(173,80,0,0.7) 42%,rgba(173,80,0,1) 45%,rgba(173,80,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dad5000', endColorstr='#ccad5000',GradientType=0 ); /* IE6-8 */
}


Sou uma div com
gradiente CSS


Pode me agradecer ou xingar nos comentários.