Pesquisar

28/09/2011

Home » , , , » Página efeito flip com CSS

Página efeito flip com CSS

Um comentário
fonte e créditos:
vagabundia.












Efecto Flip Page con CSS



Pure CSS3 Page Flip Effect 


es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.
Pure CSS3 Page Flip Effect

<style type="text/css">
#page-flip {
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;
}
#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p1 > div {
  background-image: url(URL_primera_imagen);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 > div > div {
  height: 388px;
  width: 10px;
}
 #p2 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r3 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s3 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#page-flip:hover #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#page-flip:hover #sp3 {
  width: 11px;
}
.s {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s2 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp2 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#page-flip:hover #s4 {
  opacity: 0;
}
#page-flip:hover #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p3 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p3 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#page-flip:hover #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#enlace {
  color: #FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 3px 1px #000;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#enlace:hover {
  border: 1px dotted #CCC;
}
#page-flip:hover #enlace {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
</style>

<div id="page-flip">
  <div id="r1">
    <div id="p1"><div><div></div></div></div>
  </div>
  <div id="p2"><div></div></div>
  <div id="r3">
    <div id="p3"><div><div></div></div></div>
  </div>
  <div class="s">
    <div id="s3"><div id="sp3"></div></div>
  </div>
  <div class="s" id="s4">
    <div id="s2"><div id="sp2"></div></div>
  </div>
  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>
</div>


traduzido:                                                       



Página efeito flip com CSS 
Efeito Página pura CSS3 Flip é uma experiência mais de Roman Tribunal, a data de execução, só trabalhou com Chorme, mas com algumas pequenas adições, também funcionam em outros navegadores.
Regras de estilo são bastante complexas, mas as propriedades de uso não tão sofisticado não pode explicar muito, basta colocar para trabalhar, fazer alguma aritmética e continuar tentando devagar porque o resultado é espetacular e faria muitas outras coisas .
"Neste exemplo, eu limitei-me a adicionar as propriedades para o Firefox e tenho simplificado um pouco a idéia."
Efeito Página pura CSS3 Virar<style type="text/css"># Page flip-{
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;}# {R1
  position: absolute;
  z-index: 2;
  -Webkit-transform origem: 1315px 500px;
  -Webkit-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 1315px 500px;
  -Moz-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {P1
  height: 1388px;
  overflow: hidden;
  width: 1285px;}# P1> div {
  background-image: url (URL_primera_imagen);
  height: 388px;
  width: 285px;
  -Webkit-transform origem: 285px 0;
  -Webkit-transform: translate (1030px, 500px) rotate (32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 285px 0;
  -Moz-transform: translate (1030px, 500px) rotate (32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# P1> div> div {
  height: 388px;
  width: 10px;}
 # P2> div {
  background-image: url (URL_segunda_imagen);
  box-shadow: 0 0 11px rgba (0, 0, 0, 0,5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;}# {R3
  position: absolute;
  z-index: 2;
  -Webkit-transform origem: 1315px 500px;
  -Webkit-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 1315px 500px;
  -Moz-transform: traduzir (-1030px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {S3
  position: absolute;
  z-index: 1;
  -Webkit-transform origem: 70px 500px;
  -Webkit-transform: translate (215px, 500px), rotate (-32deg) translate (40px, 0);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 70px 500px;
  -Moz-transform: translate (215px, 500px), rotate (-32deg) translate (40px, 0);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# Page-flip: hover {# s3
  -Webkit-transform origem: 325px 500px;
  -Webkit-transform: traduzir (-40px, 500px), rotate (0deg) translate (40px, 0);
  -Moz-transform origem: 325px 500px;
  -Moz-transform: traduzir (-40px, 500px), rotate (0deg) translate (40px, 0);}# {Sp3
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -Webkit-transição da propriedade: largura;
  -Webkit-transição duração: 1s;
  -Moz-transição da propriedade: largura;
  -Moz-transição duração: 1s;}# Page-flip: hover {# sp3
  width: 11px;}. S {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;}# {S2
  position: absolute;
  -Webkit-transform origem: 45px 500px;
  -Webkit-transform: translate (240px, 500px), rotate (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform origem: 45px 500px;
  -Moz-transform: translate (240px, 500px), rotate (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# {Sp2
  height: 1000px;
  overflow: hidden;
  width: 15px;}# {S4
  opacidade: 1;
  -Webkit-transição duração: 0.5s;
  -Moz-transição duração: 0.5s;}# Page-flip: hover {# s4
  opacidade: 0;}# Page-flip: hover {# s2
  -Webkit-transform origem: 300px 500px;
  -Webkit-transform: traduzir (-15px, 500px), rotate (0deg);
  -Moz-transform origem: 300px 500px;
  -Moz-transform: traduzir (-15px, 500px), rotate (0deg);}# {P3
  height: 1388px;
  overflow: hidden;
  width: 1285px;}# P3 div> {
  background-image: url (URL_segunda_imagen);
  box-shadow: 0 0 11px rgba (0, 0, 0, 0,5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -Webkit-transform-origin: 0 0;
  -Webkit-transform: translate (1255px, 500px) girar (-32deg);
  -Webkit-transição propriedade:-webkit-transform,-webkit-transform origem;
  -Webkit-transição duração: 1s;
  -Moz-transform-origin: 0 0;
  -Moz-transform: translate (1255px, 500px) girar (-32deg);
  -Moz-transição propriedade:-moz-transform,-moz-transform origem;
  -Moz-transição duração: 1s;}# P3 div> div> {
  float: right;
  height: 500px;
  width: 9px;}# Page-flip: hover {# r1
  -Webkit-transform origem: 1570px 500px;
  -Webkit-transform: traduzir (-1285px, 500px), rotate (0deg);
  -Moz-transform origem: 1570px 500px;
  -Moz-transform: traduzir (-1285px, 500px), rotate (0deg);}# Page-flip: hover # p1 div> {
  -Webkit-transform origem: 285px 0;
  -Webkit-transform: translate (1285px, 500px) girar (0deg);
  -Moz-transform origem: 285px 0;
  -Moz-transform: translate (1285px, 500px) girar (0deg);}# Page-flip: hover {# r3
  -Webkit-transform origem: 1570px 500px;
  -Webkit-transform: traduzir (-1285px, 500px), rotate (0deg);
  -Moz-transform origem: 1570px 500px;
  -Moz-transform: traduzir (-1285px, 500px), rotate (0deg);}# Page-flip: hover # p3 div> {
  -Webkit-transform-origin: 0 0;
  -Webkit-transform: translate (1000px, 500px) girar (0deg);
  , Moz-transform-origin: 0 0;
  -Moz-transform: translate (1000px, 500px) girar (0deg);}# Link {
  color: # FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: 0 0-20000px;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 3px # 000;
  width: 250px;
  z-index: 3;
  -Webkit-transição duração: 0.01s;
  -Webkit-transição da propriedade: margem;
  -Moz-transição duração: 0.01s;
  -Moz-transição de propriedade: margem;}# Link: hover {
  border: 1px pontilhada # CCC;}# Page-flip: hover {link #
  margin: 30px 0 0 15px;
  -Webkit-transição atraso: 0,8 s;
  -Moz-transição atraso: 0,8 s;}</ Style>
<div id="page-flip">
  <div id="r1">
    <div> id = "p1"> <div </ div> </ div> </ div>
  </ Div>
  <div id="p2"> </ div> </ div>
  <div id="r3">
    <div> id = "p3"> <div </ div> </ div> </ div>
  </ Div>
  <div class="s">
    <div id="s3"> <div id="sp3"> </ div> </ div>
  </ Div>
  <div class="s" id="s4">
    <div id="s2"> <div id="sp2"> </ div> </ div>
  </ Div>
  <a id="enlace" title="" target="_blank"> href = "URL_enlace" texto do link </ a></ Div>


enfim:

Pure CSS3 Page Flip Effect es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea. 

<style type="text/css">
#page-flip {
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;
}
#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p1 > div {
  background-image: url(URL_primera_imagen);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 > div > div {
  height: 388px;
  width: 10px;
}
 #p2 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r3 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s3 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#page-flip:hover #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#page-flip:hover #sp3 {
  width: 11px;
}
.s {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s2 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp2 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#page-flip:hover #s4 {
  opacity: 0;
}
#page-flip:hover #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p3 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p3 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#page-flip:hover #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#enlace {
  color: #FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 3px 1px #000;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#enlace:hover {
  border: 1px dotted #CCC;
}
#page-flip:hover #enlace {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
</style>

<div id="page-flip">
  <div id="r1">
    <div id="p1"><div><div></div></div></div>
  </div>
  <div id="p2"><div></div></div>
  <div id="r3">
    <div id="p3"><div><div></div></div></div>
  </div>
  <div class="s">
    <div id="s3"><div id="sp3"></div></div>
  </div>
  <div class="s" id="s4">
    <div id="s2"><div id="sp2"></div></div>
  </div>
  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>
</div>
Share:

Um comentário:

  1. Luís Eduardo Pirollo28 de setembro de 2011 às 22:52

    Olá minha querida amiga Edilene!!!
    Minha doce amiga, ainda acordada???
    Minha amiga, como sempre mais uma bela dica que apresenta para nós, bem interessante gostei, deve dar um efeito todo especial às páginas!!!
    Parabéns por mais esta excelente dica, valeu!!!
    Minha amiga, vou dormir, estou com sono!!!
    Tenha uma linda e abençoada noite!!!
    Beijos e muita paz!!!

    ResponderExcluir

Mensagem do formulário de comentário:

Postagem em destaque

Escrivaninha: faça a sua!... ..."bancos como cavaletes e , colocar um tampo de vidro".

ESCRIVANINHA – FAÇA VOCÊ MESMO Em Faça você mesmo Simples, rápido e bem explicado.  Escrivaninha_1  ..." bancos como c...

nuvem de blogs e sites

alonegocios blogsemredeedihitt

Seguidores