Sombras e efeitos no Html 5 e CSS3

6,267 views

Published on

Flávia fala sobre o novo logo do html5 e apresenta a criação de um menu com efeitos de sombreamento e uma galeria de imagens com efeitos no houver só com CSS e Html.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,267
On SlideShare
0
From Embeds
0
Number of Embeds
505
Actions
Shares
0
Downloads
41
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Sombras e efeitos no Html 5 e CSS3

  1. 1. Vamos falar de
  2. 2. Novo logo do Html
  3. 3. Sem identidade....
  4. 4. Código HTML
  5. 5. Barra de navegação
  6. 6. Código CSS#menu{position: relative;display: block;margin: 20px auto;width: 600px;height: 60px;padding: 0 20px;background: -webkit-gradient( linear, left bottom, left top,color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125)));-webkit-box-shadow:#000 0 1px 2px;-webkit-border-radius:2px;}
  7. 7. Navegação dos botões
  8. 8. ul li{list-style-type: none;margin: 15px 0;foat: left;height: 30px;line-height: 30px;}ul li a{background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) );display: block;padding: 0;text-decoration: none;color: #fff;font-size: 12px;font-weight: bolder;text-shadow: #000 0 -1px 1px;width: 90px;text-align: center;border-bottom: 1px solid #666;border-top: 1px solid #222;border-left: 1px solid #666;border-right: 1px solid #222;-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;}
  9. 9. ul li:frst-child a{-webkit-border-top-left-radius:20px;-webkit-border-bottom-left-radius:20px;}ul li:last-child a{-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px;}ul li a:hover{text-shadow: #f5fc39 0 0 10px;background: #222;}
  10. 10. Efeito nas imagens
  11. 11. #fickr_badge_uber_wrapper{width: 550px;position: relative;display: block;margin: 0 auto;margin-top: 100px;}.fickr_badge_image{foat: left;}.fickr_badge_image img{margin: 10px;border: 3px solid #fff;display: block;position: relative;-webkit-border-radius:5px;-webkit-box-shadow: #000 0 0 2px;-webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in;}.fickr_badge_image img:hover{-webkit-transform:scale(1.2);z-index: 10;-webkit-box-shadow: #666 0 5px 10px;}
  12. 12. Referências

×