PDA

Ver la versión completa : Nuevo codigo css con letras diferentes de chat, descripcion y fondo animado de chat



F-1
20/03/2015, 04:06
Hola hoy les voy a demostrar como queda un fondo animado con las letras del chay en color y una imagen al lado , si teneis paciencia tambien la podeis hacer animada , como la descripcion del chat , para que quede en la franja negra teneis que hacerlo en un fondo transparente . las letras las podeis escribir al gusto de cada uno , las medidas del fondo para el nombre del chat son : 57 de alto y de lo ancho gepende de lo largo que sea el nombre , las medidas de la descripcion son 16 de alto y de ancho tambien depende de lo largo que sea la descripcion que tenga , las 2 cosas quedarian asi ver imagen.
http://i.imgur.com/WG4SHYH.gif

Ahora vamos a lo que realmente quereis ver poner el fondo animado , tenies que entrar por edita tu chat ver imagen.

http://i.imgur.com/IrCco1X.png

Luego hay que entrar en extras facturas , ver imagen.

http://i.imgur.com/nIdC3N2.png

En esta imagen vereis la casilla que tenes que marcar tal como lo veis , la qu esta marcada con una flecha , ver imagen.

http://i.imgur.com/0udoHLG.png

El chat queda completo con sus comentarios abajo y como si fuese un chat sin el codigo css , os mostrare una imagen de como queda con el fondo animado , ver imaggen.

http://i.imgur.com/hv9UTzJ.gif

En esta imagen vereis que esta algo editado el fondo del gato que en la anterior no esta , ver imagen.

http://i.imgur.com/UAPqk0Y.gif

Para editar el fondo yo os recomiendo este editor ,http://www.lunapic.com/editor/ <---- edita y da efectos ; es un editor muy completo esta en ingles pero los que pueden traducirlo como chrome lo podeis entender mejor porque traduce la pagina entera
En esta imagen vereis que la pagina ya esta traducida y donde marcca la flecha es donde teneis que buscar lo que quereis editar , ver imagen.

http://i.imgur.com/geebXl7.png

En esta otra imagen ya hemos subido la imagen vereis donde hay que pinchar para poder editar el fondo esta marcada con la flecha, ver .

http://i.imgur.com/Xk60xWE.png

En esta otra imagen al pinchar el texto nos sale para poder editarlo , la fleca de la izquierda que hay sale un 0 es para centrar el texto , el de la derecha que hay esta en 125 es para subir o bajar el texto , ver imagen .

http://i.imgur.com/pwrrPKu.png

Ahora les dejo el codigo para que lo podais utilizar , espero que os guste


BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(AQUI FONDO DE ATRAS)} #chat embed {background:url('AQUI FONDO DE CAJA LINK DIRECTO EN GIF') !important}h2{background:url('AQUI DESCRIPCION DEL CHAT') no-repeat 11px center}embed{background: url(AQUI NOMBRE DE CHAT) 0px 608px no-repeat}h1{background:url('AQUI NOMBRE DE CHAT') no-repeat 11px center}h1{text-indent:-9999px}*{cursor: url(AQUI CURSOR),auto; FONT-SIZE: 0.8em;

PD: Recuerden que para las animaciones deben de ser en gif . si quereis otro cursor para tener la parte de abajo como yo tengo , asi teneis 2 cursores el os dejo el codigo aqui .


<div style="cursor:url(AQUI LA URL DE LA IMAGEN EN GIF),progress;">
CONTENIDO QUE TIENE TU XAT</div>

Gracias

luna staff ayuda
20/03/2015, 04:13
excelente tutorial rosi va a servir de mucho a la gente :$ como siempre magnificos aportes

santotomas
20/03/2015, 04:17
gracias por el aporte mami te quedo muy completo y nuy bien explicado como siempre buen tutorial(kiss)

duul
20/03/2015, 04:40
Gracias por el aporte Impa, sobre todo por tomarte el tiempo para facilitar las cosas a los usuarios en cuestiones de códigos css. Esta muy completo el código y muy buena explicación .

Saludos cordiales!

xjulianax
20/03/2015, 04:47
wowww que bonito tuto mami te felicito gran aporte sobre todo bien explicado y completo gracias.

SilvR
20/03/2015, 05:27
Cómo siempre, un tutorial bien explicado y de 10 como dicen los compañeros, será un tutorial de muchísima utilidad para la gente

besos

iLudmy
20/03/2015, 07:10
Buen tuto.. Eso se ve muy bueno! Gracias por compartirlo con nosotros. Espero que les sea de utilidad!

Saludos.

Poker
20/03/2015, 08:02
esta bueno tu tuto gracis por tomarte la molestia ;)

Bast
20/03/2015, 09:36
Buen aporte ^^
Gracias por tomarte las molestias..


Saludos

perroloco
21/03/2015, 18:54
Buen aporte mami excelente tutorial y buena forma de poner fondos esta linda

Beel
21/03/2015, 18:59
Rosi
Gracias por el aporte, se ve muy detallado todo.
Saludos, buen tutorial.
(kiss)

Ckoni
21/03/2015, 19:08
bonito aporte rosi les sera de mucha ayuda este tutorial a los que aun no saben como crear css y exelente codigo :3

Solange
21/03/2015, 22:42
Como siempre Rosi aportando mas a la comunidad de usuarios de mundoxat, muchas gracias por el tutorial!

Besos Rosi http://www.mundoxat.com/foro/images/icons/icon11.png

Ezze
21/03/2015, 23:45
rosis esta muy bueno tu aporte de codigos css (kiss) saludos sera de gran ayuda :$