Ir para conteúdo
Fórum Script Brasil

djne

Membros
  • Total de itens

    2
  • Registro em

  • Última visita

Sobre djne

  • Data de Nascimento 02/03/1982

Perfil

  • Gender
    Male

djne's Achievements

0

Reputação

  1. fiz com os codigos q estao no codigo-fonte .... ADICIONE O SEGUINTE STYLE (HEAD) : html, body, ul.thumb, ul.thumb li { padding: 0; margin: 0; } html, body, ul.thumb { width: 100%; height: 100%; overflow: hidden; } ul.thumb { position: relative; list-style: none; /* a gradient background with wide diffusion is quite hard to handle without Direct2D or better hardware strategies but it could make the box-shadow effect more real at the same time. Setting it as important we can be sure supported browser will use it while other browser will use just the normal background color */ background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important; background: #333; } ul.thumb li { position: absolute; top: 50%; left: 50%; padding: 6px 6px 24px 6px; background: #FFF; width: 150px; height: 130px; /* box shadow is heavy as well if we need to rotate it during the animation or if we have not a flat background behind The alpha channel needs to work a lot but it gives 3D feeling */ -moz-box-shadow:1px 1px 6px #222; -webkit-box-shadow:1px 1px 6px #222; box-shadow:1px 1px 6px #222; /* to activate transiction FXs this is all we need specifying "all" means that the browser will try to resolve and computate everything z-index included */ -webkit-transition: all 3s ease-in-out; /* to create a better 3D feeling z-index will be in a range from 0 to 10 this means while another pic is going back to its position another rollovered one will gradually reach higher z-index */ z-index: 0; } ul.thumb li img { width: 100%; height: 100%; } /* each image will have a fake rotation to emulate a disordered desk It's not clear to me why we like so much rotated stuff ... probably because we like to put order without effort and simply with an hover, or a click? */ ul.thumb li:nth-child(1) { margin-top: -130px; margin-left: -130px; -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } ul.thumb li:nth-child(2) { margin-top: -120px; margin-left: -10px; -moz-transform: rotate(19deg); -webkit-transform: rotate(19deg); transform: rotate(19deg); } ul.thumb li:nth-child(3) { margin-top: -10px; margin-left: -180px; -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } ul.thumb li:nth-child(4) { margin-top: -50px; margin-left: -80px; -moz-transform: rotate(12deg); -webkit-transform: rotate(12deg); transform: rotate(12deg); } ul.thumb li:nth-child(5) { margin-top: 20px; margin-left: 30px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } /* here is how the LI element should look at the end of the transition which will be activated on hover special selector */ ul.thumb li:hover{ z-index: 10; /* original image size */ width: 480px; height: 322px; /* put the LI in the center (almost due to bottom padding) */ margin-top: -151px; margin-left: -240px; /* the effect is a "zoom" one, the shadow will be bigger */ -moz-box-shadow:8px 8px 24px #111; -webkit-box-shadow:8px 8px 24px #111; box-shadow:8px 8px 24px #111; /* and finally order via zero degrees rotation */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* just some credit fixed on the bottom of the page ... */ div.copyright { position: fixed; width: 100%; bottom: 20px; color: #666; text-align: center; font-family: sans-serif; font-size: 8pt; } div.copyright a { color: #555; text-decoration: none; border-bottom: 1px dotted #999; } div.copyright a:hover { color: #888; border-bottom: 1px dotted #555; } [/codebox] AGORA NO BODY ADICIONE : [codebox] <ul class="thumb"> <li> <img src="IMAGE 01" width="480" height="322" /> </li> <li> <img src="IMAGE 02" width="480" height="322" /> </li> <li> <img src="IMAGE 03" width="480" height="322" /> </li> <li> <img src="IMAGE 04" width="480" height="322" /> </li> <li> <img src="IMAGE 05" width="480" height="322" /> </li> </ul> é ISSO AEWW.... só DA PRA CINCO FOTOS .. TEM COMO EDITAR LA MAS IRIA SER RUIM DE MAS =D abraxx!
  2. tipo o login funciona e tal mas como esconder o script com todos users e senha? tá tipo assim: <html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> aqui todos negocios pra digitar e tal .... </body> </html> nesse script 'jquery.js' tem todos usuarios e as senhas ... como esconder isso como tem nos sites ? (es bem simples: baixaki) ... ??? :unsure:
×
×
  • Criar Novo...