Web, .NET, Apps

Posts Tagged "gradiente linear"

Gradiente Linear somente com CSS3

Gradiente Linear somente com CSS3

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

Aqui veremos como realizar efeitos com gradiente sem usar uma linha sequer de javascript ou jquery. Apenas HTML e CSS3: Protótipo: Código-Fonte <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Linear Gradient</title> <style> body { background: linear-gradient(90deg, silver, white); } div { width:240px; height:100px; color:#FFF; float:left; margin:4px; font-size:30px; padding:20px; } div.gradient1 { background:linear-gradient(yellow 10%, magenta 90%); } div.gradient1:hover { background:linear-gradient(gray, white); border-radius:10px; } div.gradient2 { background:linear-gradient(45deg, red, yellow); } div.gradient2:hover { background:linear-gradient(45deg, gray, white); border-radius:10px; } div.gradient3 { background:linear-gradient(-45deg, violet, black); } div.gradient4 { background:linear-gradient(90deg, blue 20%, red 80%); } div.gradient5 { background:linear-gradient(-45deg, red, orange, yellow, white); } div.gradient6 { background:repeating-linear-gradient(45deg, turquoise 10px, black 20px, magenta 40px); } div.gradient7 { background:linear-gradient(yellow 10%, #000, blue 90%); } div.gradient8 { background:linear-gradient(green 10%, #000, blue 90%); } div.gradient9 { background:linear-gradient(17deg, 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...

Read More