Web, .NET, Apps

Posts Tagged "efeitos gradiente"

Gradiente Radial somente com CSS3

Gradiente Radial somente com CSS3

By on mar 20, 2014 in CSS3, Tableless | 10.100 comments

Aqui veremos como realizar efeitos de gradiente radial (efeitos de luzes circulares) utilizando apenas HTML e CSS3. Não será usada nenhuma linha de programação javascript/jquery para realizar os efeitos. Protótipo: Código Fonte: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Radio Gradient</title> <style> div { float:left; width:32%; height:125px; margin:4px; color:#FFF; font-size:30px; background:#CCC; border-radius:100px; } div.gradient1 { background: radial-gradient(magenta, black); } div.gradient1:hover { background: radial-gradient(gray, white); } div.gradient2 { background: radial-gradient(magenta, turquoise, yellow, black); } div.gradient3 { background: radial-gradient(circle, black, red, orange, magenta, turquoise, yellow, black, blue, green, violet, gray); } div.gradient4 { background: -moz-radial-gradient(bottom left, circle, turquoise, magenta); } div.gradient5 { background: radial-gradient(50px 30px, turquoise, magenta); } </style> </head> <body> <div class=”gradient1″>1</div> <div class=”gradient2″>2</div> <div class=”gradient3″>3</div> <div class=”gradient4″>4</div> <div class=”gradient5″>5</div> <div class=”gradient6″>6</div> <div class=”gradient7″>7</div> <div class=”gradient8″>8</div> <div class=”gradient9″>9</div> </body> </html> Explicação dos pontos...

Read More