OutGoing! Design
Esto es un foro de diseño gráfico con diversos programas , con actividades y mundo por explorar. Te invitamos a pasar el cursos por la imagen del logo y descubre el tablón mágico que hay en el. Animate y registrate
Hermandad
Noragami Roler
Últimos temas
» Búsqueda de Staff -Yes princess-
Sáb Mar 28, 2015 1:42 pm por paula10

» Hola soy Pia
Dom Sep 21, 2014 10:41 pm por Chokorabu

» Academia Ciaeth | Élite - Cambio de Botón
Vie Sep 05, 2014 5:37 pm por Invitado

» Nuevita y con PS a estrenar
Sáb Jul 26, 2014 5:21 pm por Viola

» Regalo de bienvenida , ven y pide!
Jue Jul 24, 2014 11:04 am por ChinaCarnavalera

» Posiblemente de guste esto... Pero posiblemente no(?) ❤Cari Hime❤ Galería~
Lun Jul 21, 2014 10:17 pm por 04Kitsu08

» Tutorial {CSS}: Editando cabecera y menú de un foro.
Miér Jul 16, 2014 4:14 pm por Katya Kutnesova

» Solo los humanos sensuales pueden leer esto(?)
Miér Jul 16, 2014 12:00 pm por ♥Cari Hime♥

» Mi Viene Y Se Presenta
Mar Jul 15, 2014 3:39 am por Invitado

Élite
12/12 Número de cupos
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Nombre dle foro
Skin diseñado por Eniozu © matryoshka
Conectarse

Recuperar mi contraseña


Tutorial {HTML} Creación de firma HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

{ Tutorial } Tutorial {HTML} Creación de firma HTML

Mensaje por Viola el Jue Mar 27, 2014 7:14 pm


  • Nombre del Tutorial: Creación de firma HTML
  • Dificultad: Media
  • Descripción: Creacion de firma HTML ´para usos en foros.



Codes en hide , comenta para ver



Tutorial creacion de firma.
Nivel Medio



Primero que nada empezaremos llevando la firma grafica a lo html. Comenzamos creando un div con el background imagen ya que solo utilizaremos imagenes. tratare de hacer algo paracido a esto [Tienes que estar registrado y conectado para ver este vínculo] pero con html.



Luego le añaden el width, height.



Ahora añadiremos un margin ¿Que es el margin? La propiedad margin es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. Nos ayudara para colocar el elemento en este caso el div en cualquier lugar definido.

Primero creamos el div mas pequeño y lo colocamos dentro del div del que acabamos de crear
Por ejemplo yo use esto:



Y unido queda asi:



Se ve algo rara ¿No?
Pues ahora el margin lo usaremos hay margin-left que sirve para llevarlo izquierda y el margin-right para llevarlo a la derecha , el margin-top para llevarlo arriba y el margin-bottom para llevarlo hacia arriba , esto se usa elementos negativos o positivios en pixeles como 100px o -100px , pero si los pones sin position se te vendra el html entero
Valor “position: absolute”

Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos.

La posición de las capas con “position:absolute” se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:absolute” y su funcionamiento. No olvides observar el código fuente. Ver ejemplo de position:absolute

Valor  “position: relative”

Anteriormente hemos visto como los elementos con posición absoluta no formaban parte del flujo HTML. Pues a diferencia de éstos, los elementos con posición relativa sí forman parte de este fluir.

Para elementos con un posicionamiento relativo, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:relative” y su funcionamiento. No olvides observar el código fuente. Ver ejemplo de position:relative

Yo usare margin-bottom y margin-left que tambien se le puede colcoar como  left: y bottom: yo use la segunda opcion y position relative



Use:




Es cuestión de jugar con valores negativos y postivos y con pixeles. Pueden ponerle texto y lo que deseen , bordes redondos. Sean creativos no me traigan algo parecido a lo que hice sino , no lo aceptare. Cualquier duda posteenla acá .

Otros ejemplos:
[Tienes que estar registrado y conectado para ver este vínculo]
[Tienes que estar registrado y conectado para ver este vínculo]
Creado por [Tienes que estar registrado y conectado para ver este vínculo]

_________________
Nombre de personaje
Frase / Links / Etc
avatar
Viola
Admin


Mensajes : 75
OutPuntos : 152
Fecha de inscripción : 30/05/2013
Femenino Photoshop

Ver perfil de usuario http://outgoingdesign.forosactivos.com

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.