Mostrando las entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Como crear una Forma de Contacto con Google Docs
¿necesitas un forma de contacto? entonces puedes crear una forma de contacto en Google Docs y lo mejor que es gratis.
Como evitar que tu perfil Facebook aparesca en Google
Facebook es usado por un gran número de usuarios en todo el mundo, la mayoría de usuarios crean perfiles en Facebook solo para relacionarse con miembros de familia y amigos íntimos, de ahí, la mayor parte de usuarios prefieren mantener su perfil privado y oculto para el público.
Como ver videos en YouTube con HTML5 + WebM
YouTube ahora soporta el uso del nuevo codec WebM, un formato de vídeo creado por Google el cual trabaja con HTML5 para ver videos sin el uso de Flash.
Video - Dreamweaver CS5 con soporte para HTML5 y CSS3
En el vídeo que abajo se muestra, Greg Rewis muestra como puedes usar los nuevos elementos HTML5 usando Dreamweaver CS5 , Greg Rewis es el lider del grupo Evangelista Creative Solutions Evangelism del Creative Suite Web Premium de Adobe Systems, Inc.:
Crear enlace "Volver al top" con jQuery
Crear un enlace de regresar al top que aparece solo al llegar al pie de pagina, es posible con un codigo creado por Brian Cray bajo libreria jQuery, su instalacion seria cuestion de 5 minutos.
Primero necesitas añadir al <HEAD> la direccion de la libreria jQuery (si aun no la tienes):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Ahora abre un Bloc de Nota y creas el archivo back-to-top.js con el seguiente codigo:
<br />$(function () { // run this code on page load (AKA DOM load)<br /> <br /> /* set variables locally for increased performance */<br /> var scroll_timer;<br /> var displayed = false;<br /> var $message = $('#message a');<br /> var $window = $(window);<br /> var top = $(document.body).children(0).position().top;<br /> <br /> /* react to scroll event on window */<br /> $window.scroll(function () {<br /> window.clearTimeout(scroll_timer);<br /> scroll_timer = window.setTimeout(function () { // use a timer for performance<br /> if($window.scrollTop() <= top) // hide if at the top of the page<br /> {<br /> displayed = false;<br /> $message.fadeOut(500);<br /> }<br /> else if(displayed == false) // show if scrolling down<br /> {<br /> displayed = true;<br /> $message.stop(true, true).show().click(function () { $message.fadeOut(500); });<br /> }<br /> }, 100);<br /> });<br />});<br />Lo guardas abajo del enlace de jQuery, ejemplo de como quedaria:
<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br /><script src="DOMINIO.COM/RUTA DEL ARCHIVO/back-to-top.js" type="text/javascript"></script><br />
Ahora añades el siguiente codigo el siguiente codigo al archivo CSS:
<br />#message a<br />{<br /> /* display: block before hiding */<br /> display: block;<br /> display: none;<br /> <br /> /* link is above all other elements */<br /> z-index: 999; <br /> <br /> /* link doesn't hide text behind it */<br /> opacity: .8;<br /> <br /> /* link stays at same place on page */<br /> position: fixed;<br /> <br /> /* link goes at the bottom of the page */<br /> top: 100%;<br /> margin-top: -80px; /* = height + preferred bottom margin */<br /> <br /> /* link is centered */<br /> left: 50%;<br /> margin-left: -160px; /* = half of width */<br /> <br /> /* round the corners (to your preference) */<br /> -moz-border-radius: 24px;<br /> -webkit-border-radius: 24px;<br /> <br /> /* make it big and easy to see (size, style to preferences) */<br /> width: 300px;<br /> line-height: 48px;<br /> height: 48px;<br /> padding: 10px;<br /> background-color: #000;<br /> font-size: 24px;<br /> text-align: center;<br /> color: #fff;<br />}<br />Ahora solo queda añadir el enlace justo antes de la ectiqueta :
<br /><div id="top"></div><br /><div id="message"><a href="top">Volver al top</a></div><br />
Ya deberia estar visible el scroll en tu sitio, este codigo combina HTML, CSS y jQuery.
Crear tipografia insertada en un recuadro con CSS3
Con el uso de CSS3 ya no es necesario usar programas como Photoshop para crear vistosas tipografías por ejemplo en títulos en el uso de H1, H2, etc...
Las nuevas propiedades de CSS3 da toda creativamente nuevas formas de estilo de nuestros sitios sin tener que recurrir a las imágenes, javascript o flash, En este caso vamos a utilizar la propiedad text-shadow que es actualmente soportado por Firefox, Opera y Safari para crear el aspecto del texto insertado, creando un recuadro con texto que el texto sea relegado a segundo plano, casi como un efecto de relieve inverso.
A continuación, vamos a utilizar gradientes de CSS3, si nunca has usado las extensiones del navegador necesarias para CSS3, crearemos un fondo gradiente del top hacia abajo desde #003471 al #448CCB:
Ahora añadimos la tipografia, colocamos el font-size a 30px y el color de la fuente en #0D4383:
y usamos para llamar la clase el siguiente código HTML:
Obtendríamos el siguiente resultado
Si no estas enterado de las extensiones del navegador, estos son los estilos CSS con un prefijo de proveedor específico, aun CSS3 no es totalmente compatible con todos los navegadores (IE por supuesto), sin embargo, debemos utilizar estas extensiones:
Como han observado el codigo usado, debemos utilizar las extensiones con cada prefijo para lograr la compatibilidad del CSS3 en Firefox, Safari y Chrome.
Las nuevas propiedades de CSS3 da toda creativamente nuevas formas de estilo de nuestros sitios sin tener que recurrir a las imágenes, javascript o flash, En este caso vamos a utilizar la propiedad text-shadow que es actualmente soportado por Firefox, Opera y Safari para crear el aspecto del texto insertado, creando un recuadro con texto que el texto sea relegado a segundo plano, casi como un efecto de relieve inverso.
A continuación, vamos a utilizar gradientes de CSS3, si nunca has usado las extensiones del navegador necesarias para CSS3, crearemos un fondo gradiente del top hacia abajo desde #003471 al #448CCB:
#gradientes {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
Ahora añadimos la tipografia, colocamos el font-size a 30px y el color de la fuente en #0D4383:
<br />h1.tipografia {<br /> font-family: Rockwell, Georgia, "Times New Roman", Times, serif;<br /> font-size: 50px;<br /> color: #0D4383;<br />}<br />y usamos para llamar la clase el siguiente código HTML:
<br /><div id="gradientes"><br /> <h1 class="tipografia">Blogger Recursos</h1><br /></div><br />
Obtendríamos el siguiente resultado
Si no estas enterado de las extensiones del navegador, estos son los estilos CSS con un prefijo de proveedor específico, aun CSS3 no es totalmente compatible con todos los navegadores (IE por supuesto), sin embargo, debemos utilizar estas extensiones:
- Mozilla/Firefox/Gecko:-moz-
- Webkit(Safari/Chrome):-webkit-(Nota: Algunas webkit prefijos sólo podrían funcionan en Safari y no Chrome)
Como han observado el codigo usado, debemos utilizar las extensiones con cada prefijo para lograr la compatibilidad del CSS3 en Firefox, Safari y Chrome.
Bookmark - Instalar marcadores sociales en jQuery
Un plugin de jQuery que establece un div para permitir que los usuarios compartan su página en varios sitios de bookmarking.
Comparte tu página con cualquier número de sitios bookmarking. Las características incluyen:
- Completo y versiones compactas.
- Personalizable lista de sitios.
- Fácil añadido de nuevos/otros sitios.
- Favoritos y E-mail enlaces.
- Marcar una página que no sea la actual.
La instalación es algo sencilla:
Primero añades en el head la ruta de la libreria jQuery:
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Seguido añades la ruta del estilo CSS y la librería jQuery del plugin:
<br /><style type="text/css">@import "DOMINIO.COM/RUTA DEL ARCHIVO/jquery.bookmark.css";</style> <br /><script type="DOMINIO.COM/RUTA DEL ARCHIVO/text/javascript" src="jquery.bookmark.js"></script><br />
abajo añadimos el DOM script :
<br /><script type='text/javascript'><br />$(selector).bookmark();<br /></script><br />
si no deseas mostrar todos los sitios, sino solo lo que tu quieras entonces usarías algo así:
<br /><script type='text/javascript'><br />$(selector).bookmark({sites: ['delicious', 'digg']});<br /></script><br />Bien ahora ya se puede crear crear el DIV donde quieres el botón de compartir:
<br /><div id="defaultBookmark" class="hasBookmark"> <br /> <div class="bookmark_popup"> <!-- Clase si es ventana emergente --> <br /> <ul class="bookmark_list"> <!-- Clase si es estilo bookmark_compact --> <br /> <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br /> <span class="iconsStyle"/> Nombre a mostrar</a></li> <br /> <!-- Opcional estilo de la URL --> <br /> <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br /> <span class="background-image: url(icons.gif);"/> Nombre a mostrar</a></li> <br /> <!-- Opcional estilo de la URL --> <br /> <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"><img src="icon.png" /> Nombre a mostrar</a></li> <br /> : <br /> </ul> <br /> </div> <br /></div><br />
Efecto de Menu Navegacion Background con jQuery
La idea principal es contar con tres elementos en lista que contengan la misma imagen de fondo pero con una posición diferente.
La imagen de fondo para cada artículo se animará al deslizar el mouse sobre la misma en momentos diferentes, creando un efecto realmente bonito. La imagen de fondo se deslizara a la dirección del elementos en lista el medio dependerá del tema que el usuario estaba antes: viene de la derecha, que se desliza desde la izquierda y viceversa.
Para lograr este efecto se utilizo "Background-Position Animation Plugin", un plugin jQuery que crea un efecto de animación.
La instalación seria mas o menos esta, primero añades el estilo de CSS a la cabecera del sitio:
<style src="DOMINIO.COM/RUTA DEL ARCHIVO/syle.css" type='text/css'></style>
Ahora el fixed para IE6 abajo:
<br /><style src="DOMINIO.COM/RUTA DEL ARCHIVO/styleIE6.css" type='text/css'></style><br />
seguido añades la dirección del archivo jQuery:
<br /><script src='DOMINIO.COM/RUTA DEL ARCHIVO/jquery.bgpos.js' type='text/javascript'/><br />
ahora el con este código creamos el menu navegación con background:
<br /><br /><div id="menuWrapper" class="menuWrapper bg1"><br /> <ul class="menu" id="menu"><br /> <li class="bg1" style="background-position:0 0;"><br /> <a id="bg1" href="#">Our Passion</a><br /> <ul class="sub1" style="background-position:0 0;"><br /> <li><a href="#">Submenu 1</a></li><br /> <li><a href="#">Submenu 2</a></li><br /> <li><a href="#">Submenu 3</a></li><br /> </ul><br /> </li><br /> <li class="bg1" style="background-position:-266px 0px;"><br /> <a id="bg2" href="#">Our Brands</a><br /> <ul class="sub2" style="background-position:-266px 0;"><br /> <li><a href="#">Submenu 1</a></li><br /> <li><a href="#">Submenu 2</a></li><br /> <li><a href="#">Submenu 3</a></li><br /> </ul><br /> </li><br /> <li class="last bg1" style="background-position:-532px 0px;"><br /> <a id="bg3" href="#">Contact</a><br /> <ul class="sub3" style="background-position:-266px 0;"><br /> <li><a href="#">Submenu 1</a></li><br /> <li><a href="#">Submenu 2</a></li><br /> <li><a href="#">Submenu 3</a></li><br /> </ul><br /> </li><br /> </ul><br /></div><br />
Hasta aquí logras el efecto creado por el diseñador, ahora una explicación de lo que debes saber para lograr tu personalización del código, el siguiente código del CSS son las imágenes del background que utilizaras:
<br />.bg1{<br /> background-image: url(../images/1.jpg);<br />}<br />.bg2{<br /> background-image: url(../images/2.jpg);<br />}<br />.bg3{<br /> background-image: url(../images/3.jpg);<br />}<br />El siguiente código es del script que logra el las secuencias del submenu e imágenes, tamaños del reflejo y animación:
<br />$(function() {<br /> /* position of the <li> that is currently shown */<br /> var current = 0;<br /><br /> $('#bg1,#bg2,#bg3').mouseover(function(e){<br /><br /> var $this = $(this);<br /> /* if we hover the current one, then don't do anything */<br /> if($this.parent().index() == current)<br /> return;<br /><br /> /* item is bg1 or bg2 or bg3, depending where we are hovering */<br /> var item = e.target.id;<br /><br /> /*<br /> this is the sub menu overlay. Let's hide the current one<br /> if we hover the first <li> or if we come from the last one,<br /> then the overlay should move left -> right,<br /> otherwise right->left<br /> */<br /> if(item == 'bg1' || current == 2)<br /> $('#menu .sub'+parseInt(current+1))<br /> .stop()<br /> .animate({backgroundPosition:"(-266px 0)"},300,function(){<br /> $(this).find('li').hide();<br /> });<br /> else<br /> $('#menu .sub'+parseInt(current+1))<br /> .stop()<br /> .animate({backgroundPosition:"(266px 0)"},300,function(){<br /> $(this).find('li').hide();<br /> });<br /><br /> if(item == 'bg1' || current == 2){<br /> /*<br /> if we hover the first <li> or if we come from<br /> the last one, then the images should move left -> right<br /> */<br /> $('#menu > li')<br /> .animate({backgroundPosition:"(-800px 0)"},0)<br /> .removeClass('bg1 bg2 bg3')<br /> .addClass(item);<br /> move(1,item);<br /> }<br /> else{<br /> /*<br /> if we hover the first <li> or if we come<br /> from the last one, then the images should move<br /> right -> left<br /> */<br /> $('#menu > li')<br /> .animate({backgroundPosition:"(800px 0)"},0)<br /> .removeClass('bg1 bg2 bg3')<br /> .addClass(item);<br /> move(0,item);<br /> }<br /><br /> /*<br /> We want that if we go from the first one to the last one<br /> (without hovering the middle one), or from the last one<br /> to the first one, the middle menu's overlay should also<br /> slide, either from left to right or right to left.<br /> */<br /> if(current == 2 && item == 'bg1'){<br /> $('#menu .sub'+parseInt(current))<br /> .stop()<br /> .animate({backgroundPosition:"(-266px 0)"},300);<br /> }<br /> if(current == 0 && item == 'bg3'){<br /> $('#menu .sub'+parseInt(current+2))<br /> .stop()<br /> .animate({backgroundPosition:"(266px 0)"},300);<br /> }<br /><br /> /* change the current element */<br /> current = $this.parent().index();<br /><br /> /* let's make the overlay of the current one appear */<br /><br /> $('#menu .sub'+parseInt(current+1))<br /> .stop().animate({backgroundPosition:"(0 0)"},300,function(){<br /> $(this).find('li').fadeIn();<br /> });<br /> });<br /> /*<br /> dir:1 - move left->right<br /> dir:0 - move right->left<br /> */<br /> function move(dir,item){<br /> if(dir){<br /> $('#bg1').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(0 0)"},200);<br /> $('#bg2').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(-266px 0)"},300);<br /> $('#bg3').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(-532px 0)"},400,function(){<br /> $('#menuWrapper').removeClass('bg1 bg2 bg3')<br /> .addClass(item);<br /> });<br /> }<br /> else{<br /> $('#bg1').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(0 0)"},400,function(){<br /> $('#menuWrapper').removeClass('bg1 bg2 bg3')<br /> .addClass(item);<br /> });<br /> $('#bg2').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(-266px 0)"},300);<br /> $('#bg3').parent()<br /> .stop()<br /> .animate({backgroundPosition:"(-532px 0)"},200);<br /> }<br /> }<br />});<br />Diseño y Tutorial | CODROPS
Crear Botones Gradientes en CSS3
Esta es una forma de crear botones en CSS3 sin necesidad de javascript o cualquier imagen, simplemente usando una clase del CSS, te sera fácil cambiar colores, fuentes, ajustar el gradiente, sombras, radio, borde, etc...
El siguiente código es el estilo general de la clase del botón, usando el valor em en el relleno y la propiedad border-radius para que sea escalable sobre la base de font-size. Para ajustar las esquinas redondeadas y el tamaño de los botones, cambiar el borde de radio, tipo de letra, tamaño y los valores de relleno:
.boton {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.boton:hover {
text-decoration: none;
}
.boton:active {
position: relative;
top: 1px;
}
ahora añadimos la clase dle tamaño por si lo quermeos usar mas grande o mas pequeño:
<br />.bgrande {<br /> -webkit-border-radius: 2em;<br /> -moz-border-radius: 2em;<br /> border-radius: 2em;<br />}<br />.bmedio {<br /> font-size: 12px;<br /> padding: .4em 1.5em .42em;<br />}<br />.bpeque {<br /> font-size: 11px;<br /> padding: .2em 1em .275em;<br />}<br /><br />Ahora añadimos la clase del color, esto es un ejemplo con el color negro gradiente:
<br />.bcolor {<br /> color: #d7d7d7;<br /> border: solid 1px #333;<br /> background: #333;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));<br /> background: -moz-linear-gradient(top, #666, #000);<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');<br />}<br />.bcolor:hover {<br /> background: #000;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));<br /> background: -moz-linear-gradient(top, #444, #000);<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');<br />}<br />.bcolor:active {<br /> color: #666;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));<br /> background: -moz-linear-gradient(top, #000, #444);<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');<br />}<br /><br />Detalles que necesitas saber para editar tus propio botones :
zoom = hack IE7
*display = hack IE7
cursor = tipo de cursor
text-align = alineacion del texto texto
font = fuentes (letras)
text-shadow = sombreado de la fuente
-webkit-border-radius = radio del borde (ajusta redondeo de las esquinas)
-moz-border-radius = radio del borde para Firefox (ajusta redondeo de las esquinas)
border-radius = radio del borde (si el navegador no soporta CSS3)
-webkit-box-shadow = sombreado de la caja
-moz-box-shadow = sombreado de la caja para Firefox
box-shadow = sombreado de la caja (si el navegador no soporta CSS3)
background = color de fondo (si el navegador no soporta CSS3)
background: -webkit-gradient = gradiente para webkit
background: -moz-linear-gradient = gradiente para Firefox
filter = hack para IE
Bien ahora crearemos los botones, aqui es lo mas sencillo solo debemos llamar la clase del boton en el link usando class="boton bcolor", ejemplo :
Boton de auto ajuste, usando la clase class="boton bcolor":
<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor">Boton</a>
Boton pequeño, usando class="boton bcolor bpeque":
<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bpeque">Boton</a>
Boton mediano, usando class="boton bcolor bmedio":
<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bmedio">Boton</a>
Boton grande, usando class="boton bcolor bgrande":
<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bgrande">Boton</a>
Tambien puedes crear botones tipos input, un ejempo:
<br /><input class="boton bcolor" type="button" value="nombre del botón" />
otras formas de crear botones:
<br /><button class="boton bcolor">Tag Boton</button><br /> <span class="boton bcolor">Span</span> <br /> <div class="boton bcolor">Div</div> <br /> <p class="boton bcolor">P Tag</p> <br /> <h3 class="boton bcolor">H3</h3> <br />
Botones en varios colores?, si, puedes crear varios colores a tu gusto solo debes llamar el color la boton, un ejemplo rápido... arriba veras que el color del ejemplo del CSS se llama con bcolor siendo de color negro, tu puedes crear varios colores cada uno con una clase ejemplo: bazul, brojo, bamarillo, etc... y llamar la clase: class="boton bazul".
Via | Web Designer Wall
Como añadir links al Top Menu
Vídeo tutorial que explica como añadir links al top menu, se utiliza como modelo al template Blogarte.
Suscribirse a:
Entradas (Atom)
Suscripciones
-
Sígueme en Twitter
Actualizaciones en Twitter
-
Facebook
Blogger Recursos en Facebook
-
RSS de Blogger Recursos
Actualizaciones en tu lector feed
Subscribe via E-mail
Actualizaciones en tu Correo
