20 iconos web de alta calidad gratis

CUTIE Icon Set es una colección gratuita de iconos web de alta calidad compuesta por 20 creaciones. Noticias, RSS, calendario, carro de compras, etc., son algunos de los diseños que la integran.

CUTIE Icon Set está disponible para descargar en un archivo ZIP que contiene las 20 creatividades en formato AI y PNG en los tamaños: 64×64, 128×128, 256×256 y 512x512px.

CUTIE Icon Set


Fuente: pixelcoblog.com
--> Leer Más...

Extraer colores de una imagen

Imgr es otra herramienta online para capturar los colores de una imagen y descargar la paleta de colores.

Para usar Imgr sólo hay que subir la imagen; tmabién ofrece ajustar algunos parámetros como el brillo y la cantidad de colores.

Soporta los formatos de imagen: JPG, GIF y PNG. Además de descargar la imagen con los colores capturados, en la página muestra todos los colores de los que se puede obtener el código de color en hexadecimal.

Durante mis pruebas esta herramienta funcionó muy y rápido; una vez que subí la imagen, la paleta de los colores que ésta genera, aparece casi al instante.

Fuente: pixelcoblog.com
--> Leer Más...

Inserta vídeos de YouTube desde tu blog

Blogger permite darle más vida a tu blog con vídeos: si tienes un archivo de vídeo puedes subirlo a tu blog. Pero, sabemos que muchos de ustedes elijen incrustar vídeos de YouTube directamente en sus entradas.

Actualmente agregar un vídeo de YouTube es un proceso fácil, pero incluye varios pasos. En caso de que no tengas el código de insersión del vídeo, deberías abrir una nueva ventana o pestaña en el navegador, ir a YouTube. com, buscar el vídeo y reproducirlo para asegurarte de que es el correcto. Una vez que hayas copiado el código de inserción del vídeo, debes volver a tu entrada de Blogger e insertarlo manualmente.

¡Buenas noticias! Hemos añadido una función que hace que este proceso sea mucho más sencillo. Ya no deberás abrir una nueva ventana o pestaña desde tu editor de texto*, sólo tienes que hacer click en “Insertar un vídeo” (ubicado en la barra de herramientas). Además de la ya existente opción de “Insertar un vídeo”, verás dos nuevas pestañas: “Desde YouTube” y “Mis Vídeos de YouTube”.



* esta funcionalidad está disponible únicamente en el Nuevo Editor. Para utilizar el Nuevo Editor, visita la pestaña “Configuración” y elige “Editor actualizado” debajo de la opción “Configuración global”.

En la pestaña “Desde YouTube” podrás buscar, navegar y reproducir vídeos de YouTube, todo dentro de la interfaz de “Insertar un vídeo”. En caso de que tengas tus propios vídeos en YouTube podrás verlos en la pestaña “Mis vídeos de YouTube”.

Una vez que hayas seleccionado el vídeo, haz clic en “Seleccionar” para insertar el vídeo en tu entrada. Verás una imagen pequeña del vídeo que podrás mover alrededor de tu entrada, arrastrando y soltando.

¡Ah! Y en caso de que no lo sepan, agregar un vídeo de YouTube en tu blog es muy fácil. Mientras mires un vídeo en YouTube haz click en “Compartir” y elige Blogger. Sólo tienes que elegir el blog donde deseas compartir el vídeo (en caso de que tengas más de un blog), agregar contenido y publicar la entrada. ¡Disfruta de agregar vídeos a tu blog!

Fuente: loseasi.blogspot.com
--> Leer Más...

Menu Colorido con CSS

Encontré este menú hace tiempo en algún sitio que no recuerdo y me llamó la atención por lo alegre que resulta y que está creado con CSS.

Da para jugar un rato y probar distintas gamas de colores o añadirle estilos distintos, incluso imagen de fondo en las pestañas.

Los ejemplos tiene un tamaño reducido para poder mostrarlos en la entrada pero si seguimos los pasos nos proporcionará un menú como podemos ver aquí.


En plantilla Edicción de HTML añadimos los estilos justo antes de ]]></b:skin>


CSS


#middle {
width: 920px;
float:right;
padding:30px 10px 10px 10px;
margin:10px 0;
background:transparent url() no-repeat;
}
.category {
width:164px;
float:left;
border-top:8px solid #333;
margin:20px;
padding:5px 10px 10px 10px;
background:transparent;
}
.category p {
margin:0;
}
 
#cat-1 {width:164px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:164px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:164px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:164px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:164px; margin:0; border-top:8px solid #FFDD33; color:#000000;}
 
#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}


Una vez añadidos los estilos vamos a plantilla de diseño y editamos un nuevo gadget de HTML, en su interior añadimos lo siguiente:


HTML


<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='Enlace-1'>Enlace-1</a></h2>
</div></div></div>
 
<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='#'>Enlace-2</a></h2>
</div></div></div>
 
<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='#'>Enlace-3</a></h2>
</div></div></div>
 
<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='#'>Enlace-4</a></h2>
</div></div></div>
 
<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='#'>Enlace-5</a></h2>
</div></div></div></div>


❋ El menú está creado para cinco enlaces, para configurar esos enlaces editamos el gadget de HTML, buscamos la parte que dice:

<h2 class='title'><a href='#'>Enlace-1</a></h2>


Haremos la misma operación con los enlaces 2, 3, 4, 5.


❋ Enlace-1, 2, 3, 4 y 5 es el texto que visualizamos y hará las veces de enlace.


❋ La almohadilla  # la sustituimos por la url del sitio que vamos a enlazar.


❋ La anchura del menú la podemos modificar en:


#middle {
width: 920px;


❋ El margen se muestra transparente, es decir que se mostrará como fondo el color del blog. Si deseamos que se muestre un color distinto lo podemos cambiar en:


#middle {
background:transparent url(aquí url de imagen optativa) no-repeat;
También podemos añadir una url de imagen.


❋ Color de fondo en las pestañas


.category {
background: none repeat scroll 0 0 #5B0720;


❋ Para sustituir los colores de las pestañas por otros tendremos en cuenta que, #cat-1 y siguientes es el color de la línea superior que visualizamos. Ahí mismo podemos cambiar la anchura de las pestañas en width:164px.




❋ Donde #cat-1:hover y siguientes es el color de la pestaña cuando situamos el cursor sobre ella.


❋ El color del texto lo cambiaremos en


.category a
color:#ffffff;


❋ Igualmente cambiaremos el color de el texto cuando situamos el cursor sobre él en:
.category a:hover
color:#fff;


Parece complicado tanto cambio pero es cuestión de intentarlo.


Fuente:  gemablog-.blogspot.com
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika