JavaFace-elblogdelprogramador: CSS y CSS3

Mostrando entradas con la etiqueta CSS y CSS3. Mostrar todas las entradas

martes, 30 de julio de 2013

Añade a tus proyectos Notificaciones con estilo con CSS3 y JQuery

7/30/2013

Hace un mes utilice este plugin desarrollado porSaleem(codebasehero) ,para mostrar notificaciones cuando un visitante dejara un comentario de facebook lo cual enseñare como hacerlo con las API de Facebook mas adelante.

Son notificaciones que se muestran en la parte inferior derecha o izquierda según se desee y tienen la propiedad de cerrarse automáticamente cada n tiempo.

Instalación

su instalación es sencilla como cualquier otro plugin solo necesitamos alojar el archivo en algun host de su preferencia .

 script type="text/javascript" src="jquery-1.6.1.min.js"/script script type="text/javascript" src="../plugin/ttw-simple-notifications-min.js"/script script type="text/javascript" $(document).ready(function() { var notifications = $('body').ttwSimpleNotifications(); notifications.show({msg:'Lucho Borja hizo un comentario'+'br/'+'Me gusto mucho la presentacion para mi esta super bien', icon:'images/icon.png', autoHide:false}); }); /script

de esta forma se presentara una notificación,este plugin tiene los siguiente parámetros para poder configurar las notificaciones.

msg: el mensaje que se desee presentar
autoHideDelay: valor entero,tiempo que se desee que la notificación se cierre
autoHide: valor booleano,si se desea que la notificación no se cierre automáticamente
icon: URL, icono o imagen que se desee lleve la notificación
position: "bottom right'" , si se desea cambiar de posición cuando aparezca la notificación

incluye un demo.

DESCARGAR

lunes, 29 de julio de 2013

Añade a tu sitio un estilo Metro con este Pack de botones windows 8 en CSS3

7/29/2013

Este pack de botones me hubiese servidor cuando tenia el blog con estilo Metro pero ahora tu los puedes usar , si estas construyendo un sitio con ese estilo estos botones son para ti.

Francisco Neves fue el creador de estos botones con estilo Metro en este pack podrás encontrar todos los colores del windows 8 mas lasfuentes necesarias para tu sitio.

DESCARGAR

Descargate y añade a tu sitio este Pack de Botones Css3

7/29/2013

Se lo difícil que es cuando estas desarrollando un proyecto web y no tienes idea de que estilo personalizar lo enlaces o vínculos del sitio estos deben de combinar con los colores del sitio y al hacer esto te lleva un poco de tiempo,para ello les traigo un pack de botones en css3 desarrollados porDzyngiri .

en este Pack podrás encontrar estilos para:

Favoritos
Descargar
Subir
calendario
estadísticas
información
Facebook
Twitter
etc

DESCARGAR

viernes, 26 de julio de 2013

Publica contenido y añadir comentario en cualquier grupo del usuario con la API de Facebook en javascript

7/26/2013

haces unos minutos vimos como mostrarinformación del usuario y listar los grupos donde es miembroahora veremos como publicar un contenido en cualquier grupo que el usuario es miembro para ello necesito los permisospublish_stream, read_stream, user_groups los cuales ya sabemos para que sirven.

Como publicar contenido en un grupo

para publicar cualquier contenido necesito saber primero el ID del grupo y utilizar los métodos/feed ypost luego necesitare los parámetros o recipientes donde voy a colocar el contenido que necesito publicarmessage,picture,icon,link,name,description estos parámetros lo hemos utilizado en comopublicar contenido de un web en el muro de un usuario

function publicar_grupo(ID) { FB.api("/"+ID+"/feed", 'post', { message: 'Geniaaal..!!ya puedo publicar con la API DE FACEBOOK ooohh SIIᕙ(`▽´)ᕗ,!', picture :'https://lh5.googleusercontent.com/-lEKhKIIiobo/UeqlGLHT0xI/AAAAAAAABP8/5FMS0IY3Ghk/s128-no/ima_128.png', icon:'http://lh5.googleusercontent.com/-YpHyKKZjhr0/UeqlPyqAImI/AAAAAAAABQY/a65TrOZrLQI/s16-no/ima_16.png', link : 'http://www.javaface-elblogdelprogramador.com/', name : 'JavaFace-elblogdelprogramador: aprende usar la api de facebook', description : 'Aprende como usar la API de facebook y sincroniza tu web con facebook!!' }, function(response) { if (!response || response.error) { console.log('Error al publicar en grupo'); } else { comentar(response.id); console.log('Publicado en grupo: ' + response.id); } }); }

utilizando el método/feed ypost podre publicar un contenido en el grupo pero también puedo añadir un comentario a la publicación, les dejo el código fuente completo.

DESCARGAR

miércoles, 1 de mayo de 2013

Añade a tu sio web el estilo Burbuja(Bocadillo) ideal para títulos o cajas de comentarios

5/01/2013

Hace unosdíasme pidieron como hacer comentarios tipo burbuja las cuales hay dos formas conimágeneso con css puro,aquíles traigo unacolecciónde diferentes formas de burbujas para sus sitios hechas enCSS PURO su autor (nicolasgallagher)pueden ver un ejemplo y apreciar la variedad de efectos.

Contraseña solo post del 2012: javafaceContraseña Actual: www.javaface-elblogdelprogramador.com

DescargarGracias por tu visita

martes, 30 de abril de 2013

Efecto Hover con CSS3 ideal para tus anuncios e imágenes en Blogger (Segunda Forma)

4/30/2013

Hoy les traigo otro efecto hover con CSS3 anteriormente ya vimos laprimera forma, esta es básicamentela mismalógicapero efecto diferente tipo zoom off les presento un ejemplo de ello.

Instalaciónen Blogger

Paso 1) Añadir el Css3
Nos dirigimos a Plantilla--clic en Editar HTML--clic dentro del editor de blogger--y luego realice lacombinaciónde teclas CTRL-F,esto es para abrir el buscador dentro del editor y no afuera en el navegador. una vez hecho esto busque la etiqueta de cierre/b:skin y arriba de esta etiqueta pegue el siguiente codigo CSS3.

Mostrar Codigo

.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;
}

Paso 2) Añadir la estructura o HTML
terminado de pegar el codigo css3 guarde los cambios y dirigase a Diseño--Añadir un Gadget-- y escoja laopción Html/JavaScript y pegue el siguientecódigoHTML.

div class="main" 

            div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
             !----
             div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div
/div

si se llegara a necesitar colocar otro bloque solo deberá de aumentar lo siguiente.

div class="conte_padre panel_efecto"
                    img src="imagen/ey.jpg" /
                    div class="mascara_efecto"
                        h2Anunciate/h2
                       pTemenos los precios mas bajos del Mercado/p
                        a href="#" class="info"Leer Mas/a
                    /div
             /div

DESCARGATE EL CODIGO FUENTE COMPLETO

Contraseña: www.javaface-elblogdelprogramador.com

lunes, 22 de abril de 2013

Añade a tu sitio un contenedor dos caras ideal para los datos del Autor ,efecto Hover dos caras con CSS (Blogger) (Forma 1)

4/22/2013

Hoy les traigo una vistosa y sencilla forma de colocar los datos del autor en su sitio todo con CSS y totalmentepersonalizablea su gustoaquíles muestro un ejemplo de como les va a quedar.

Instalaciónen Blogger

Paso 1) Añadir en CSS
Nos dirigimos aPlantilla--Editar HTML--click dentro del Editor y realice lacombinaciónde teclas CTRL-F esto es para abrir el buscador dentro del editor ,una vez abierto busque la etiqueta de cierre/b:skin y justo arriba de esta etiqueta pegue el siguiente codigo CSS.

Mostrar Codigo

.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;
  }

Paso 2) Añadir el Html o estructura
culminado el paso 2 ,nos dirigimos aDiseño--Añadir un Gadget--y escoja la opcion HTML/JavaScript y pegue el siguiente codigo HTML

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

podrán colocar cualquier contenido referente al autor en la primera capa o primera cara, y en la segunda cualquier pensamiento o otro tipo de contenido

DESCARGATE EL CODIGO FUENTE PARA TUS PROYECTOS

Contraseña: www.javaface-elblogdelprogramador.com

domingo, 21 de abril de 2013

Añade a tu sitio este efecto Hover a tus imágenes efecto de transición brillo con CSS3 (Blogger)

4/21/2013

Gracias al CSS3(I LOVE CSS3) podemos realizar varios efectos a nuestro sitiodejándoloespectacular todo de pende de su creatividad y manejo del css3 ,hoy les presento un efecto ideal para susimágenesde cualquier tipo en este caso muestro un ejemplo para anuncios puede ver un ejemplo .

Ejemplo :

Instalación en Blogger:

Paso 1) Añadir el CSS3

Como Google actualizo el editor de blogger(para mi es un asco de editor falta mucho por mejorar),nos dirigimos aPlantilla-luego clic enEditar HTML-- y hacemos un click dentro del editor luego realice lacombinaciónde teclasCTRL+F esto es para activar el buscador dentro del editor y no llamar el buscador del navegador,luego busque la etiqueta de cierre/b:skin y justo arriba de esta etiqueta pegue el siguientecódigoCSS3.

.contenedor {
    width: 278px;
 margin: 20px;
    color: #000406;
    font: italic 18px Georgia;
    text-align: center;
}
.conte_imagen{
    width:  278px;
    height: 231px;
    margin: 30px auto;
    position: relative;
    border:4px solid #999;
}
.activa_hover{
    width:100%; 
 height: 100%; 
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQTcx9pzcMv_eiTOTNO2fq-87ePK4Ui4eFOmK3-TC2eweiZjbE3G0hJTZti5uY6VLf2Xs4vNxZ9dRyWl2xdNMoO8egzJ9w8Kn8HL-56P1kbhn5ehbdsjiqqJlsqZA-XiW5vyN2UiSzUA/s500/brillo.png);
    position: absolute;
    /*posicion de la imagen*/
    background-position: -265px 0; 
    left:0px; top:0px; 
    background-repeat:no-repeat;
    /*comenzamos transicion*/
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
}
.activa_hover:hover{
    /*posicion hover de la imagen*/
    background-position: 160px 0;
}

Paso 2) Añadir el HTML
una vez que hemos añadido elcódigocss3, nos dirigimos aDiseño--clic enAñadir un Gadget--y escoja la opcionHTML/JavaScript y pegue el siguiente codigo.

div class="contenedor"
Efecto Brillo con CSS3
div class="conte_imagen"
 img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDQ1RaZudg1bmJRRyXr0ZlaltjDfALWiT7a2_Ib_D4jhMS71z3Y-vRUgPZ-_S1dNvAqygpul0huaIQxj2v-eEcmyVIwfXZbu5fbI4iM-VTKYOAq6lFz04POlwD1BjOvWBA-FGpHIJHWQ/s278/anuncio.jpg" /
 div class="activa_hover"/div
/div
div

Descargate el Codigo fuente para tus Proyectos

Contraseña: www.javaface-elblogdelprogramador.com

Descargar Gracias por tu visita

domingo, 24 de marzo de 2013

Simple TooltipText con CSS3 dale mas vida a tus vinculos

3/24/2013

A la hora de crear un vinculo quedireccionaa otro sitio ,estosvínculospor defecto son muy simples y en verdad feos por que si queremos colocar un tootiptext que muestre un pequeño mensaje de que se trata ese vinculo por medio de title el resultado es igual de simple,entonces podemos crear nuestros propios estilos a nuestro gusto,aquíles dejo un ejemplo de un TooltipText ,clic enResult

Instalación
Paso 1) Añadir el CSS3
Dirigase a laopciónPlantilla--Editar HTML-- realice lacombinaciónde teclas CTRL-F y busque
/b:skin justo arriba de ella pegue el siguiente codigo

Mostrar Codigo

.tooltip {
 position: relative;
 display: inline-block;
}

.tooltip span {
 background: #54b8f2;
 border: 4px solid #54b8f2;
 bottom: 30px; /** Aumentar para mayor efecto **/
 border-radius: 6px;
 color: white;
 font-size: 13px;
 left: 50%;
 line-height: 16px;
 margin-left: -88px;
 opacity: 0;
 padding: 8px;
 position: absolute;
 text-align: center; /* Texto centrado */
 /** Transiciones **/
-webkit-transition:0.2s;
 -moz-transition:0.2s;
  -o-transition:0.2s;
   transition:0.2s;
 visibility: hidden;
 width: 150px; /**Ancho**/
}
.tooltip span img{
	float:left;
	border:none;
	margin-left:auto;
	margin-right:auto;
}

a:hover.tooltip span {
 bottom: 50px; /*distancia del vinculo al tooltip*/
 opacity: 1;
 visibility: visible;
 z-index: 100;
}

/**Flecha del tooltip**/
 .tooltip span:after {
  bottom: -14px;
  border-left: 10px solid transparent;
  border-top:10px solid #54b8f2;
  border-right: 10px solid transparent;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -9px;
  position: absolute;
  width: 0;
 }
 .contenedor{
	 text-align:center;
	 margin-left:auto;
	 margin-right:auto;
	 width:35%;
	 position:absolute;
	 top:25%;
 }
 .contenedor a{
     display: inline; 
	 padding:5px 15px;
     margin:0 5px;
	 text-align:center;
	 font-family:Georgia, "Times New Roman", Times, serif;
	 font-size:18px;
	 color:#090600;
	 text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	 text-decoration:none;
	 background-color: rgba(34,141,224, 0.6);
     background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
     background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	 -moz-border-radius: 4px;
     border-radius: 4px; 
	 border:1px solid #090600;
 }

Puede modificar el estilo a su gusto como tipo de letra color, guarde los cambios.

Paso 2) Añadir losvínculos
Dirigase a laopciónDiseño--añadir un gadget-- y escoja laopciónHTML/JavaScript y pegue elsiguiente código.

div class='contenedor'
!--INICIO--

!--1--
a class="tooltip" href="#"Blogger
 span
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25eg03u-BFM28YTLm1HaFhfzM5Gg-PjFdBZPfuekFrSh91Qj609LRmLt5DqeacFjlU_2v957rnGe4vV1bQp516_0J8ybjK9pfXLgmfuNPY2U4FwHMMrNtx-hUJSuSsUKchbKInebEU9go/" /
  Blogger es un servicio creado por PyraLabs
 /span
/a

!--2--
a class="tooltip" href="#"Wordpress
 span
  img src="http://gamerchants.com/images/icon-wordpress-32x32.png" /
    WordPress es un sistema de gestión de contenido 
 /span
/a

!--FIN--
div

Ahora la forma aquí planteada funcionara dentro de un gadget,pero también dentro de una entrada solo debe de especificar la clase del css cuyo nombre estooltip .

a class="tooltip" href="#"JavaFace-elblogdelprogramador
 span
    Sitio sobre programación y mas
 /span
/a

(si te sirvio este post ayudame dando clic ▼ en la imagen :) )

viernes, 22 de marzo de 2013

Efecto Hover con CSS3 ideal para tus anuncios en Blogger (Primera Forma)

3/22/2013

Hoy les presento una forma agradable y vistosa de darle vida a los anuncios o a cualquier imagen que ustedes deseen todo gracias a las transiciones de CSS3 ,pueden ver un ejemplo de ello da clic enResult.

Instalación

Paso 1) Añadir el CSS3 o estilo

Dirigase a laopciónPlantilla--clic en Editar HTML-- realice lacombinaciónde teclas CTRL-Fapare serael buscador y escriba/b:skin , justo arriba pegue el siguientecódigoCSS3.

Mostrar Codigo

.contenedor {
    position:relative;
    width:680px;
    margin: 0 auto;
}
.vista {
    width: 278px;
    /*ancho*/
    height: 231px;
    /*alto*/
    margin:-5px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirR8Je2aB6ek5H0wxGivYpgIdjFX3CJFj3_Xffq05lDlhepzcoJpVvmEJFTRuS0aPmKHDGDeWSiWE2V181RJeloHhUy6J9SIiVGrDgPcLWlTreS9fFgm2m_tms5dU_eXJNCWNAeoBAW3M/s300/bgimg.jpg) no-repeat center center;
}
.vista .mascara, .vista .content {
    width: 278px;
    height: 231px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.vista img {
    display: block;
    position: relative;
}
.vista h2 {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 20px;
    font-weight:bold;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.vista p {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    font-size: 16px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.vista a.info {
    font-family:"wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana, sans-serif;
    font-weight:bold;
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    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;
    border-radius:6px;
}
.vista a.info: hover {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}
.imagen_efecto img {
    width: 278px;
    /*ancho*/
    height: 231px;
    /*alto*/
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.imagen_efecto .mascara {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(26, 145, 236, 0.6);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.imagen_efecto h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.imagen_efecto p {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.imagen_efecto:hover img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.imagen_efecto a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.imagen_efecto:hover .mascara {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.imagen_efecto:hover h2, .imagen_efecto:hover p, .imagen_efecto:hover a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.imagen_efecto:hover p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.imagen_efecto:hover a.info {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

Ahora el tamaño de lasimágeneslo puedes cambiar por defecto este en un tamaño 278 x 231 pixeles y el tamaño del contenedor es de 600 pixeles esto lo puedes cambiar al inicio delcódigocss3, guarde los cambios

Paso 2) Añadir lasimágenes
Terminado el paso 1, vamos añadir el contenedor de lasimágenes, para estodirígetea Diseño--escojalaopciónañadir un gadget---HTML/JavaScript -- y pegue el siguiente codigo.

div class="contenedor"
               !--ANUN1--
                div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--ANUN2--
                 div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--ANUN3--
                 div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
               !--ANUN4--
                div class="vista imagen_efecto"
                    img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dGkGtVP3fbjhg3Q5jCyvclqD7d23MNF4Dpw3iDZ8KER22So4FcrELsOs2sp3mFrvzyptHDPlcLrjPs3POmcPIISZjyRmjiItMXcgMRWlo78655tUv5c0Il_xnyPctItM3e0aI6r-j84/s278/ey.jpg" /
                    div class="mascara"
                        h2Anunciate/h2
                        pTenemos los mejores precios del internet/p
                        a href="#" class="info"Leer mas/a
                    /div
                /div  
                !--fin--
 /div  
!--fin--

Guarda los cambios y yatendráimágenesmas agradables con descripciones,esta es una de las primeras formas que presentare existen muchas mas.

JavaFace-elblogdelprogramador

social counter

martes, 30 de julio de 2013

Añade a tus proyectos Notificaciones con estilo con CSS3 y JQuery

Contraseña: www.javaface-elblogdelprogramador.com

Contraseña a partir del 2012: javaface

lunes, 29 de julio de 2013

Añade a tu sitio un estilo Metro con este Pack de botones windows 8 en CSS3

Contraseña: www.javaface-elblogdelprogramador.com

Contraseña a partir del 2012: javaface

Descargate y añade a tu sitio este Pack de Botones Css3

Contraseña: www.javaface-elblogdelprogramador.com

Contraseña a partir del 2012: javaface

viernes, 26 de julio de 2013

Publica contenido y añadir comentario en cualquier grupo del usuario con la API de Facebook en javascript

Contraseña: www.javaface-elblogdelprogramador.com

Contraseña a partir del 2012: javaface

miércoles, 1 de mayo de 2013

Añade a tu sio web el estilo Burbuja(Bocadillo) ideal para títulos o cajas de comentarios

martes, 30 de abril de 2013

Efecto Hover con CSS3 ideal para tus anuncios e imágenes en Blogger (Segunda Forma)

DESCARGATE EL CODIGO FUENTE COMPLETO

Contraseña: www.javaface-elblogdelprogramador.com

lunes, 22 de abril de 2013

Añade a tu sitio un contenedor dos caras ideal para los datos del Autor ,efecto Hover dos caras con CSS (Blogger) (Forma 1)

DESCARGATE EL CODIGO FUENTE PARA TUS PROYECTOS

Contraseña: www.javaface-elblogdelprogramador.com

domingo, 21 de abril de 2013

Añade a tu sitio este efecto Hover a tus imágenes efecto de transición brillo con CSS3 (Blogger)

Descargate el Codigo fuente para tus Proyectos

Contraseña: www.javaface-elblogdelprogramador.com

domingo, 24 de marzo de 2013

Simple TooltipText con CSS3 dale mas vida a tus vinculos

viernes, 22 de marzo de 2013

Efecto Hover con CSS3 ideal para tus anuncios en Blogger (Primera Forma)

Guia instructiva Offensive Security en PDF convierte en un White Hacker

Categorias

Blog Archive

Entradas populares