JavaFace-elblogdelprogramador

.contenedor{
width:800px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#conte_noticia { 
width:auto; 
height:120px; 
margin:20px auto; color:#000;
-webkit-box-shadow:0 0 5px #fff; 
-moz-box-shadow:0 0 5px #fff; 
box-shadow:0 0 5px #fff; 
}
.noticia { 
display:none; 
float:left;
height:69px;
background-color:#ffffff; 
margin-left:-10px;
margin-top:14px; 
padding:7px; 
box-shadow: 0px 0px 5px #000;
}
.noticia:after{
content:"";
position:absolute;
margin-left:-7px;
margin-top:32px; 
float:left;
border-top:10px solid #1067dd;
border-right:20px solid transparent;
width:0px;
height:0line-height:0;
} 
.noticia p { 
font-size:18px; 
font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", 
"wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,sans-serif;     
color:#0a0a0a;
text-align:left;
} 
.noticia .author { 
margin:5px 0px;
font:13px Georgia,serif,Times; 
color:#1572e4;
padding-top:1px; 
text-align:left;
}
.noticiamark { 
display:none; 
float:left; 
letter-spacing:-35px; 
line-height:300px; 
color:#0a0a0a;
}
.rightnoticia {
margin-right:auto;
margin-left:auto;
}
.rightnoticia img{
margin-bottom:80px;
width:55px;
height:55px;
border:solid 2px #ffffff; 
border-radius: 50%;
background-color:#cccaca; 
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
box-shadow: 0 0 3px rgba(0, 0, 0, .7);
margin-left:auto;
margin-right:auto;
}  

  
var noticiaSpeed = 500;
// Velocidad del recipiente noticia para ampliar
var noticiaContainerSpeed = 1000;
// Tiempo de la noticia que será visible
var shownoticiaSpeed = 5000;
// Tiempo de la pantalla estará vacía
var cleanScreenSpeed = 500;
// Ancho de la caja noticia
// Sería genial para crecer automáticamente al tamaño del texto que contiene en el futuro.
var conte_noticiaWidth = "600px";
// La noticias que nos va a mostrar
var noticias = [ {
  "noticia" : "Para copiar cualquier contenido,utiliza CTRL-C.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Esta Website funciona mejor con,Navegadores Actualizados.",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Casi todos los enlaces de descarga, estan actualizados :D",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Si existe un enlace que no funciona,avisame..!!",
  "author" : "by- Hannibal T"
 }, {
  "noticia" : "Comparte las entradas,con tus amigos..!!",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Muy pronto cuenta premiun en MEGA",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
 
];
var currentnoticiaIndex=0;jQuery.noConflict();jQuery(document).ready(function(){if(jQuery.browser.webkit){jQuery(".noticiamark").css({"margin-top":"-22px"});jQuery(".rightnoticia").css({"margin-top":"-24px"})}startAnimation()});var startAnimation=function(){setTimeout(function(){showLeftnoticia()},noticiaSpeed)};var showLeftnoticia=function(){jQuery(".leftnoticia").show();setTimeout(function(){showRightnoticia()},noticiaSpeed)};var showRightnoticia=function(){jQuery(".rightnoticia").show();setTimeout(function(){shownoticiaContainer()},noticiaSpeed)};var shownoticiaContainer=function(){jQuery(".rightnoticia").css({"margin-left":"-10px"});jQuery("").html(noticias[currentnoticiaIndex].noticia).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery("

").addClass("author").html(noticias[currentnoticiaIndex].author).css({display:"none"}).appendTo(jQuery(".noticia"));jQuery(".noticia").show().animate({width:conte_noticiaWidth},noticiaContainerSpeed,function(){shownoticia()})};var shownoticia=function(){jQuery(".noticia").children().fadeIn();setTimeout(function(){clearnoticia()},shownoticiaSpeed)};var clearnoticia=function(){if(currentnoticiaIndex==noticias.length-1){currentnoticiaIndex=0}else{currentnoticiaIndex++}jQuery(".noticiamark").fadeOut();jQuery(".noticia").fadeOut(function(){jQuery(".rightnoticia").css({"margin-left":"0px"});jQuery(".noticia").empty().css({width:"0px"});setTimeout(function(){startAnimation()},cleanScreenSpeed)})};
  

var noticias = [
           {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }, {
  "noticia" : "Nueva Plantilla ModernFace 3D ,mejor interactividad",
  "author" : "- Hannibal T"
 }
];

div class='contenedor'
!--ROTULO NOTICIAS--
       div id="conte_noticia"
   p class="noticiamark leftnoticia"/p
   div class="noticia"
            /div
   p class="noticiamark rightnoticia"
             img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjp-wSGz5Z4x6Oct69od29rfw56T-TVRDPWTu1aYfWw8ovqfCgtiLhE5GTsnn9OHO1qy3MjG1pRNWqbxamDzYG7MfsDhjzdCk6-7gIaIBCdNT8A0-VzAc3H4CQVVRbIA4_bJ1Wi0eKhjE/s86/FACE.png'/
            /p
  /div
!--FIN--
/div

.main{
 position:relative;
    width:680px;/*tamaño segun su requerimiento*/
    margin: 0 auto;
}
/*contenedor*/
.conte_padre {
   width: 278px;/*tamaño de la imagen y del contenedor*/
   height: 231px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor:pointer;
   background-color: rgba(210,3,3, 0.7);
   -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
   box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
}
.conte_padre .mascara_efecto,.conte_padre .content {
   width: 278px;
   height: 231px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.conte_padre img {
   display: block;
   position: relative;
}
.conte_padre h2 {/*titulo*/
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font:18px Georgia;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.conte_padre p {/*parrafo o contenido*/
   font-family: Georgia, serif;
   font-size: 13px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.conte_padre a.info {/*boton*/
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   background-color: rgba(245,174,52, 0.7);
}
.conte_padre a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
/*fin*/
/*efecto*/
.panel_efecto img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.panel_efecto .mascara_efecto {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.panel_efecto h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(199, 198, 197, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.panel_efecto p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.panel_efecto a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.panel_efecto:hover .mascara_efecto {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.panel_efecto:hover img {
 border: 10px solid #070101;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.panel_efecto:hover h2,
.panel_efecto:hover p,
.panel_efecto:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

.contenedor_padre {
     -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
  }
  .contenedor_padre:hover .contenedor_hijo, .contenedor_padre.hover .contenedor_hijo {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
  }
  .contenedor_padre, .primera_capa, .segunda_capa {
   width:340px;
   height:260px;
  }
  .contenedor_hijo {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
  }
  .primera_capa, .segunda_capa {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
  }
  .primera_capa {
   background:#317cf8;
   z-index: 2;
   border:1px solid #2954f5;
      text-shadow:1px 1px 1px rgba(255,255,255,0.4);
         box-shadow: 0px 1px 1px rgba(255,255,255,0.2), 0px 1px 3px rgba(25,62,83, 0.1) inset, 0px 0px 0px 8px rgba(155,180,195, 0.3);
  }
  .segunda_capa {
   background:#ffffff;
   border:3px solid #0d0801;
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
  }
  .primera_capa .name {
   font-size:33px;
   display: inline-block;
   background: rgba(33, 33, 33, 0.9);
   color: #f8f8f8;
   font-family: Courier;
   padding: 5px 15px;
   border-radius: 5px;
   bottom:30px;
   left:50%;
   position: absolute;
   text-shadow: 0.1em 0.1em 0.05em #333;
   -webkit-transform: rotate(-20deg);
   -moz-transform: rotate(-20deg);
   transform: rotate(-20deg);
  }
        .primera_capa .author {
   font-size: 1.4em;
   display: inline-block;
   background: rgba(255,255,255, 0.9);
   color:#f80135;
      font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
   padding: 5px 10px;
   border-radius: 5px;
   bottom:5px;
   left:80%;
   position: absolute;
   -webkit-transform: rotate(-20deg);
   -moz-transform: rotate(-20deg);
   transform: rotate(-20deg);
  }
  .primera_capa .habilidad{
      color:#ffffff;
   float:left;
   margin:20px 35%;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .habilidad h4{
      color:#ffffff;
   float:left;
   margin:-15px 20%;
   line-height:2.6em;
   font: italic 18px Georgia;
   font-weight:bold;
  }
  .primera_capa .biografia {
      color:#ffffff;
   float:left;
   margin:-30px 10px;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .logo img {
   position: absolute;
   top:10px;
   left:15px;
   width:85px;
   height:85px;
   border-radius: 50%; /* Borde redondeado */
   border:3px solid #FFF;
            background:#CCC;
  }
        .segunda_capa .parrafo{
      color: #00304a;
   float:left;
   margin:20px 10px;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .segunda_capa p {
   position: absolute;
   bottom: 40px;
   left: 0;
   right: 0;
   text-align: center;
   padding: 0 20px;
  }
  .segunda_capa .nombre {
   font-size:16px;
   padding: 5px 10px;
   background: rgba(0,0,0, 0.9);
   color:#ffffff;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
   border-radius: 5px;
   bottom:20px;
   left:50%;
   margin:0 auto 0 auto;
   text-align:center;
   position: absolute;
  }

div class="contenedor_padre" ontouchstart="this.classList.toggle('hover');"
  div class="contenedor_hijo"
            !--FRENTE--
   div class="primera_capa"
            
               div class="logo"
                 img alt='JavaFace' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0pAOLzpJNBhWZTUOWKR8DQcbg61BWAkkZbEBxB1Q83JR12pe5wFrBxHS-35BSQe9SB0Ca9v1D_40pmTQqu3w0vZvWleBk_uaxSA5Ls3o_bQCRwSTGgVgau78JITJQ86cF7r3vC3TnWZk/s250/FACE.png'/
               /div
               span class="habilidad"
                 h4Especialidades/h4
                 ul
                 liA un no las se/li
                 licuando sepa se las/li
                 liDigo/li
                 /ul
                /span
                 span class="biografia"
                 Soy ciego,sordo,mudo terco y testarudo...a no
                 esa es SHAKIRA.!! lol
                /span
      span class="name"JavaFace.P/span
               span class="author"Author/span
   /div
            !--ATRAS--
    div class="segunda_capa"
    span class="parrafo"
                  Queda prohibido no sonreír a los problemas,
                         no luchar por lo que quieres, 
                  abandonarlo todo por miedo, 
                   no convertir en realidad tus sueños
                /span
                span class="nombre"Pablo Neruda/span
   /div
            !--fin atras--
  /div
 /div