Efectos en Imagenes

Hoy voy a mostrar varios efectos que pueden poner a sus imagenes okei? son muy llamativos y muy faciles de usar.. 

TODOS los codigos se pegaran antes de ]]></b:skin> 

empezemos con el primero:

EFECTO SEPIA

Codigo:

.post-body img {filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}.post-body img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}

*** si lo quieres invertido osea de imagen normal a efecto sepia estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: sepia(100%);z-index: -99px;}

EFECTO GRAYSCALE

codigo:

.post img{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .post img:hover{-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}

*** si lo quieres de imagen normal a efecto grayscale estes es el codigo: ***

img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}

img:hover{-webkit-filter: grayscale(100%);z-index: -99px;}

EFECTO BLUR

codigo:

.post-body img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .post-body img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}

*** si lo quieres de imagen normal a efecto blur estes es el codigo: ***

img{

-webkit-transition: all .7s linear;

-moz-transition: all .7s linear;

transition: all .7s linear

}

img:hover{-webkit-filter: blur(1px);z-index: -99px;}

INVERT EFFECT

codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: invert(100%);z-index: -99px;}

EFFECTO CAMERA SHOT

codigo:

img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear
}
img:hover{-webkit-filter: brightness(15%);z-index: -99px;}

que tengan bonito dia :)

text area

El tag <textarea> es muy útil para publicar código en una entrada evitando que los navegadores lo interpreten o para poner un texto largo sin que ocupe demasiado espacio. Presento este tutorial para Junior que pregunto como se hace, así que lo explico por si le es útil a alguien más.

Si colocas el código o texto que quieras mostrar entre <textarea> y </textarea>,obtendrás este resultado:

<textarea>
AQUI VA EL CODIGO;DIGO O TEXTO QUE DESEAS MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.
</textarea>
es asi como se veria:



Si además añades a continuación de <textarea, las propiedades "rows" y "cols"podrás controlar el alto y ancho de tu textarea cambiando estos valores. El código sería algo como esto:

<textarea rows="2" cols="14">
AQUI VA EL CODIGO;DIGO O TEXTO QUE DESEAS MOSTRAR DENTRO DE TU CAJA DE TEXTO O TEXTAREA.
</textarea> 


espero que te sirva ^^!!

Intro Mensaje de Bienvenida

Hola chicas buen diaa n.n les traigo un nuevo tuto ^^ muy bonito es el de poner un intro al blog con un mensajito kawaii diciendo bienvenidos asi como el que puse aqui abajito =D!! es muy facil de realizar.. espero les guste ^^!!! 

Para ver el intro da clic aqui para ir a mi blog de pruebas

Para poner el intro en tu blog sigue los siguientes pasitos: 

1.- Entra a tu blog 
2.- Ve a la pestanita que dice Diseno
3.- Dentro de diseno da clic en Edicion Html
4.- Y donde dice Editar plantilla buscas el codigo:

]]></b:skin>

5.- Cuando lo encuentres copia el siguiente codigo y pegalo justo arriba de ]]></b:skin>

</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 4000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="URL DE LA IMAGEN"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>

6.- Dar vista previa y luego guardar.!!

Amm les hice unos intros no estan muy bonitos hahhah no soy buena en diseno xD pero los hice con carino n.n !! 

Ustedes pueden hacer sus propios intros con su estilo es muy facil solo necesitanphotoshop e imaginacion, ammm una cosita mas, los intros los hize en fondo transparente, las medidas me salieron un poquito grandes, ustedes pueden hacer las suyas segun mas pequenas si gustan.. me hago entender?? bueno sino dejame tu comentario con gusto te respondo =D!! besitos

Oka ahora los intros que hice xD!!!

http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog4.png

http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog.png



http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog3.png



http://i1143.photobucket.com/albums/n639/annyz-chaan/annyz-blog/introannyzblog2.png

Que tengan un buen dia ^^

Ocultar chatbox con una imagen

Hola chicos hoy aprenderemos a ocultar el chat con una imagen justo como yo lo tengo ^^!!

--------------------->

El truco es muy facil ya lo veran n *w*

okii para empezar nos vamos a:

Diseño >> Elementos de la pagina >> Añadir un gadget Htlm/javascript

copia el siguiente codigo y guarda:

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL DE LA IMAGEN') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

pega el codigo de tu cbox

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

Remplaza donde dice URL DE LA IMAGEN por la url de la imagen de tu preferencia. Pega el codigo de tu cbox donde dice CODIGO DE CBOX.!!

Este tutorial lo viste en Annyz Kawaii Blog, no copies mi trabajo, si tomas el tuto no olvides los creditos !!

besos ^w^

imagen estatica en la esquina del blog

hoy voy a hablarles de como poner una imagen estatica en tu blog, asi como la mia ^^ (esquina derecha inferior) yo por ejemplo tengo a miKu de vocalOid que los acompaña durante la visita del blog... y sirve tambien para subir hasta arriba dandole click en la imagen eso no sabian verdaad? x) bueno les pongo este pequeno tutorial de como hacerlo.!!

 Ingresar a tu blog y buscas Diseño

 Colocar la opción Editar HTML

 buscas </body>; (pulsa Control F para que sea más fácil) que se encuentra al final de toda la plantilla.

Sobre ese código ingresas esto:

<a href='#'><img alt='ir arriba' border='0' src='dirección de la imagen' style='position:fixed; bottom:0; right:0;'/></a>

Y listo! colocas guardar plantilla y saldrá tu imagen

Header Kawaii Hechos Por Mi ^^

Chicas hoy hice unos headears que espero les gusten mucho xD

si las tOmas da creditos okis no le quites mi firmita al header plis

notita: los header que ves con titulos al darle vista original te salen sin la letritas xD

clic aqui para ver su tamaño original



clic aqui para ver su tamaño original




clic aqui para ver su tamaño original




clic aqui para ver su tamaño original



clic aqui para ver su tamaño original



clic aqui para ver su tamaño original

No cOpiar ~~ bleeh o.O

Poner un menu en la cabecera con Imagemap

Hola chicas hoy les enseñare como poner un menu dentro de su cabecera o header es muy sencillo porque no vamos a necesitar editar nuestra plantilla ni nada de eso.. todo lo haremos por medio de gadgets okei ^^?

Para empezar necesitamos tener ya hecho nuestro menu en la cabecera ejemplo:

yo lo hice sencillito pero ustedes pueden poner el menu en el lugar que gusten y darle un estilo propio :)

al tener la imagen va a la pagina image map.com
y se encontraran con esto:

Al presionar "Start Mapping You Image" se te abrira otra ventanita, habra un conteo de 10 segundos y luego da clic en continue to next step
se empezara a cargar tu cabecera, al cargarse te saldra al lado derecho una opcion que dice "rectangle" da clic ahi.

y se te abrira una especie de forma para llenar, arrastrala hacia tu menu (sigue la imagen guia)

Haz lo mismo con todos los demas recuadros de tu menu.. al terminar da clic en

se te abrira esta ventana, escoges "Html Code" y copias el codigo que muestro en el recuadro de abajo

okei ahora cabe destacar que vamos a usar una gadget html y ahi vamos a poner nuestra cabecera..para eso vamos a tener que quitar la que tenemos y como hacemos esto? pues bien mira a continuacion:

nos vamos diseño y damos clic en editar en nuestro gadget de la cabecera, estado ahi eliminamos la imagen que teniamos como header y damos clic en guardar. La imagen desparecera y solo quedara el nombre del titulo que en mi caso es Annyz Kawaii pruebas.

Ahora abres un gadget html abajito del gadget de la cabecera y pegas el codigo que te dije que copiaras arriba ^^ .. luego das clic en "Ver Blog" y veras tu cabecera con tu menu, peroooo como notaras arribita se sigue mirando el nombre de tu blog

en este paso vamos a deshacernos de el:

ve a diseño y da clic en "disenador de plantillas" y haz lo que hago en la imagen de abajo
si te fijas puse 2px para que se hiciera pequeño el titulo, puedes ponerle 0px no tiene importacia, recuerda al terminar dar clic en "aplicar al blog"

Ahora si visualiza tu blog para que mires como te quedo ^^

Hay algunas notas que quiero resaltar la primera es que es un gadget javascript asi que si quieres ponerle efectos amm por ejemplo que se mueva 360 grados y algunos otros efectos al header no se podra porque como dije no es el header .. es un gadget html script okei?

y segundo si lo pusiste y despues decides quitarlo y poner tu cabecera
normal .. solo elimina el gadget y vuelve a poner la imagen de tu cabecera donde habitualmente se pone ^^

Header Que Se Mueve 360 [Grados]

Oka bueno chicas seguro ya han notado desde hace un buen tiempo que mi header hace un movimiento de 180 grados okiis ahora qui el tuto ^^

muy sencillito como todos los tutos que aqui pongo xD empezemos:

nos vamos a Diseno  Edicion de HTML  Editar Plantilla

Pulsamos CTRL + la tecla F y buscamos este codigo

/* Header
----------------------------------------------- */

y justo abajo pegamos el siguiente codigo:

.header{

margin-top:30px;

margin-left:0px;

-webkit-transition:2s;

}

.header:hover {

-webkit-transform: rotatey(360deg);

-webkit-transition-duration: 2s;

}

da vista previa y guardar

asi quedaria:



notita: el efecto se mira mejOr en google chrome y el mozilla version actualizada okis ^^

Como hacer un header o cabecera transparente

Es muy sencillo chicas ya lo veran

yo uso varias medidas para hacer un header pero esta vez usare 800 X 380 pixeles

1.- Para empezar abrimos nuestro photoshop y damos Archivo >> Nuevo oCtrl+F se abrira la ventanita donde pondremos las dimesiones del header y escogeremos el fondo TRANSPARENTE okei esto es muy importante.

clic en Ok

2.- Tener un png o render [recuerden que los renders son los que ya estan recortados y no tienen fondo]

para escoger una imagen ve a archivo >> Abrir y ve a la carpeta donde tienes tus png

okii yo escogi esta imagen

** Si tu imagen queda muy grande o viceversa tu puedes redimensionarla presiona Ctrl mas la tecla T y ahi podras cambiarle el tamaño.

Ahora vamos a ponerle un letrerito o el titulo de tu blog.

Para ponerle un titulo a tu header da clic en el iconito T [es para escribir con las fuentes] yo le puse bienvenidos a mi pequeno mundo annyz world.

ahora lo que falta es ponerle color y trazo para resaltar las letras. da clic en el iconito que esta abajo de las capas parece una f y se te abrira una ventana donde podras poner el trazo y color a tu fuente..

mira la imagen guia.

Al terminar da clic okei

Ya tenemos nuestro header asi sencillito lo hice xD ahora solo debemos guardarlo

nos vamos a archivo >> guardar como, se te abrirla el folder donde se guardara tu cabecera.. al estar ahi le pones el nombre que gustes y elige elformato PNG luego da clic en "guardar" o"save"

y aqui el resultado una cabecera con fondo transparente =D

nos vemos espero les haya gustado el tuto ^^