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




Descargate este Video tutorial de Video2Brain sobre Joomla ideal para principiante (Resubido)

4/21/2013

Joomla es un Sistema de gestión de contenidos (en inglés Content Management System, o CMS) que permite desarrollar sitios web dinámicos e interactivos. Permite crear, modificar o eliminar contenido de un sitio web de manera sencilla a través de un Panel de Administración. Es un software de código abierto,desarrollado en PHP y liberado bajo licencia GPL. Este administrador de contenidos puede utilizarse en una PC local (en Localhost), en una Intranet o a través de Internet y requiere para su funcionamiento una base de datos creada con un gestor MySQL, así como de un servidor HTTP Apache.


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

sábado, 20 de abril de 2013

Descargate este MegaPack de video tutoriales sobre CSS3 mas ejemplos

4/20/2013

Les traigo un MegaPack de video tutoriales CSS3 lo quedeberíassaber!! ,estosvídeosson piezas claves para el manejo del css3 ami me han ayudado bastante por ejemplo en laelaboraciónde los efectos deanimaciónen mi pagina ,se que sera de mucha ayuda para ustedesasíque aprovechen.

Contenido

  • Crear semitransparencias, gradientes y sombras. - (Videotutoriales Illasaron)
  • Usos de la Propiedad Transform - (Videotutoriales Illasaron)
  • Uso de Css3 en el trabajo con imágenes. - (Videotutoriales Illasaron)
  • Transiciones y Animaciones. - (Videotutoriales Illasaron)
  • Uso de Media Queries. - (Videotutoriales Illasaron )(RECOMENDADO ;))
  • Creacion de multicolumna.-(Videotutoriales Illasaron )
  • Mas 5 ejemplos para sus proyectos referente a cada video


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

viernes, 19 de abril de 2013

Descargate este video tutorial sobre HTML5 avanzado 2013 (video2brain)

4/19/2013


Usa las características avanzadas de HTML5 en combinación con javascript

En este curso video2braintotalmente práctico aprenderás a crear aplicaciones web 2.0 basadas en las últimas versiones de las tecnologías HTML5 y javascript. Aprenderása desarrollar una aplicación de retoque fotográfico que funcionará de manera completamente online y descubrirás algunas particularidades de HTML5 que todavía no conocías.
José Vicente Carratalá nos presenta este curso HTML5 Avanzado.

Aprenderás paso a paso a crear una completa aplicación web que explotará las posibilidades de la web 2.0 mediante el uso de HTML5 y javascript.
Aprenderas:


  • Interacción de HTML5 y javascript
  • HTML5 Canvas
  • Edición de matrices
  • Creación de una interfaz gráfica
  • Reconocimiento de voz



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

Descargate este vídeo tutorial sobre HTML5 Y CSS3 (video2brain)

4/19/2013


En este curso de video2brain actualizarás tus conocimientos de HTML y CSS para elevarlos a las últimas versiones.

En este cursoaprenderáspaso a paso las novedades aplicadas en ejercicios prácticos. Finalmente, desarrollaremos un ejercicio completo en el que observaremos la interacción entre todas las novedades.
Introduccion: Aporte de HTML5 y CSS3 a la web del futuro Estructura y semántica: Mejoras en el etiquetado, el procesado y la indexación


  • Trabajo fuera de linea: Creación de aplicaciones offline
  • Acceso a dispositivos: Introducción de datos a través de dispositivos como micrófonos o webcams
  • Conectividad: Creación de puentes de datos entre aplicaciones web
  • Multimedia: Inserción de audio y video usando los nuevos estándares
  • 3D, gráficos y efectos: Crea impresionantes efectos unicamente con HTML y CSS
  • Rendimiento: Aprovecha al máximo las prestaciones del equipo en el que se visualiza la web
  • CSS3: Completa revisión al lenguaje presentacional, que permite realizar efectos visuales nunca antes vistos




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

sábado, 13 de abril de 2013

Descargate este video tutorial sobre Maquetacion web con Frameworks

4/13/2013





¿Te cansa maquetar una web siempre igual? ¿Te hartan las incompatibilidades entre navegadores? Descubre cómo un framework puede ayudarte a centrarte en lo realmente exclusivo de cada proyecto. Aprende con video2brain, cómo pueden ayudarte y descubre con un ejemplo práctico cómo usarlos paso a paso.

Marcos González Sancho te presenta su curso Maquetación web con frameworks. Mejora tu flujo de trabajo web usando un framework.Con este workshop descubrirás qué son los frameworks para desarrollo web, qué clases de frameworks tenemos a nuestra disposición y cuáles son los aspectos clave que hacen a un framework ser bueno o malo.

960 Grid System es un framework sencillo pero muy didáctico, que te permitirá aprender las bases de estos sistemas para poder dar el salto a otro nivel. Te enseñaremos los fundamentos que hay detrás de él y que son referencia para muchos otros frameworks existentes.

Podrás hacer tus primeros prototipos sobre papel con las plantillas en PDF que incorpora y aprenderás a instalar las extensiones de Fireworks y Photoshop para diseñar de forma adaptada en estos programas. A la hora de maquetar apreciarás el enorme ahorro de tiempo que supone el uso de estas herramientas y la gran compatibilidad que guardan con los diferentes navegadores.



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