• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sombras e efeitos no Html 5 e CSS3
 

Sombras e efeitos no Html 5 e CSS3

on

  • 6,315 views

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.

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.

Statistics

Views

Total Views
6,315
Views on SlideShare
5,815
Embed Views
500

Actions

Likes
3
Downloads
37
Comments
0

10 Embeds 500

http://blog.bluesoft.com.br 423
http://www.siqueiradesigner.com 58
http://www.plugmasters.com.br 6
http://comandovirtual.onlinewebshop.net 3
http://webcache.googleusercontent.com 2
http://www.slideshare.net 2
http://www.flaviadesigner.com.br 2
http://www.verious.com 2
http://acaohacker.onlinewebshop.net 1
http://www.bluesoft.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sombras e efeitos no Html 5 e CSS3 Sombras e efeitos no Html 5 e CSS3 Presentation Transcript

    • Vamos falar de
    • Novo logo do Html
    • Sem identidade....
    • Código HTML
    • Barra de navegação
    • 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;}
    • Navegação dos botões
    • 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;}
    • 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;}
    • Efeito nas imagens
    • #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;}
    • Referências