Web, .NET, Apps

Posts Tagged "tableless"

O Efeito “Flip-3D” do CSS3

O Efeito “Flip-3D” do CSS3

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

  Aqui veremos como é feito o movimento de “virar caixas do avesso” com o passar do mouse. Será usado apenas CSS3 com HTML e nada de javascript/jquery. Protótipo: Código-Fonte: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Flip 3D</title> <style> .flip3D {width:240px;height:200px; margin:10px; float:left;} .flip3D > .front { position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius:7px; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition: transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back { position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 180deg ); background:#80BFFF; width:240px; height:200px; border-radius:7px; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition: transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); } </style> </head> <body> <div class=”flip3D”> <div class=”front”>Box 1 – Front</div> <div class=”back”>Box 1 – Back</div> </div> <div class=”flip3D”> <div class=”front”>Box 2 – Front</div> <div class=”back”>Box 2 – Back</div> </div> <div class=”flip3D”> <div class=”front”>Box 3 – Front</div> <div class=”back”>Box 3 – Back</div> </div> </body> </html> Explicação passo-a-passo....

Read More
Gradiente Radial somente com CSS3

Gradiente Radial somente com CSS3

By on mar 20, 2014 in CSS3, Tableless | 10.108 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
Gradiente Linear somente com CSS3

Gradiente Linear somente com CSS3

By on mar 20, 2014 in CSS3, Tableless | 15.273 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